/* ==========================================================================
   Compresso — Color tokens
   Base palette ramps + semantic aliases. Light is the default (:root); dark
   overrides live in [data-theme="dark"]. OS preference is applied at runtime by
   an init script that sets data-theme (see readme → "Theming").
   ========================================================================== */

:root {
  /* ---- Brand: Teal / Aqua (primary) --------------------------------- */
  --teal-50:  #EAFAF8;
  --teal-100: #CBF3EF;
  --teal-200: #99E7E0;
  --teal-300: #5CD6CC;
  --teal-400: #26C2B9;
  --teal-500: #0FB5AE;   /* primary accent */
  --teal-600: #0EA5A5;   /* hover / secondary accent */
  --teal-700: #0C8382;
  --teal-800: #0C6867;
  --teal-900: #0B5453;
  --teal-950: #063534;

  /* ---- Document-layer accents (playful multicolor) ------------------ */
  --coral-400:  #FF8D6B;
  --coral-500:  #FB7452;
  --coral-600:  #E85B3A;
  --amber-400:  #FFC96B;
  --amber-500:  #F7B733;
  --amber-600:  #E39A0F;
  --blue-400:   #6EA8FA;
  --blue-500:   #4E8FE8;
  --blue-600:   #2F73D6;
  --violet-400: #A48CF5;
  --violet-500: #8B6EF0;
  --violet-600: #7355E0;

  /* Soft color tints — used behind colored icons / chips (light) */
  --tint-teal:   #E2F6F4;
  --tint-coral:  #FFEDE7;
  --tint-amber:  #FEF3DC;
  --tint-blue:   #E8F1FE;
  --tint-violet: #EFEAFC;

  /* ---- Neutrals: Slate (pairs with #F8FAFC page bg) ----------------- */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;
  --slate-950: #020617;

  /* ---- Status ------------------------------------------------------- */
  --green-500:  #16A34A;
  --green-tint: #E4F6EB;
  --amber-status: #F59E0B;   /* battery / thermal warnings */
  --amber-status-tint: #FEF1DA;
  --red-500:    #EF4444;
  --red-tint:   #FDE7E7;

  /* =====================================================================
     SEMANTIC ALIASES — Light theme (default)
     Always style components against these, never the raw ramp above.
     ===================================================================== */
  --color-bg:            var(--slate-50);   /* page background */
  --color-bg-subtle:     #EEF3F8;           /* alternating section bg */
  --color-surface:       #FFFFFF;           /* card / raised surface */
  --color-surface-2:     #F7FAFC;           /* nested / inset surface */
  --color-surface-inset: #EFF4F9;           /* wells, tracks, code */
  --color-overlay:       rgba(15, 23, 42, 0.45); /* modal scrim */
  --color-glass:         rgba(255, 255, 255, 0.72); /* nav glassmorphism */

  --color-text:           var(--slate-900);
  --color-text-secondary: var(--slate-600);
  --color-text-muted:     var(--slate-400);
  --color-text-on-accent: #FFFFFF;

  --color-border:        #E7ECF3;
  --color-border-strong: var(--slate-300);
  --color-divider:       #EDF1F6;

  --color-accent:        var(--teal-500);
  --color-accent-hover:  var(--teal-600);
  --color-accent-active: var(--teal-700);
  --color-accent-soft:   var(--tint-teal);
  --color-on-accent:     #FFFFFF;
  --color-ring:          rgba(15, 181, 174, 0.45);

  --color-success:       var(--green-500);
  --color-success-soft:  var(--green-tint);
  --color-warning:       var(--amber-status);
  --color-warning-soft:  var(--amber-status-tint);
  --color-danger:        var(--red-500);
  --color-danger-soft:   var(--red-tint);

  /* Hero glow blobs (drifting radial gradients) */
  --glow-teal:   rgba(15, 181, 174, 0.42);
  --glow-blue:   rgba(78, 143, 232, 0.32);
  --glow-coral:  rgba(251, 116, 82, 0.28);
  --glow-violet: rgba(139, 110, 240, 0.26);

  /* Signature brand gradient (document layers) */
  --gradient-brand: linear-gradient(120deg, var(--teal-500) 0%, var(--blue-500) 42%, var(--violet-500) 100%);
  --gradient-warm:  linear-gradient(120deg, var(--amber-500) 0%, var(--coral-500) 100%);
  --gradient-accent-stripe: linear-gradient(90deg, var(--teal-500), var(--blue-500), var(--violet-500), var(--coral-500), var(--amber-500));

  color-scheme: light;
}

/* =======================================================================
   SEMANTIC ALIASES — Dark theme
   Deep desaturated navy-slate; teal brightened slightly to hold contrast.
   ======================================================================= */
:root[data-theme="dark"] {
  --tint-teal:   rgba(15, 181, 174, 0.16);
  --tint-coral:  rgba(251, 116, 82, 0.18);
  --tint-amber:  rgba(247, 183, 51, 0.18);
  --tint-blue:   rgba(78, 143, 232, 0.18);
  --tint-violet: rgba(139, 110, 240, 0.18);

  --green-tint:  rgba(22, 163, 74, 0.18);
  --amber-status-tint: rgba(245, 158, 11, 0.18);
  --red-tint:    rgba(239, 68, 68, 0.18);

  --color-bg:            #0A0F1C;
  --color-bg-subtle:     #0D1424;
  --color-surface:       #131C2E;
  --color-surface-2:     #0F1728;
  --color-surface-inset: #0C1322;
  --color-overlay:       rgba(2, 6, 23, 0.6);
  --color-glass:         rgba(16, 23, 40, 0.72);

  --color-text:           #F1F5F9;
  --color-text-secondary: #A7B4C7;
  --color-text-muted:     #6C7B93;
  --color-text-on-accent: #04201F;

  --color-border:        rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.16);
  --color-divider:       rgba(255, 255, 255, 0.06);

  --color-accent:        #23C3BB;
  --color-accent-hover:  #37D1C9;
  --color-accent-active: #12A79F;
  --color-accent-soft:   rgba(35, 195, 187, 0.15);
  --color-on-accent:     #04201F;
  --color-ring:          rgba(55, 209, 201, 0.5);

  --glow-teal:   rgba(35, 195, 187, 0.34);
  --glow-blue:   rgba(78, 143, 232, 0.28);
  --glow-coral:  rgba(251, 116, 82, 0.22);
  --glow-violet: rgba(139, 110, 240, 0.24);

  color-scheme: dark;
}

/* OS preference is respected at runtime by setting data-theme on <html> from a
   tiny init script (reads localStorage → prefers-color-scheme). See readme →
   "Theming". We intentionally do NOT duplicate the dark values in a
   @media (prefers-color-scheme) block so the token catalog stays single-source. */