/*
 * tokens.css
 * Single source of truth for all color values.
 *
 * Layer 1 — Global palette (Adobe Spectrum scale)
 *   Raw hex values only. Never reference these directly in UI code.
 *   Naming: --spectrum-[hue]-[step]
 *
 * Layer 2 — Semantic alias tokens
 *   Map meaning to palette values. Always use these in HTML/CSS.
 *   Naming: --color-[role]-[variant]
 *
 * To change a color: edit Layer 1 only.
 * To change what a color means: edit Layer 2 only.
 * Never add raw hex values outside this file.
 */


/* ─── Layer 1: Global palette ─────────────────────────────────────────────── */

:root {

  /* Blue */
  --spectrum-blue-100: #e9f2ff;
  --spectrum-blue-200: #cce0ff;
  --spectrum-blue-400: #4c9aff;
  --spectrum-blue-600: #0065ff;
  --spectrum-blue-700: #0052cc;
  --spectrum-blue-900: #003884;

  /* Teal */
  --spectrum-teal-100: #e6fcff;
  --spectrum-teal-200: #b3f5ff;
  --spectrum-teal-400: #00b8d9;
  --spectrum-teal-600: #008da6;
  --spectrum-teal-900: #004f5e;

  /* Green */
  --spectrum-green-100: #e3fcef;
  --spectrum-green-200: #abf5d1;
  --spectrum-green-400: #36b37e;
  --spectrum-green-600: #006644;
  --spectrum-green-900: #003d1f;

  /* Red */
  --spectrum-red-100: #ffebe6;
  --spectrum-red-200: #ffbdad;
  --spectrum-red-400: #ff5630;
  --spectrum-red-600: #bf2600;
  --spectrum-red-900: #6e1600;

  /* Yellow */
  --spectrum-yellow-100: #fffae6;
  --spectrum-yellow-200: #fff0b3;
  --spectrum-yellow-400: #ffc400;
  --spectrum-yellow-600: #ff8b00;
  --spectrum-yellow-900: #7a3100;

  /* Purple */
  --spectrum-purple-100: #eae6ff;
  --spectrum-purple-200: #c0b6f2;
  --spectrum-purple-400: #6554c0;
  --spectrum-purple-600: #403294;
  --spectrum-purple-900: #1b0057;

  /* Neutral */
  --spectrum-neutral-0:   #ffffff;
  --spectrum-neutral-100: #f4f5f7;
  --spectrum-neutral-200: #ebecf0;
  --spectrum-neutral-300: #dfe1e6;
  --spectrum-neutral-400: #c1c7d0;
  --spectrum-neutral-500: #b3bac5;
  --spectrum-neutral-600: #97a0af;
  --spectrum-neutral-700: #7a869a;
  --spectrum-neutral-800: #505f79;
  --spectrum-neutral-900: #344563;
  --spectrum-neutral-1000: #172b4d;
  --spectrum-neutral-1100: #091e42;


  /* ─── Layer 2: Semantic alias tokens ─────────────────────────────────────── */

  /* Text */
  --color-text-primary:      var(--spectrum-neutral-1100);
  --color-text-secondary:    var(--spectrum-neutral-800);
  --color-text-subtle:       var(--spectrum-neutral-600);
  --color-text-disabled:     var(--spectrum-neutral-500);
  --color-text-inverse:      var(--spectrum-neutral-0);
  --color-text-link:         var(--spectrum-blue-600);
  --color-text-link-hover:   var(--spectrum-blue-700);

  /* Backgrounds */
  --color-bg-page:           var(--spectrum-neutral-100);
  --color-bg-surface:        var(--spectrum-neutral-0);
  --color-bg-sunken:         var(--spectrum-neutral-200);
  --color-bg-overlay:        var(--spectrum-neutral-1100);
  --color-bg-site-title-panel: color-mix(in srgb, var(--spectrum-neutral-0) 80%, transparent);

  /* Interactive */
  --color-interactive-primary:         var(--spectrum-blue-600);
  --color-interactive-primary-hover:   var(--spectrum-blue-700);
  --color-interactive-primary-text:    var(--spectrum-neutral-0);
  --color-interactive-secondary:       var(--spectrum-neutral-200);
  --color-interactive-secondary-hover: var(--spectrum-neutral-300);
  --color-interactive-secondary-text:  var(--spectrum-neutral-1000);

  /* Borders */
  --color-border-default:    var(--spectrum-neutral-300);
  --color-border-strong:     var(--spectrum-neutral-500);
  --color-border-focus:      var(--spectrum-blue-600);
  --color-border-white:      var(--spectrum-neutral-0);
  --color-border-site-title-panel: var(--spectrum-neutral-0);

  /* Status — informational */
  --color-info-bg:           var(--spectrum-blue-100);
  --color-info-text:         var(--spectrum-blue-900);
  --color-info-border:       var(--spectrum-blue-200);
  --color-info-icon:         var(--spectrum-blue-600);

  /* Status — success */
  --color-success-bg:        var(--spectrum-green-100);
  --color-success-text:      var(--spectrum-green-900);
  --color-success-border:    var(--spectrum-green-200);
  --color-success-icon:      var(--spectrum-green-600);

  /* Status — warning */
  --color-warning-bg:        var(--spectrum-yellow-100);
  --color-warning-text:      var(--spectrum-yellow-900);
  --color-warning-border:    var(--spectrum-yellow-200);
  --color-warning-icon:      var(--spectrum-yellow-600);

  /* Status — danger/error */
  --color-danger-bg:         var(--spectrum-red-100);
  --color-danger-text:       var(--spectrum-red-900);
  --color-danger-border:     var(--spectrum-red-200);
  --color-danger-icon:       var(--spectrum-red-400);

  /* Assets — image URLs only (paths relative to this file) */
  --asset-bg-page-tile: url('../images/z4k-background.webp');


  /* ─── Typography ─────────────────────────────────────────────────────────── */

  --font-family-base:       system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-heading:    'Merriweather', Georgia, 'Times New Roman', serif;
  --font-family-mono:       ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --font-size-xs:           0.75rem;
  --font-size-sm:           0.875rem;
  --font-size-md:           1rem;
  --font-size-lg:           1.125rem;
  --font-size-xl:           1.25rem;
  --font-size-2xl:          1.5rem;
  --font-size-3xl:          1.875rem;
  --font-size-4xl:          2.25rem;

  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-bold:       700;

  --line-height-tight:      1.25;
  --line-height-snug:       1.4;
  --line-height-normal:     1.6;
  --line-height-relaxed:    1.75;

  --letter-spacing-tight:   -0.02em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.04em;

  /* Inline optical alignment: shift glyphs toward cap/x-height vs. surrounding letters (font-dependent) */
  --font-optical-nudge-y:   0.06em;


  /* ─── Spacing scale ──────────────────────────────────────────────────────── */
  /* Base unit: 4px. */

  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;


  /* ─── Border radius ──────────────────────────────────────────────────────── */

  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-full:  9999px;


  /* ─── Breakpoints ────────────────────────────────────────────────────────── */
  /* Reference only — use in media queries, not var() calls.               */
  /* mobile:  390px  (default, no query needed — mobile first)             */
  /* tablet:  768px  @media (min-width: 768px)                             */
  /* desktop: 1440px @media (min-width: 1440px)                            */
  /* wide:    1920px @media (min-width: 1920px)                            */

  --breakpoint-tablet:   768px;
  --breakpoint-desktop:  1440px;
  --breakpoint-wide:     1920px;

  /* Max content widths */
  --max-width-text:      680px;   /* prose, single-column content */
  --max-width-content:   1200px;  /* main content area */
  --max-width-wide:      1600px;  /* full-bleed sections */
  --max-width-panel:     14rem;   /* compact panels, callouts, glass tiles (~70% of 20rem) */

  /* Layout gutters */
  --gutter-mobile:   var(--space-4);   /* 16px */
  --gutter-tablet:   var(--space-8);   /* 32px */
  --gutter-desktop:  var(--space-12);  /* 48px */
  --gutter-wide:     var(--space-16);  /* 64px */

  /* ─── Dark mode overrides ─────────────────────────────────────────────────── */
  /* Repoint alias tokens only — never change the global palette. */

}

@media (prefers-color-scheme: dark) {
  :root {
    /* Text */
    --color-text-primary:    var(--spectrum-neutral-0);
    --color-text-secondary:  var(--spectrum-neutral-400);
    --color-text-subtle:     var(--spectrum-neutral-600);
    --color-text-disabled:   var(--spectrum-neutral-700);
    --color-text-inverse:    var(--spectrum-neutral-1100);
    --color-text-link:       var(--spectrum-blue-400);
    --color-text-link-hover: var(--spectrum-blue-200);

    /* Backgrounds */
    --color-bg-page:         var(--spectrum-neutral-1100);
    --color-bg-surface:      var(--spectrum-neutral-1000);
    --color-bg-sunken:       var(--spectrum-neutral-1100);
    --color-bg-site-title-panel: color-mix(in srgb, var(--spectrum-neutral-1000) 80%, transparent);

    /* Interactive */
    --color-interactive-primary:         var(--spectrum-blue-400);
    --color-interactive-primary-hover:   var(--spectrum-blue-200);
    --color-interactive-primary-text:    var(--spectrum-neutral-1100);
    --color-interactive-secondary:       var(--spectrum-neutral-900);
    --color-interactive-secondary-hover: var(--spectrum-neutral-800);
    --color-interactive-secondary-text:  var(--spectrum-neutral-0);

    /* Borders */
    --color-border-default:  var(--spectrum-neutral-800);
    --color-border-strong:   var(--spectrum-neutral-600);
    --color-border-focus:    var(--spectrum-blue-400);
    --color-border-site-title-panel: color-mix(in srgb, var(--spectrum-neutral-0) 30%, transparent);

    /* Status */
    --color-info-bg:         var(--spectrum-blue-900);
    --color-info-text:       var(--spectrum-blue-200);
    --color-info-border:     var(--spectrum-blue-700);

    --color-success-bg:      var(--spectrum-green-900);
    --color-success-text:    var(--spectrum-green-200);
    --color-success-border:  var(--spectrum-green-600);

    --color-warning-bg:      var(--spectrum-yellow-900);
    --color-warning-text:    var(--spectrum-yellow-200);
    --color-warning-border:  var(--spectrum-yellow-600);

    --color-danger-bg:       var(--spectrum-red-900);
    --color-danger-text:     var(--spectrum-red-200);
    --color-danger-border:   var(--spectrum-red-600);
  }
}