/**
 * Go Raise Dough — brand foundation stylesheet
 * Source: GRD brand guidelines (designer palette + Mulish typography)
 *
 * Link on any page:
 *   <link rel="stylesheet" href="/assets/grd-brand.css">
 *   <link rel="stylesheet" href="/assets/grd-utilities.css">
 *
 * Tokens:     var(--grd-spring-green), var(--grd-coastal-blue), etc.
 * Type:       .grd-headline, .grd-subhead, .grd-body, .grd-tagline
 * Links:      .grd-link, .grd-link--mint (on dark backgrounds)
 * Buttons:    .grd-btn, .grd-btn--primary, .grd-btn--secondary, .grd-btn--outline
 * Inputs:     .grd-input
 * Utilities:  .grd-text-*, .grd-bg-*
 *
 * Logo: primary mark minimum display width 90px (1.25in). Preserve clear space
 * around the mark per brand guidelines.
 */

@import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,400;0,600;0,800;1,900&display=swap");

/* -------------------------------------------------------------------------- */
/* Design tokens                                                              */
/* -------------------------------------------------------------------------- */

:root {
  /* Typography — Mulish */
  --grd-font-family: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
  --grd-font-regular: 400;
  --grd-font-semibold: 600;
  --grd-font-extrabold: 800;
  --grd-font-black: 900;

  /* Type scale (brand guide: body 18pt/26pt, subhead +4pt, headline +18pt vs subhead) */
  --grd-body-size: 1.125rem;       /* 18px */
  --grd-body-leading: 1.444;       /* 26/18 — line height 8pt above text size */
  --grd-subhead-size: 1.375rem;    /* 22px — body + 4pt */
  --grd-headline-size: 2.75rem;    /* 44px — subhead + 18pt */

  /* Primary palette */
  --grd-spring-green: #42e07a;
  --grd-coastal-blue: #087399;
  --grd-mint-green: #a7f2c1;
  --grd-midnight-teal: #003d52;

  /* Secondary palette */
  --grd-white: #ffffff;
  --grd-gray-owl: #d4d5cd;
  --grd-dolphin-gray: #91918c;
  --grd-warm-charcoal: #333331;

  /* Derived / UI */
  --grd-coastal-blue-dark: #065a78;
  --grd-spring-green-dark: #22c55e;
  --grd-mint-green-light: #a7f3d0;
  --grd-text-on-dark: var(--grd-white);
  --grd-text-muted-on-dark: rgba(255, 255, 255, 0.65);

  /* RGB tuples */
  --grd-white-rgb: 255, 255, 255;
  --grd-spring-green-rgb: 66, 224, 122;
  --grd-coastal-blue-rgb: 8, 115, 153;
  --grd-midnight-teal-rgb: 0, 61, 82;

  /* Shape */
  --grd-radius-pill: 9999px;
  --grd-radius-md: 0.5rem;

  /* Logo */
  --grd-logo-min-width: 90px;

  /* Focus ring */
  --grd-focus-ring: 2px solid var(--grd-spring-green);
}

/* -------------------------------------------------------------------------- */
/* Base (optional — only when .grd-brand-root is on html or body)             */
/* -------------------------------------------------------------------------- */

.grd-brand-root {
  font-family: var(--grd-font-family);
  font-size: var(--grd-body-size);
  font-weight: var(--grd-font-regular);
  line-height: var(--grd-body-leading);
  color: var(--grd-warm-charcoal);
  -webkit-font-smoothing: antialiased;
}

/* -------------------------------------------------------------------------- */
/* Typography                                                                 */
/* -------------------------------------------------------------------------- */

.grd-headline {
  font-family: var(--grd-font-family);
  font-size: var(--grd-headline-size);
  font-weight: var(--grd-font-extrabold);
  line-height: 1.15;
  color: var(--grd-warm-charcoal);
  margin: 0 0 0.5em;
}

.grd-subhead {
  font-family: var(--grd-font-family);
  font-size: var(--grd-subhead-size);
  font-weight: var(--grd-font-semibold);
  line-height: 1.35;
  color: var(--grd-warm-charcoal);
  margin: 0 0 0.5em;
}

.grd-body {
  font-family: var(--grd-font-family);
  font-size: var(--grd-body-size);
  font-weight: var(--grd-font-regular);
  line-height: var(--grd-body-leading);
  color: var(--grd-warm-charcoal);
}

.grd-body strong,
.grd-body .grd-semibold {
  font-weight: var(--grd-font-semibold);
}

.grd-body em {
  font-style: italic;
}

.grd-tagline {
  font-family: var(--grd-font-family);
  font-size: var(--grd-subhead-size);
  font-weight: var(--grd-font-black);
  font-style: italic;
  line-height: 1.3;
  color: var(--grd-warm-charcoal);
}

.grd-tagline--semibold {
  font-weight: var(--grd-font-semibold);
  font-style: normal;
}

.grd-on-dark .grd-headline,
.grd-on-dark .grd-subhead,
.grd-on-dark .grd-body,
.grd-on-dark .grd-tagline {
  color: var(--grd-text-on-dark);
}

/* -------------------------------------------------------------------------- */
/* Links                                                                      */
/* -------------------------------------------------------------------------- */

.grd-link,
a.grd-link:link,
a.grd-link:visited {
  color: var(--grd-coastal-blue);
  font-weight: var(--grd-font-semibold);
  text-decoration: none;
}

.grd-link:hover,
a.grd-link:hover {
  color: var(--grd-coastal-blue-dark);
  text-decoration: underline;
}

.grd-link--mint,
a.grd-link--mint:link,
a.grd-link--mint:visited {
  color: var(--grd-mint-green);
  font-weight: var(--grd-font-semibold);
  text-decoration: none;
}

.grd-link--mint:hover,
a.grd-link--mint:hover {
  color: var(--grd-spring-green);
}

.grd-on-dark .grd-link,
.grd-on-dark a.grd-link:link,
.grd-on-dark a.grd-link:visited {
  color: var(--grd-mint-green);
}

.grd-on-dark .grd-link:hover,
.grd-on-dark a.grd-link:hover {
  color: var(--grd-spring-green);
}

/* -------------------------------------------------------------------------- */
/* Buttons                                                                    */
/* -------------------------------------------------------------------------- */

.grd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.625rem 1.5rem;
  border: none;
  border-radius: var(--grd-radius-pill);
  font-family: var(--grd-font-family);
  font-size: 1.125rem;
  font-weight: var(--grd-font-semibold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, outline-color 0.2s ease, filter 0.2s ease;
}

.grd-btn:focus-visible {
  outline: var(--grd-focus-ring);
  outline-offset: 3px;
}

.grd-btn:disabled,
.grd-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Primary — Spring Green */
.grd-btn--primary {
  color: var(--grd-midnight-teal);
  background-color: var(--grd-spring-green);
}

.grd-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
  filter: brightness(0.95);
}

/* Secondary — Coastal Blue */
.grd-btn--secondary {
  color: var(--grd-white);
  background-color: var(--grd-coastal-blue);
}

.grd-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--grd-coastal-blue-dark);
}

/* Outline — Coastal Blue on light backgrounds */
.grd-btn--outline {
  color: var(--grd-coastal-blue);
  background-color: transparent;
  box-shadow: inset 0 0 0 2px var(--grd-coastal-blue);
}

.grd-btn--outline:hover:not(:disabled):not([aria-disabled="true"]) {
  color: var(--grd-white);
  background-color: var(--grd-coastal-blue);
}

/* On dark backgrounds */
.grd-on-dark .grd-btn--primary {
  color: var(--grd-midnight-teal);
  background-color: var(--grd-spring-green);
}

.grd-on-dark .grd-btn--outline {
  color: var(--grd-mint-green);
  box-shadow: inset 0 0 0 2px var(--grd-mint-green);
}

.grd-on-dark .grd-btn--outline:hover:not(:disabled):not([aria-disabled="true"]) {
  color: var(--grd-midnight-teal);
  background-color: var(--grd-mint-green);
}

/* -------------------------------------------------------------------------- */
/* Form controls                                                              */
/* -------------------------------------------------------------------------- */

.grd-input {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 2.8125rem;
  padding: 0 1.25rem;
  border: none;
  border-radius: var(--grd-radius-pill);
  background-color: var(--grd-white);
  color: var(--grd-warm-charcoal);
  font-family: var(--grd-font-family);
  font-size: var(--grd-body-size);
  box-sizing: border-box;
}

.grd-input::placeholder {
  color: var(--grd-dolphin-gray);
}

.grd-input:focus {
  outline: var(--grd-focus-ring);
  outline-offset: 2px;
}

.grd-on-dark .grd-input {
  background-color: var(--grd-white);
  color: var(--grd-warm-charcoal);
}

/* -------------------------------------------------------------------------- */
/* Color utilities                                                            */
/* -------------------------------------------------------------------------- */

.grd-text-spring-green { color: var(--grd-spring-green); }
.grd-text-coastal-blue { color: var(--grd-coastal-blue); }
.grd-text-mint-green { color: var(--grd-mint-green); }
.grd-text-midnight-teal { color: var(--grd-midnight-teal); }
.grd-text-warm-charcoal { color: var(--grd-warm-charcoal); }
.grd-text-dolphin-gray { color: var(--grd-dolphin-gray); }
.grd-text-white { color: var(--grd-white); }

.grd-bg-spring-green { background-color: var(--grd-spring-green); }
.grd-bg-coastal-blue { background-color: var(--grd-coastal-blue); }
.grd-bg-mint-green { background-color: var(--grd-mint-green); }
.grd-bg-midnight-teal { background-color: var(--grd-midnight-teal); }
.grd-bg-gray-owl { background-color: var(--grd-gray-owl); }
.grd-bg-white { background-color: var(--grd-white); }

.grd-on-dark {
  color: var(--grd-text-on-dark);
  background-color: var(--grd-midnight-teal);
}