/* ==========================================================================
   catonmydesk — Design tokens
   --------------------------------------------------------------------------
   Every colour, size and timing used by the site is declared here once.
   Edit this file to re-skin the whole site.

   Identity: warm oat paper, deep teal accent, kraft-brown for the logo
   and anything wooden. Pill-shaped buttons, soft corners, 1.5px borders.

   Structure:
     1. Raw palette      — the actual hex values, named by hue
     2. Type & metrics   — fonts, scale, spacing, radii, motion
     3. Semantic tokens  — light theme (default)
     4. Semantic tokens  — dark theme (system preference + manual override)
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     1. RAW PALETTE
     --------------------------------------------------------------------- */

  /* Oat — the paper the site sits on */
  --sand-50:  #fdfbf6;
  --sand-100: #f7f3ea;
  --sand-200: #efe9db;
  --sand-300: #e4dbc8;
  --sand-400: #d3c7ad;

  /* Bark — warm near-blacks for text on oat */
  --bark-900: #1e1b15;
  --bark-800: #2e2a22;
  --bark-700: #423c31;
  --bark-600: #57503f;
  --bark-500: #6e6557;
  --bark-400: #7d7566;

  /* Dusk — the dark theme's paper */
  --dusk-900: #191917;
  --dusk-800: #1f201d;
  --dusk-700: #272822;
  --dusk-600: #31322b;
  --dusk-500: #3e3f36;
  --dusk-400: #525348;

  /* Chalk — soft light tones for text on dusk */
  --chalk-100: #f2eee3;
  --chalk-200: #e0dacb;
  --chalk-300: #b0a995;
  --chalk-400: #8c8674;

  /* Teal — the accent */
  --teal-700: #0e4a46;
  --teal-600: #125e59;
  --teal-500: #16736c;
  --teal-400: #2e9187;
  --teal-300: #6fc2b4;
  --teal-200: #a8dcd2;
  --teal-100: #dcf0eb;
  --teal-tint-dark: #16302d;

  /* Kraft — the desk. The logo, and anything that wants to feel warm. */
  --kraft-600: #b57b2c;
  --kraft-700: #8a5c1c;   /* dark enough for small text on oat */
  --kraft-500: #c68c4a;
  --kraft-400: #d3a063;
  --kraft-300: #e0b67f;

  /* Status hues */
  --leaf-500: #3d6f49;
  --leaf-300: #86c293;
  --stone-500: #4a626f;
  --stone-300: #9fb6c2;

  /* ---------------------------------------------------------------------
     2. TYPE & METRICS
     --------------------------------------------------------------------- */

  --font-sans:  "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia,
                "Times New Roman", serif;
  --font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
                Menlo, Consolas, monospace;

  /* Fluid type scale — grows with the viewport, never runs away */
  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   clamp(1.1rem,  0.35vw + 1.02rem, 1.28rem);
  --fs-xl:   clamp(1.35rem, 0.9vw  + 1.15rem, 1.7rem);
  --fs-2xl:  clamp(1.7rem,  1.9vw  + 1.2rem,  2.4rem);
  --fs-3xl:  clamp(2.1rem,  3.4vw  + 1.2rem,  3.3rem);
  --fs-4xl:  clamp(2.4rem,  4.6vw  + 1.1rem,  3.9rem);

  --lh-tight: 1.14;
  --lh-snug:  1.32;
  --lh-base:  1.62;
  --lh-loose: 1.72;

  --tracking-tight: -0.015em;
  --tracking-wide:   0.09em;

  /* Spacing scale */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.75rem;
  --sp-8:  3.5rem;
  --sp-9:  5rem;
  --sp-10: 7rem;

  /* Layout */
  --wrap:        1140px;
  --wrap-narrow: 720px;
  --gutter:      clamp(1.15rem, 4vw, 2.25rem);
  --header-h:    68px;

  /* Corners — softer and rounder than a stock template */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   26px;
  --r-full: 999px;

  --hairline: 1.5px;

  /* Motion */
  --ease:   cubic-bezier(0.22, 0.68, 0.24, 1);
  --t-fast: 110ms var(--ease);
  --t-base: 200ms var(--ease);
  --t-slow: 380ms var(--ease);
}

/* ==========================================================================
   3. SEMANTIC TOKENS — LIGHT (default)
   Everything in base/layout/components speaks only in these names.
   ========================================================================== */

:root,
:root[data-theme="light"] {
  color-scheme: light;

  --bg:             var(--sand-100);
  --bg-subtle:      var(--sand-200);
  --bg-sunken:      var(--sand-300);
  --surface:        var(--sand-50);
  --surface-raised: #ffffff;

  --border:        var(--sand-300);
  --border-strong: var(--sand-400);

  --text:        var(--bark-900);
  --text-body:   var(--bark-700);
  --text-muted:  var(--bark-500);
  --text-faint:  var(--bark-400);
  --text-invert: var(--sand-50);

  --accent:           var(--teal-600);
  --accent-hover:     var(--teal-700);
  --accent-active:    var(--teal-700);
  --accent-soft:      var(--teal-100);
  --accent-on:        #ffffff;
  --accent-underline: rgba(18, 94, 89, 0.35);

  --warm:      var(--kraft-600);
  --warm-soft: #f6e7d2;

  --ok:   var(--leaf-500);
  --warn: var(--kraft-700);
  --info: var(--stone-500);

  --shadow-sm: 0 1px 2px rgba(45, 38, 24, 0.05),
               0 1px 1px rgba(45, 38, 24, 0.04);
  --shadow-md: 0 2px 4px rgba(45, 38, 24, 0.05),
               0 10px 22px -10px rgba(45, 38, 24, 0.16);
  --shadow-lg: 0 4px 8px rgba(45, 38, 24, 0.05),
               0 26px 50px -18px rgba(45, 38, 24, 0.22);

  --ring: 0 0 0 3px rgba(46, 145, 135, 0.4);

  --header-bg: rgba(247, 243, 234, 0.84);
  --glow-1: rgba(46, 145, 135, 0.13);
  --glow-2: rgba(211, 160, 99, 0.16);
  --code-bg: var(--sand-200);

  /* Logo — the cat on a desk */
  --logo-cat:      var(--bark-900);
  --logo-desk:     var(--kraft-400);
  --logo-desk-dim: var(--kraft-600);
  --logo-line:     var(--sand-50);
  --logo-frame:    #3b3a34;
  --logo-screen:   #1f2a28;
}

/* ==========================================================================
   4. SEMANTIC TOKENS — DARK
   Applied automatically when the operating system asks for a dark UI,
   and manually when the visitor picks Dark from the theme switch.
   The two blocks below are intentionally identical; they only differ in
   what triggers them.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:             var(--dusk-900);
    --bg-subtle:      var(--dusk-800);
    --bg-sunken:      var(--dusk-700);
    --surface:        var(--dusk-700);
    --surface-raised: var(--dusk-600);

    --border:        var(--dusk-500);
    --border-strong: var(--dusk-400);

    --text:        var(--chalk-100);
    --text-body:   var(--chalk-200);
    --text-muted:  var(--chalk-300);
    --text-faint:  var(--chalk-400);
    --text-invert: var(--dusk-900);

    --accent:           var(--teal-300);
    --accent-hover:     var(--teal-200);
    --accent-active:    var(--teal-200);
    --accent-soft:      var(--teal-tint-dark);
    --accent-on:        var(--dusk-900);
    --accent-underline: rgba(111, 194, 180, 0.4);

    --warm:      var(--kraft-300);
    --warm-soft: #33291c;

    --ok:   var(--leaf-300);
    --warn: var(--kraft-300);
    --info: var(--stone-300);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3),
                 0 10px 22px -10px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3),
                 0 26px 50px -18px rgba(0, 0, 0, 0.65);

    --ring: 0 0 0 3px rgba(111, 194, 180, 0.35);

    --header-bg: rgba(25, 25, 23, 0.84);
    --glow-1: rgba(46, 145, 135, 0.18);
    --glow-2: rgba(181, 123, 44, 0.14);
    --code-bg: var(--dusk-700);

    --logo-cat:      var(--chalk-100);
    --logo-desk:     var(--kraft-500);
    --logo-desk-dim: var(--kraft-700);
    --logo-line:     var(--dusk-900);
    --logo-frame:    #5a584e;
    --logo-screen:   #11100e;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:             var(--dusk-900);
  --bg-subtle:      var(--dusk-800);
  --bg-sunken:      var(--dusk-700);
  --surface:        var(--dusk-700);
  --surface-raised: var(--dusk-600);

  --border:        var(--dusk-500);
  --border-strong: var(--dusk-400);

  --text:        var(--chalk-100);
  --text-body:   var(--chalk-200);
  --text-muted:  var(--chalk-300);
  --text-faint:  var(--chalk-400);
  --text-invert: var(--dusk-900);

  --accent:           var(--teal-300);
  --accent-hover:     var(--teal-200);
  --accent-active:    var(--teal-200);
  --accent-soft:      var(--teal-tint-dark);
  --accent-on:        var(--dusk-900);
  --accent-underline: rgba(111, 194, 180, 0.4);

  --warm:      var(--kraft-300);
  --warm-soft: #33291c;

  --ok:   var(--leaf-300);
  --warn: var(--kraft-300);
  --info: var(--stone-300);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3),
               0 10px 22px -10px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3),
               0 26px 50px -18px rgba(0, 0, 0, 0.65);

  --ring: 0 0 0 3px rgba(111, 194, 180, 0.35);

  --header-bg: rgba(25, 25, 23, 0.84);
  --glow-1: rgba(46, 145, 135, 0.18);
  --glow-2: rgba(181, 123, 44, 0.14);
  --code-bg: var(--dusk-700);

  --logo-cat:      var(--chalk-100);
  --logo-desk:     var(--kraft-500);
  --logo-desk-dim: var(--kraft-700);
  --logo-line:     var(--dusk-900);
  --logo-frame:    #5a584e;
  --logo-screen:   #11100e;
}