/* ============================================================
   COLORS — Parks Genie
   Two layers:
   1. BRAND + RAW SCALES  (fixed hex, theme-independent)
   2. SEMANTIC ALIASES    (resolve per theme: :root = light,
      [data-theme="dark"] = dark)
   The signal system is the heart of the brand — read readme.md.
   ============================================================ */

:root {
  /* ---------------------------------------------------------
     1 · BRAND — the wish-granting lamp: royal blue + genie gold
     --------------------------------------------------------- */
  --pg-blue:        #1A6BE8;   /* primary brand royal blue        */
  --pg-blue-bg:     #1357C9;   /* splash / immersive field        */
  --pg-blue-deep:   #0E2C73;   /* deepest navy — text on gold     */
  --pg-gold:        #F7A823;   /* genie gold — the magic accent   */
  --pg-gold-hi:     #FFC24B;   /* gold highlight / button top     */
  --pg-cyan:        #36BFEF;   /* lamp-smoke cyan — sparing use    */

  /* ---------------------------------------------------------
     1b · RAW SIGNAL SCALES — light + dark variants of each hue.
     Semantic tokens below pick the right one per theme.
     --------------------------------------------------------- */
  --blue-600:   #1F6FE0;  --blue-400:   #4AA3FF;   /* LIVE / redeemable   */
  --amber-600:  #E08A0B;  --amber-400:  #FCB23E;   /* SEARCHING (Genie)   */
  --orange-600: #E8730C;  --orange-400: #FF9533;   /* PEAK / rising       */
  --green-600:  #1FA85F;  --green-400:  #34D17F;   /* GO / done / low     */
  --red-600:    #E5333A;  --red-400:    #FF5A5F;   /* FAILED / destructive*/
  --violet-600: #6D4AE0;  --violet-400: #A78BFF;   /* GENIE suggestion    */
  --gray-600:   #8A8F9A;  --gray-400:   #9AA0AB;   /* NEUTRAL / committed */
  --teal-600:   #0C9C8B;  --teal-400:   #2BD4C0;   /* value / savings     */

  /* return-window timeline — one blue family, grace = faded blue */
  --early-600: #6FA3EC;  --early-400: #8FC4FF;
  --core-600:  #1F6FE0;  --core-400:  #4AA3FF;
  --grace-600: #A6C6F2;  --grace-400: #7FB2EC;

  /* =========================================================
     2 · SEMANTIC — LIGHT (default)
     ========================================================= */
  /* surfaces */
  --pg-bg:          #F2F2F7;   /* app canvas              */
  --pg-surface:     #FFFFFF;   /* cards, sheets           */
  --pg-surface-2:   #F1F4FB;   /* inset fields, wells     */
  --pg-hairline:    rgba(0,0,0,.08);
  --pg-scrim:       rgba(8,12,24,.42);   /* sheet backdrop */

  /* text — three-step ink hierarchy */
  --pg-text:        #14161C;   /* primary headings / values */
  --pg-text-2:      #6B7280;   /* secondary / supporting    */
  --pg-text-3:      #9AA0AB;   /* tertiary / labels / hints */

  /* signals (resolve to the 600 = stronger-on-light scale) */
  --signal-live:    var(--blue-600);
  --signal-search:  var(--amber-600);
  --signal-peak:    var(--orange-600);
  --signal-go:      var(--green-600);
  --signal-alert:   var(--red-600);
  --signal-neutral: var(--gray-600);
  --genie:          var(--violet-600);
  --value:          var(--teal-600);

  --win-early: var(--early-600);
  --win-core:  var(--core-600);
  --win-grace: var(--grace-600);

  /* tab-bar chrome (translucent) */
  --pg-tabbar:      rgba(248,248,251,.82);
  --pg-tabbar-line: rgba(0,0,0,.07);

  color-scheme: light;
}

/* =========================================================
   2 · SEMANTIC — DARK (true-black for OLED lock-screen parity)
   Signals shift to the brighter 400 scale so they hold on black.
   ========================================================= */
[data-theme="dark"] {
  --pg-bg:          #000000;
  --pg-surface:     #16181D;
  --pg-surface-2:   #1F2229;
  --pg-hairline:    rgba(255,255,255,.09);
  --pg-scrim:       rgba(0,0,0,.6);

  --pg-text:        #F2F3F6;
  --pg-text-2:      #969CAB;
  --pg-text-3:      #6B7280;

  --signal-live:    var(--blue-400);
  --signal-search:  var(--amber-400);
  --signal-peak:    var(--orange-400);
  --signal-go:      var(--green-400);
  --signal-alert:   var(--red-400);
  --signal-neutral: var(--gray-400);
  --genie:          var(--violet-400);
  --value:          var(--teal-400);

  --win-early: var(--early-400);
  --win-core:  var(--core-400);
  --win-grace: var(--grace-400);

  --pg-tabbar:      rgba(18,19,24,.8);
  --pg-tabbar-line: rgba(255,255,255,.08);

  color-scheme: dark;
}