/* ===========================================================================
   DESIGN TOKENS — michaelwales.com
   Custom-property definitions from the michael-wales-design system. Loaded ONLY
   on design-system surfaces (the /projects/ pages), never site-wide — existing
   pages download none of this. Concatenated from the system's tokens/*.css
   EXCEPT fonts.css: fonts stay on the site's existing async Typekit embed
   (use.typekit.net/byn8skt.css) rather than the system's render-blocking
   @import, preserving the font-loading optimization already shipped.
   The 8 base colors intentionally match style.css :root (identical values).
   =========================================================================== */

/* --- COLORS --- */
:root {
  /* Base palette (verbatim from the blog) */
  --color-white:        #FFFFFF;
  --color-near-black:   #222222;
  --color-dark:         #252D38;
  --color-green:        #B9CC72;
  --color-slate:        #586A84;
  --color-slate-light:  #8AA8D1;
  --color-gray-light:   #CCCCCC;
  --color-gray:         #6E6E6E;

  /* Derived navy shades */
  --color-dark-700:     oklch(0.30 0.025 258);
  --color-dark-900:     oklch(0.20 0.022 258);

  /* Derived green shades */
  --color-green-dark:   oklch(0.74 0.13 118);
  --color-green-soft:   oklch(0.95 0.045 118);

  /* Neutral ramp for surfaces & borders */
  --color-paper:        #FAFAF8;
  --color-mist:         #F1F3F5;
  --color-line:         #E6E8EB;
  --color-line-strong:  #D5D9DE;

  /* Semantic status */
  --color-success:      oklch(0.66 0.12 150);
  --color-warning:      oklch(0.78 0.13 80);
  --color-danger:       oklch(0.58 0.16 27);
  --color-info:         var(--color-slate);

  /* Semantic aliases */
  --bg-page:            var(--color-white);
  --bg-panel:           var(--color-paper);
  --bg-sunken:          var(--color-mist);
  --bg-inverse:         var(--color-dark);
  --bg-accent:          var(--color-green);
  --bg-accent-soft:     var(--color-green-soft);

  --text-body:          var(--color-near-black);
  --text-strong:        var(--color-dark);
  --text-muted:         var(--color-gray);
  --text-inverse:       var(--color-white);
  --text-link:          var(--color-slate);
  --text-on-accent:     var(--color-dark);

  --border-subtle:      var(--color-line);
  --border-strong:      var(--color-line-strong);
  --border-link:        var(--color-slate-light);
  --rule-quote:         var(--color-slate);

  --accent:             var(--color-green);
  --accent-press:       var(--color-green-dark);
  --focus-ring:         var(--color-slate);
}

/* --- TYPOGRAPHY --- */
:root {
  /* Families (genuine Typekit kit; substitutes kept as graceful fallback) */
  --font-serif:     "athelas", 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-condensed: "nimbus-sans-condensed", 'Archivo Narrow', 'Helvetica Neue', Arial, sans-serif;
  --font-sans:      "nimbus-sans-condensed", 'Archivo Narrow', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:      "source-code-pro", 'Source Code Pro', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Semantic role -> family */
  --font-body:      var(--font-serif);
  --font-display:   var(--font-condensed);
  --font-ui:        var(--font-condensed);
  --font-code:      var(--font-mono);

  /* Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Type scale (rem; 1rem = 16px) */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1.0625rem;
  --text-md:    1.25rem;
  --text-lg:    1.6rem;
  --text-xl:    2rem;
  --text-2xl:   2.6rem;
  --text-3xl:   3.4rem;
  --text-4xl:   4.5rem;

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.3;
  --leading-normal: 1.4;
  --leading-relaxed:1.6;

  /* Letter spacing */
  --tracking-display: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
}

/* --- SPACING --- */
:root {
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.5rem;
  --space-6:   2rem;
  --space-7:   3rem;
  --space-8:   4rem;
  --space-9:   6rem;

  /* Layout constants from the blog */
  --sidebar-width:  250px;
  --content-max:    45em;
  --content-pad:    3em;

  /* Semantic spacing */
  --gap-inline:     var(--space-2);
  --gap-stack:      var(--space-4);
  --gap-section:    var(--space-7);
  --pad-card:       var(--space-5);
  --pad-control:    var(--space-2) var(--space-4);
}

/* --- RADIUS --- */
:root {
  --radius-none:  0;
  --radius-xs:    0.15em;
  --radius-sm:    5px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-full:  9999px;
}

/* --- SHADOWS --- */
:root {
  --shadow-none: none;
  --shadow-xs:   0 1px 2px rgba(37, 45, 56, 0.06);
  --shadow-sm:   0 1px 3px rgba(37, 45, 56, 0.08), 0 1px 2px rgba(37, 45, 56, 0.06);
  --shadow-md:   0 4px 12px rgba(37, 45, 56, 0.10);
  --shadow-lg:   0 12px 32px rgba(37, 45, 56, 0.14);
  --ring-focus:  0 0 0 3px rgba(88, 106, 132, 0.35);
}

/* --- MOTION --- */
:root {
  --ease-standard: ease;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);

  --dur-fast:   0.15s;
  --dur-base:   0.25s;
  --dur-slow:   0.5s;

  --transition-color:   color var(--dur-base) var(--ease-standard);
  --transition-soft:    all var(--dur-slow) var(--ease-standard);
  --transition-control: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}