/* ============================================================
   DEEPRISE — COLOR TOKENS
   Four brand colors, each as a 50–900 ramp, plus neutrals.
   Exact hex values from brand brief — do not regenerate/round.
   ============================================================ */

:root {
  /* ---------- Stormy Teal — PRIMARY. Dominant color: large
     background fields as well as accents. ---------- */
  --teal-50: #D4ECEE;
  --teal-100: #B0D8DB;
  --teal-200: #7DC0C4;
  --teal-300: #67B3B7;
  --teal-400: #50A5AA;
  --teal-500: #2D8A90;
  --teal-600: #065C61; /* core */
  --teal-700: #054C51;
  --teal-800: #034449;
  --teal-900: #022E31;

  /* ---------- Mint Leaf — SECONDARY. Lighter/friendlier
     counterweight to dark teal fields. ---------- */
  --mint-50: #CFF2E7;
  --mint-100: #A2E7D1;
  --mint-200: #79DCBD;
  --mint-300: #51D2A9;
  --mint-400: #32C395;
  --mint-500: #12AF80; /* core */
  --mint-600: #0E8B66;
  --mint-700: #0A7052;
  --mint-800: #07543D;
  --mint-900: #053627;

  /* ---------- Harvest Gold — ACCENT / primary CTA color. ---------- */
  --gold-50: #FAEAD1;
  --gold-100: #F6DBB1;
  --gold-200: #EDC179;
  --gold-300: #E5A945;
  --gold-400: #DD9621;
  --gold-500: #D4870C; /* core */
  --gold-600: #B06F08;
  --gold-700: #8A5707;
  --gold-800: #644005;
  --gold-900: #422C02;

  /* ---------- Dark Wine — SIGNAL / premium / eyebrow color. ---------- */
  --wine-50: #F5DBD9;
  --wine-100: #D48880;
  --wine-200: #BB5E54;
  --wine-300: #9F3428;
  --wine-400: #942F24;
  --wine-500: #872B21;
  --wine-600: #6B2018; /* core */
  --wine-700: #561811;
  --wine-800: #4B140E;
  --wine-900: #370B06;

  /* ---------- Off-White — the ONLY off-white in the system.
     Used for text-on-dark, light section fields, logo backing. ---------- */
  --off-white: #FBFAF9;

  /* ---------- Ink neutrals (dark text) ---------- */
  --ink-700: #1C2C29; /* muted text */
  --ink-800: #182523; /* body copy */
  --ink-900: #141F1D; /* headings / strong text */

  /* ==========================================================
     SEMANTIC ALIASES — reference these in components/layouts,
     not the raw ramps above.
     ========================================================== */

  /* Surfaces */
  --surface-page: var(--off-white);
  --surface-primary-dark: var(--teal-600);   /* large dark hero/section fields */
  --surface-primary-deeper: var(--teal-800); /* footer, deepest sections */
  /* Teal-50/Mint-50 — small-surface FILL only (icon-circle backgrounds, badges,
     card accents). Not a section background: at full-bleed scale a 50-tint reads
     washed-out, not intentional. The system's only three section-background
     moves are surface-page, surface-primary-dark/deeper, and surface-secondary-bold. */
  --surface-primary-tint: var(--teal-50);
  --surface-secondary-tint: var(--mint-50);
  /* Mint-500 is a light-value core (unlike teal/wine) — safe to use full-strength
     as a bold SECTION field (unlike the tint above), not just as a fill. Pair with
     dark ink text/eyebrows (mint has no independent "deep" variant playing the
     teal-800/900 role). */
  --surface-secondary-bold: var(--mint-500);
  /* Eyebrow/heading text on a --surface-secondary-bold field. Ink-900 clears
     ~6:1 on mint-500 (best of ink-700/800/900, teal-800/900, mint-800/900 —
     mint-800/teal-800 fail the 4.5:1 small-text bar). Also keeps the section
     consistent with --text-heading, already ink-900. */
  --text-on-secondary-bold: var(--ink-900);
  --surface-card: var(--off-white);
  --surface-card-on-dark: var(--teal-700);   /* card sitting on a dark teal field */
  --surface-overlay: rgba(2, 46, 49, 0.72);  /* photo scrims, teal-900 based */

  /* Text */
  --text-heading: var(--ink-900);
  --text-body: var(--ink-800);
  --text-muted: var(--ink-700);
  --text-on-dark: var(--off-white);
  /* teal-50 clears AA (≈6:1) on teal-600/700 dark fields; teal-100 did not for small text */
  --text-on-dark-muted: var(--teal-50);
  /* accent label color for dark fields — mint-200 clears 4.5:1 on teal-600 (mint-300 did not) */
  --text-on-dark-accent: var(--mint-200);
  --text-link: var(--teal-600);

  /* Borders */
  --border-subtle: var(--teal-100);
  --border-default: var(--teal-200);
  /* form-control borders — teal-500 clears the 3:1 non-text contrast bar on off-white (1.4.11) */
  --border-input: var(--teal-500);
  --border-input-focus: var(--teal-600);
  --border-on-dark: rgba(251, 250, 249, 0.24);

  /* Actions */
  --action-primary: var(--gold-500);
  --action-primary-hover: var(--gold-600);
  --action-primary-active: var(--gold-700);
  --action-primary-text: var(--ink-900);

  --action-secondary: transparent;
  --action-secondary-border: var(--off-white);
  --action-secondary-text: var(--off-white);
  --action-secondary-hover-bg: rgba(251, 250, 249, 0.12);

  --action-tertiary-text: var(--teal-600);
  --action-tertiary-hover: var(--teal-700);

  /* Focus ring — visible on both light + dark surfaces */
  --focus-ring: var(--gold-400);

  /* Status — embedded in brand palette, not generic traffic-light hues */
  --status-success: var(--mint-600);
  --status-success-bg: var(--mint-50);
  --status-warning: var(--gold-600);
  --status-warning-bg: var(--gold-50);
  --status-error: var(--wine-600);
  --status-error-bg: var(--wine-50);
  --status-info: var(--teal-600);
  --status-info-bg: var(--teal-50);

  /* Signal / eyebrow / premium accents */
  --signal-wine: var(--wine-600);
  --signal-gold: var(--gold-500);

  /* Gradients — the standard gradient for any large dark-teal surface:
     testimonial band, contact section, callout/highlight boxes inside
     light sections, and the MediaCard photo-placeholder fallback.
     Not decorative elsewhere. */
  --gradient-primary-deep: linear-gradient(150deg, var(--teal-600), var(--teal-800));

  /* Hero-only variant — steeper angle (180° vs 150°), same Teal-600→800
     stops as --gradient-primary-deep. Differentiates the hero by the
     direction light falls across it, not a new stop or hue, so it still
     reads as the most immersive surface on the page without repeating the
     shared band gradient verbatim. */
  --gradient-primary-hero: linear-gradient(180deg, var(--teal-600), var(--teal-800));

  /* Shadows (see spacing.css for full scale) */
  --shadow-color: 3, 24, 26;
}