/* ==========================================================================
   TOKENS.CSS — the mini design system. THIS IS THE FILE YOU EDIT.
   --------------------------------------------------------------------------
   THEME: "Snow Leopard, but make it earthy" — light warm aluminum chrome,
   espresso text, camel/khaki/olive moods, ONE navy doing the accent work.
   · Change --primary (ONE hex) → every shade/tint re-derives via color-mix().
   · Swap fonts via the two --font-* lines + the <link> in index.html.
   ========================================================================== */

:root {

  /* ---- 1. BRAND SEEDS — edit these ------------------------------------- */

  --primary: #1E3A5F;         /* THE navy. Links, active states, CTA. */
  --ink:     #2E241C;         /* Espresso — all reading text */
  --accent:  #6B7F3A;         /* Olive — highlights, success, awards */

  /* Earthy family (wallpapers, tints, illustration-adjacent) */
  --camel:    #C8AE8A;
  --khaki:    #B5AC93;
  --espresso: #4A382C;
  --olive:    #7A7C52;

  --wallpaper: #D8CBB4;       /* default desktop mood — warm sand (textured
                                 speckle is applied in main.css on top) */

  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'SF Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;

  /* ---- 2. DERIVED PRIMARY SCALE — follows --primary, don't edit -------- */

  --primary-950: color-mix(in oklab, var(--primary) 40%, #10131A);
  --primary-900: color-mix(in oklab, var(--primary) 65%, #10131A);
  --primary-800: color-mix(in oklab, var(--primary) 85%, #10131A);
  --primary-700: color-mix(in oklab, var(--primary) 95%, #10131A);
  --primary-600: var(--primary);
  --primary-500: color-mix(in oklab, var(--primary) 85%, white);
  --primary-400: color-mix(in oklab, var(--primary) 70%, white);
  --primary-300: color-mix(in oklab, var(--primary) 50%, white);
  --primary-200: color-mix(in oklab, var(--primary) 30%, white);
  --primary-100: color-mix(in oklab, var(--primary) 14%, white);
  --primary-050: color-mix(in oklab, var(--primary) 6%,  white);

  --accent-strong: color-mix(in oklab, var(--accent) 75%, var(--ink));
  --accent-soft:   color-mix(in oklab, var(--accent) 16%, white);

  /* ---- 3. SEMANTIC COLORS ---------------------------------------------- */

  --success: var(--accent);
  --warning: #C98A2B;
  --danger:  #B5432F;
  --info:    var(--primary-500);

  /* ---- 4. CHROME & SURFACES (Snow Leopard: light warm aluminum) -------- */

  --os-chrome:      color-mix(in srgb, #F7F4EE 84%, transparent);
  --os-chrome-edge: color-mix(in oklab, var(--espresso) 22%, transparent);
  --os-text:        var(--ink);

  --win-bar-hi:   #F2EFE9;    /* title bar gradient, top */
  --win-bar-lo:   #D9D3C8;    /* title bar gradient, bottom */
  --win-bar-text: color-mix(in oklab, var(--ink) 80%, var(--espresso));

  --win-surface:   #FBF9F5;                                  /* document pane */
  --win-surface-2: color-mix(in oklab, var(--khaki) 22%, white); /* sidebars  */

  --text:       var(--ink);
  --text-soft:  color-mix(in oklab, var(--ink) 64%, white);
  --text-faint: color-mix(in oklab, var(--ink) 42%, white);
  --link:       var(--primary-600);

  /* ---- 5. TRAFFIC LIGHTS ------------------------------------------------ */

  --light-close: #FF5F57;
  --light-min:   #FEBC2E;
  --light-max:   #28C840;

  /* ---- 6. GEOMETRY & DEPTH ---------------------------------------------- */

  --radius-window: 10px;
  --radius-card:   9px;
  --radius-icon:   14px;

  --shadow-window:       0 14px 40px rgba(46,36,28,.30), 0 2px 7px rgba(46,36,28,.20);
  --shadow-window-focus: 0 24px 70px rgba(46,36,28,.40), 0 3px 9px rgba(46,36,28,.24);
  --shadow-menu:         0 10px 30px rgba(46,36,28,.28);

  --menubar-h: 40px;

  /* ---- 7. TYPE SCALE ----------------------------------------------------- */

  --fs-xs: 11px;  --fs-sm: 12.5px;  --fs-base: 14.5px;
  --fs-md: 16px;  --fs-lg: 19px;    --fs-xl: 26px;  --fs-hero: 34px;

  /* ---- 8. MOTION --------------------------------------------------------- */

  --ease-out: cubic-bezier(.22,1,.36,1);
  --t-fast: 140ms; --t-med: 240ms;
}