/* ============================================================================
   AWAQN — COLOR TOKENS  ·  "The Void"
   3-layer model. LAYER 1 raw (--awaqn-*) is DNA — never used directly.
   LAYER 2 semantic (--color-*) is what components consume. Component-level
   color aliases live in materials.css.
   ============================================================================ */

:root {
  /* ==========================================================================
     LAYER 1 — RAW / BASE PALETTE  (brand DNA; do not use directly)
     ========================================================================== */

  /* --- The Void (OLED black ground) --- */
  --awaqn-black:        #000000;  /* true black — the void / page ground */
  --awaqn-dark:         #0A0A0A;  /* elevated near-black (cards, surfaces) */

  /* --- Warm paper (light-mode ink/ground; carried for future use) --- */
  --awaqn-papyrus:      #F4F1EA;  /* warm cream */
  --awaqn-sand:         #EAE5D9;  /* deeper cream */

  /* --- The spectral gradient stops (use SPARINGLY — never smeared) --- */
  --awaqn-cyan:         #00F2FE;  /* the brand's primary accent in the Void */
  --awaqn-teal:         #2AB8C5;
  --awaqn-teal-deep:    #1E6F78;  /* darker teal terminus (StepBadge ring floor) */
  --awaqn-purple:       #8A2387;
  --awaqn-violet:       #906FD4;
  --awaqn-magenta:      #D147A3;
  --awaqn-pink:         #E94057;
  --awaqn-orange:       #F27121;
  --awaqn-amber:        #F5A623;
  --awaqn-gold:         #F9E076;
  --awaqn-mint:         #A8E6CF;

  /* --- GOLD conversion fills (SALES ONLY — the paid-conversion accent) --- */
  --awaqn-gold-cta:  linear-gradient(180deg, #FBE68B 0%, #E7C25A 55%, #D6A93F 100%); /* @kind color */ /* buy buttons */
  --awaqn-gold-band: linear-gradient(180deg, #FDEBA0 0%, #E7C25A 55%, #CE9F38 100%); /* @kind color */ /* offer top bar */

  /* --- Per-archetype accents (meaningful, product-specific colors) --- */
  --awaqn-arch-main:           #FFE985;  /* Main Book */
  --awaqn-arch-deconditioning: #FDB7A1;
  --awaqn-arch-relationships:  #CA3897;
  --awaqn-arch-work:           #FE9F12;
  --awaqn-arch-phs:            #ACFAC9;
  --awaqn-arch-sleep:          #27C9FD;

  /* --- Canonical brand gradient (dawn: cyan → purple → magenta → orange → gold) --- */
  --awaqn-gradient-spectral:
    linear-gradient(100deg,
      var(--awaqn-cyan)   0%,
      var(--awaqn-purple) 32%,
      var(--awaqn-magenta) 58%,
      var(--awaqn-orange) 82%,
      var(--awaqn-gold)  100%);
  /* tighter 2-stop for fine accents (rules, underlines, ring strokes) */
  --awaqn-gradient-accent:
    linear-gradient(90deg, var(--awaqn-cyan) 0%, var(--awaqn-magenta) 100%);
  /* TEAL step ring — cyan → teal → deep teal (the enumerated-step device) */
  --awaqn-gradient-step:
    linear-gradient(150deg, var(--awaqn-cyan) 0%, var(--awaqn-teal) 55%, var(--awaqn-teal-deep) 100%);
  /* TONAL cyan gradient — the calm, in-family highlight for a hero word */
  --awaqn-gradient-cyan:
    linear-gradient(95deg, var(--awaqn-cyan) 0%, var(--awaqn-teal) 100%);
  /* The signature AMBIENT GLOW — soft diffuse cyan+magenta light on the void.
     Lifted for reliable presence on partial/short surfaces (specimen cards,
     section blocks) — still atmosphere, not a hard band. */
  --awaqn-ambient-glow:
    radial-gradient(48% 60% at 28% 34%, rgba(0,242,254,0.24), transparent 72%),
    radial-gradient(50% 62% at 76% 64%, rgba(209,71,163,0.20), transparent 74%); /* @kind color */


  /* ==========================================================================
     LAYER 2 — SEMANTIC  (meaning-named; THIS is what components use)
     ========================================================================== */

  /* Surfaces & ink */
  --color-bg:            var(--awaqn-black);   /* the page ground (true black) */
  --color-surface:       var(--awaqn-dark);    /* raised surface (cards) */
  --color-surface-glass: rgba(255, 255, 255, 0.03);
  --color-surface-glass-hover: rgba(255, 255, 255, 0.08);

  /* Ink — warmed toward papyrus (modern-mystic, not clinical white) */
  --color-ink:           #F4F2EC;  /* primary text on the void (warm white) */
  --color-ink-muted:     #ADA9A0;  /* secondary text — warm grey (≈7:1) */
  --color-ink-faint:     #73706A;  /* tertiary / metadata (warm) */
  --color-ink-inverse:   var(--awaqn-black); /* text ON an accent fill */

  /* Accent — CYAN small accents/links/words; TEAL large fills (calmer=premium).
     RULE: accent-colored text is ALWAYS bold. */
  --color-accent:        var(--awaqn-cyan);   /* small accents, links, words */
  --color-accent-fill:   var(--awaqn-teal);   /* large fills (primary CTA) */
  --color-accent-fill-deep: var(--awaqn-teal-deep); /* darker teal — StepBadge ring floor */
  --color-accent-strong: var(--awaqn-teal);
  --color-accent-soft:   rgba(0, 242, 254, 0.12);
  --color-accent-weight: var(--weight-bold);  /* accent text is always bold */
  --color-on-accent:     var(--awaqn-black);  /* ink on a teal/cyan fill */

  /* Gold — the PAID-conversion accent (sales pages only). RULE: gold = money
     moment only — buy CTAs, offer band, current-price highlight. Never body
     accents, never links. Teal stays the free-funnel CTA; cyan the scalpel. */
  --color-gold-fill:          var(--awaqn-gold-cta);   /* buy-button fill */
  --color-gold-band:          var(--awaqn-gold-band);  /* offer-bar fill (vertical) */
  --color-on-gold:            #241B02;                 /* ink on gold buttons */
  --color-on-gold-band:       #3A2B06;                 /* band copy */
  --color-on-gold-band-strong:#1A1400;                 /* band strong copy */
  --color-gold-text:          #F1D585;                 /* outline-CTA label on the void */
  --color-gold-label:         #E7C25A;                 /* small bold gold labels */
  --color-gold-border:        rgba(249,224,118,0.55);  /* outline CTA border */
  --color-gold-border-strong: rgba(249,224,118,0.85);  /* … on hover */
  --color-gold-soft:          rgba(249,224,118,0.08);  /* outline-CTA hover fill */
  --color-gold-card-bg:       rgba(249,224,118,0.05);  /* current-price card fill */
  --color-gold-card-border:   rgba(249,224,118,0.3);   /* current-price card border */

  /* Borders & lines */
  --color-border:        rgba(255, 255, 255, 0.10);
  --color-border-strong: rgba(255, 255, 255, 0.18);
  --color-border-faint:  rgba(255, 255, 255, 0.05);

  /* Gradients (semantic aliases) */
  --color-gradient-brand:  var(--awaqn-gradient-spectral); /* RING / fine rules ONLY */
  --color-gradient-accent: var(--awaqn-gradient-accent);   /* cyan→magenta fine rule */
  --color-gradient-word:   var(--awaqn-gradient-cyan);     /* tonal cyan hero word */
  --color-gradient-step:   var(--awaqn-gradient-step);     /* teal numbered-step ring */
  --color-ambient:         var(--awaqn-ambient-glow);      /* signature surface glow */

  /* Feedback */
  --color-success: #22C55E;
  --color-warning: #F5A623;
  --color-danger:  #E5484D;

  /* Selection (matches the app's cyan selection) */
  --selection-bg:  rgba(0, 242, 254, 0.2);
}

::selection { background: var(--selection-bg); }

/* Light "Papyrus" surface — carried for optional light sections. Wrap a region
   in .surface-papyrus to override the semantic surface + ink tokens; the
   component layer needs no change. The funnel renders Void-only by default. */
.surface-papyrus {
  --color-bg:            var(--awaqn-papyrus);
  --color-surface:       #FBFAF6;
  --color-surface-glass: rgba(255, 255, 255, 0.5);
  --color-ink:           #18181B;
  --color-ink-muted:     #4D4D52;
  --color-ink-faint:     #8A8A8F;
  --color-accent:        #4B2E83;  /* app's light-mode primary (deep violet) */
  --color-on-accent:     #FBFAF6;
  --color-border:        rgba(0, 0, 0, 0.10);
  --color-border-faint:  rgba(0, 0, 0, 0.05);
  --glass-fill:          rgba(255, 255, 255, 0.5);
  --glass-border:        rgba(255, 255, 255, 0.7);
  --shadow-glass:        inset 0 1px 1px rgba(255,255,255,0.8), 0 4px 12px rgba(0,0,0,0.06);
}