/* ============================================================
   銀星創意 — Color tokens
   深空海軍 Navy × 暗琥珀金 Amber-Gold × 銀星灰 Silver neutrals
   ------------------------------------------------------------
   WCAG 2.1 AA is a hard requirement of this system:
     · normal text ≥ 4.5:1 against its surface
     · large text / icons / UI graphics ≥ 3:1
     · gold surfaces ALWAYS carry dark ink (--sys-on-accent) —
       white on #C9861A is only 3:1 and is forbidden for labels.
   Contrast notes below are measured against white (light mode).
   Layers:
     --ref-*  raw palette (never use directly in UI)
     --sys-*  semantic aliases (mode- & theme-aware)
     --c-*    short everyday aliases
   Dark / luxe modes + accent themes live in themes.css.
   ============================================================ */

:root {
  /* ---- Reference : Silver neutrals (cool, slightly blue) ---- */
  --ref-silver-0:   #0F1B2C;  /* strongest text · 15.9:1 */
  --ref-silver-10:  #22314A;  /* headings · 11.7:1 */
  --ref-silver-20:  #3D4C63;  /* body · 8.2:1 */
  --ref-silver-30:  #5D6E88;  /* muted text & icons · 4.9:1 AA ✓ */
  --ref-silver-40:  #66768F;  /* placeholder · 4.5:1 AA ✓ */
  --ref-silver-50:  #7E8EA5;  /* input borders · 3.2:1 non-text ✓ */
  --ref-silver-60:  #D9E0E9;  /* decorative borders */
  --ref-silver-65:  #E7EBF1;  /* hairlines, dividers */
  --ref-silver-70:  #F1F4F8;  /* row hover / sunken chips */
  --ref-silver-80:  #F4F6FA;  /* app background */
  --ref-silver-90:  #F8FAFC;  /* spec / sunken surface */
  --ref-silver-100: #FFFFFF;

  /* ---- Reference : Deep-space navy ---- */
  --ref-navy-900: #0B1930;   /* night sky, gradients, dark shell */
  --ref-navy-800: #10243E;   /* PRIMARY · white on it = 13.9:1 ✓ */
  --ref-navy-700: #1B3A5E;   /* primary hover */
  --ref-navy-500: #2E5E8F;   /* 星圖藍 links/info/charts · 6.6:1 ✓ */
  --ref-navy-300: #8FAECE;   /* chart light / dark-mode lines */
  --ref-navy-tint:#ECF1F8;   /* navy tonal fill */

  /* ---- Reference : Amber-gold (暗琥珀金) ---- */
  --ref-gold-700: #7D5606;   /* text on gold tint · 5.4:1 ✓ */
  --ref-gold-600: #9C6B0A;   /* accent TEXT on white · 4.6:1 AA ✓ */
  --ref-gold-550: #B4740F;   /* borders/graphics/focus · 3.9:1 ✓ */
  --ref-gold-500: #C9861A;   /* SOLID fills & logo — dark ink only */
  --ref-gold-400: #D89A2B;   /* solid hover */
  --ref-gold-300: #E0A33B;   /* dark-mode accent */
  --ref-gold-200: #E4B95B;   /* champagne, charts */
  --ref-gold-tint:#FAF0D9;   /* gold tonal fill */
  --ref-gold-ink: #241703;   /* ink on gold · 6.4:1 on gold-500 ✓ */

  /* ---- Reference : Status (AA text + pale fill pairs) ---- */
  --ref-info-30:    #1868C6;  /* 6.1:1 ✓ vivid info blue */
  --ref-info-70:    #E7F1FD;
  --ref-success-30: #12805C;  /* 5.6:1 ✓ emerald */
  --ref-success-70: #E3F6EE;
  --ref-warning-30: #A04F00;  /* 5.0:1 ✓ (oranger than brand gold) */
  --ref-warning-70: #FCEFE0;
  --ref-error-30:   #D53A3A;  /* 4.7:1 ✓ */
  --ref-error-70:   #FCE9E9;

  /* ---- Brand gradient stops (night-sky) ---- */
  --ref-gradient-a: #0B1930;
  --ref-gradient-b: #1B3A5E;
  --ref-gradient-c: #C9861A;

  /* ---- Opacity overlays ---- */
  --ref-opacity-black-30: rgba(15, 27, 44, 0.30);
  --ref-opacity-gold-15:  rgba(201, 134, 26, 0.15);
  --ref-opacity-gold-25:  rgba(201, 134, 26, 0.25);
  --ref-opacity-white-20: rgba(255, 255, 255, 0.20);
  --ref-opacity-white-40: rgba(255, 255, 255, 0.40);
  --ref-opacity-white-80: rgba(255, 255, 255, 0.80);
  /* legacy alias kept for compatibility */
  --ref-opacity-blue-10:  rgba(16, 36, 62, 0.10);
  --ref-opacity-blue-20:  rgba(201, 134, 26, 0.25);

  /* =========================================================
     System (semantic) aliases — light mode defaults
     ========================================================= */
  /* Primary action = navy (white text ✓) */
  --sys-primary:      var(--ref-navy-800);
  --sys-primary-mid:  var(--ref-navy-700);
  --sys-primary-tint: var(--ref-navy-tint);
  --sys-on-primary:   var(--ref-silver-100);

  /* Accent = amber-gold.
     secondary       → accent text / outlined labels (AA 4.6:1)
     secondary-deep  → text on gold tint, pressed text
     secondary-teal  → champagne fill (legacy name kept)        */
  --sys-secondary:      var(--ref-gold-600);
  --sys-secondary-deep: var(--ref-gold-700);
  --sys-secondary-teal: var(--ref-gold-200);
  --sys-tonal:          var(--ref-gold-tint);

  /* Gold solids — ALWAYS pair with --sys-on-accent ink */
  --sys-accent-solid:        var(--ref-gold-500);
  --sys-accent-solid-hover:  var(--ref-gold-400);
  --sys-accent-solid-active: #D08F1F;
  --sys-on-accent:           var(--ref-gold-ink);
  --sys-accent-strong:       var(--ref-gold-550); /* graphics/focus */
  /* Gold CTA — DEEP gold so white label passes AA (4.6:1 at top stop) */
  --sys-gold-gradient: linear-gradient(180deg, #9C6B0A, #845905); /* @kind color */
  --sys-on-gold: #FFFFFF;

  --sys-link:       var(--ref-navy-500);
  --sys-link-hover: var(--ref-navy-800);

  --sys-gradient-a: var(--ref-gradient-a);
  --sys-gradient-b: var(--ref-gradient-b);
  --sys-gradient-c: var(--ref-gradient-c);
  --sys-brand-gradient: linear-gradient(135deg, var(--sys-gradient-a) 0%, var(--sys-gradient-b) 62%, var(--sys-gradient-c) 130%);

  /* Text */
  --sys-text-strong: var(--ref-silver-0);
  --sys-text:        var(--ref-silver-10);
  --sys-text-body:   var(--ref-silver-20);
  --sys-text-muted:  var(--ref-silver-30);
  --sys-text-faint:  var(--ref-silver-40);
  --sys-text-onfill: var(--ref-silver-100);
  --sys-icon:        var(--ref-silver-30);

  /* Surfaces */
  --sys-surface-app:    var(--ref-silver-80);
  --sys-surface-card:   var(--ref-silver-100);
  --sys-surface-sunken: var(--ref-silver-90);
  --sys-surface-row:    var(--ref-silver-70);
  /* Dark chrome (sidebar / night panels) — constant across light/dark */
  --sys-shell:        var(--ref-navy-800);
  --sys-shell-deep:   var(--ref-navy-900);
  --sys-on-shell:     #FFFFFF;
  --sys-on-shell-muted: #98ACC7;  /* 5.6:1 on navy-800 ✓ */
  --sys-shell-line:   rgba(255, 255, 255, 0.10);
  --sys-shell-hover:  rgba(255, 255, 255, 0.07);
  --sys-shell-active: rgba(255, 255, 255, 0.12);

  /* Lines */
  --sys-border:        var(--ref-silver-65);
  --sys-border-strong: var(--ref-silver-50);  /* form fields ≥3:1 ✓ */

  /* Status — dark = text/icon, light = fill */
  --sys-info:         var(--ref-info-30);
  --sys-info-fill:    var(--ref-info-70);
  --sys-success:      var(--ref-success-30);
  --sys-success-fill: var(--ref-success-70);
  --sys-warning:      var(--ref-warning-30);
  --sys-warning-fill: var(--ref-warning-70);
  --sys-error:        var(--ref-error-30);
  --sys-error-fill:   var(--ref-error-70);
  /* ink on SOLID status/primary fills (dark ink in dark mode,
     where those fills brighten) */
  --sys-on-status:    #FFFFFF;

  /* =========================================================
     Short convenience aliases
     ========================================================= */
  --c-primary: var(--sys-primary);
  --c-accent:  var(--sys-secondary);
  --c-gold:    var(--sys-accent-solid);
  --c-text:    var(--sys-text);
  --c-body:    var(--sys-text-body);
  --c-muted:   var(--sys-text-muted);
  --c-bg:      var(--sys-surface-app);
  --c-card:    var(--sys-surface-card);
  --c-border:  var(--sys-border);
  --c-link:    var(--sys-link);

  color-scheme: light;
}