/* ============================================================
   323 Ocean — Color System
   Drawn from the depth and clarity of the ocean.
   Light canvas dominant. Navy structures. Gold highlights.
   ============================================================ */

:root {
  /* ---- Brand core palette ---- */
  --deep-navy:    #042444;   /* Primary structure, buttons, headings on light */
  --navy:         #052C54;   /* Secondary navy, gradient midpoint */
  --steel:        #3C5B83;   /* Tertiary structure, secondary buttons, muted accents */
  --maritime:     #628CB1;   /* Hover states, links, light interactive accents */
  --gold:         #8B7D5E;   /* Emphasis, highlight pills, key accent moments */
  --gold-bright:  #B8A56F;   /* Gold hover, lighter emphasis */
  --gold-deep:    #6B5E41;   /* Gold text on light backgrounds, deep emphasis */
  --charcoal:     #54595F;   /* Secondary text, subheadings (print/brand) */
  --gray:         #7A7A7A;   /* Captions, metadata, subtle text (print/brand) */
  --black:        #000000;
  --white:        #ffffff;

  /* ---- Light canvas tokens (the default surface) ---- */
  --bg:           #f4f7fa;   /* Page background, light zones */
  --card:         #ffffff;   /* Card backgrounds */
  --border:       #dfe5ed;   /* Card and input borders */
  --text-navy:    #042444;   /* Headings / high-emphasis text on light */
  --text:         #1e293b;   /* Primary body text */
  --text-sec:     #475569;   /* Secondary text, descriptions */
  --text-muted:   #64748b;   /* Hints, captions, inactive elements */

  /* ---- Dark accent tokens (gate / hero / CTA / footer ONLY) ---- */
  --dk-gradient:   linear-gradient(170deg, #021829, #042444, #063052); /* @kind color */
  --dk-text:       #f1f5f9;
  --dk-text-sec:   rgba(255,255,255,0.70);
  --dk-text-muted: rgba(255,255,255,0.50);
  --dk-card:       rgba(255,255,255,0.06);
  --dk-border:     rgba(255,255,255,0.12);

  /* ---- Gold emphasis system (the 323 signature) ---- */
  --gold-pill-bg:   rgba(139,125,94,0.12);
  --gold-glow:      rgba(139,125,94,0.15);
  --navy-glow:      rgba(4,36,68,0.10);
  --navy-ring:      rgba(4,36,68,0.12);   /* input focus ring */

  /* ---- Deep Water mode (immersive dark home / hero experiences) ----
     The brand's evolved dark direction: an underwater descent. Reserved for
     the marketing home and full-bleed hero experiences, NOT body content
     pages (those stay light per the Web Visual Standard). */
  --dw-abyss:      #01060F;   /* Page base — deepest water */
  --dw-deep:       #041628;   /* Mid-depth panel tone */
  --dw-surface:    #0A2540;   /* Upper-water tone, gradient top */
  --dw-text:       #F2F7FB;   /* Primary text in deep water */
  --dw-text-sec:   rgba(242,247,251,0.72);
  --dw-text-muted: rgba(242,247,251,0.50);
  --dw-accent:     #8CCBF2;   /* Abyss glow — the bioluminescent accent */
  --dw-accent-soft:rgba(140,203,242,0.14);
  --dw-hairline:   rgba(180,212,236,0.24);  /* section dividers, ghost borders */
  --dw-panel:      rgba(255,255,255,0.04);   /* glass card fill */
  --dw-dots:       rgba(255,255,255,0.05);   /* fixed dot-grid texture */

  /* ---- 4CAP dimension palette (brand-derived) ----
     A tonal navy→maritime ramp from the brand core, with gold as the anchor.
     Ocean family, never off-brand sage/indigo, never bright primaries.
     The four keys map 1:1 to the 4CAP dimensions. */
  --dim-physical:  #2C4A6E;   /* Physical Foundation — deep navy-steel */
  --dim-mental:    #3C5B83;   /* Mental Resilience — steel */
  --dim-emotional: #628CB1;   /* Emotional Intelligence — maritime */
  --dim-purpose:   #8B7D5E;   /* Purpose and Alignment — gold (anchor) */

  /* ---- Status colors (result / verdict elements ONLY, sparing) ---- */
  --green:    #22c55e;  --green-bg:  rgba(34,197,94,0.08);
  --yellow:   #eab308;  --yellow-bg: rgba(234,179,8,0.08);
  --red:      #ef4444;  --red-bg:    rgba(239,68,68,0.08);

  /* ---- Semantic aliases ---- */
  --surface-page:     var(--bg);
  --surface-card:     var(--card);
  --surface-dark:     var(--dk-gradient);
  --text-heading:     var(--text-navy);
  --text-body:        var(--text);
  --link:             var(--maritime);
  --interactive:      var(--deep-navy);
  --interactive-hover:var(--navy);
  --emphasis:         var(--gold);
  --emphasis-text:    var(--gold-deep);
}