/* ENPHITIC design tokens — source of truth.
   Three tiers: --p- primitives (raw)
                --s- semantic (what components consume)
                --c- component (override hooks)
   RULE: components never reference --p- directly.
   Theme: dark only (Noir Earth), decided by the founder 17 Oct 2026.
   No accent colour. Light comes from Sandstone, used as light, not as paint. */

@layer tokens {
  :root {
    color-scheme: dark;

    /* ---- Primitives: warm neutral ramp, OKLCH ---- */
    --p-n-050: oklch(0.985 0.008 86);      /* highlight */
    --p-n-100: oklch(0.9648 0.0127 86.8);  /* #f7f3ea Sandstone */
    --p-n-300: oklch(0.86 0.012 87.5);
    --p-n-500: oklch(0.72 0.010 88);
    --p-n-600: oklch(0.62 0.009 89);
    --p-n-700: oklch(0.50 0.008 90);
    --p-n-800: oklch(0.30 0.007 91);
    --p-n-850: oklch(0.245 0.0065 91.4);
    --p-n-900: oklch(0.2134 0.0060 91.6);  /* #1a1916 Noir Earth */
    --p-n-950: oklch(0.175 0.0055 91.8);
    --p-n-990: oklch(0.145 0.005 92);      /* deepest surface */

    /* ---- Type ---- */
    --p-font-sans: "Instrument Sans Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --p-font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --t-hero:       560 clamp(2.5rem, 1.2rem + 5.4vw, 5.75rem)/1.0 var(--p-font-sans);
    --t-display-72: 560 clamp(2.125rem, 1.25rem + 4.3vw, 4.5rem)/1.03 var(--p-font-sans);
    --t-display-56: 560 clamp(1.875rem, 1.3rem + 2.6vw, 3.5rem)/1.06 var(--p-font-sans);
    --t-heading-36: 560 clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem)/1.15 var(--p-font-sans);
    --t-heading-24: 560 1.5rem/1.25 var(--p-font-sans);
    --t-heading-20: 600 1.25rem/1.3 var(--p-font-sans);
    --t-copy-20: 400 clamp(1.0625rem, 1rem + 0.3vw, 1.25rem)/1.55 var(--p-font-sans);
    --t-copy-17: 400 1.0625rem/1.6 var(--p-font-sans);
    --t-copy-15: 400 0.9375rem/1.6 var(--p-font-sans);
    --t-label-15: 500 0.9375rem/1.2 var(--p-font-sans);
    --t-label-13: 500 0.8125rem/1.2 var(--p-font-sans);
    --t-eyebrow: 500 0.72rem/1.2 var(--p-font-mono);

    --track-hero: -0.035em;
    --track-display: -0.025em;
    --track-heading: -0.014em;
    --track-eyebrow: 0.12em;

    /* ---- Space: 4px base ---- */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;
    --sp-24: 96px; --sp-32: 128px;

    --page-max: 1280px;
    --prose-max: 640px;
    --gutter: clamp(20px, 5vw, 64px);
    --header-h: 68px;

    --r-input: 4px; --r-button: 999px; --r-card: 20px; --r-modal: 24px; --r-pill: 9999px;

    /* ---- Motion ---- */
    --ease-standard: cubic-bezier(.4, 0, .2, 1);
    --ease-emphasized: cubic-bezier(.2, 0, 0, 1);
    --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
    --d-1: 120ms; --d-2: 200ms; --d-3: 320ms; --d-4: 600ms;
  }

  /* ---- Semantic tokens. Components consume only these. ---- */
  :root {
    --s-bg:          var(--p-n-990);
    --s-bg-raised:   var(--p-n-950);
    --s-bg-card:     oklch(0.19 0.006 91.7);
    --s-bg-inverse:  var(--p-n-100);

    --s-text:        var(--p-n-100);
    --s-text-strong: var(--p-n-050);
    --s-text-muted:  var(--p-n-500);
    --s-text-subtle: var(--p-n-700);
    --s-text-inverse:var(--p-n-900);

    --s-border:        oklch(0.9648 0.0127 86.8 / .12);
    --s-border-strong: oklch(0.9648 0.0127 86.8 / .26);
    --s-border-subtle: oklch(0.9648 0.0127 86.8 / .07);

    --s-glow:   oklch(0.9648 0.0127 86.8 / .10);
    --s-focus:  var(--p-n-100);

    --s-action-bg:       var(--p-n-100);
    --s-action-text:     var(--p-n-900);
    --s-action-bg-hover: var(--p-n-050);

    --s-header-bg: oklch(0.145 0.005 92 / .62);
  }
}