/* =========================================================
   SKILDGRAD · Design tokens
   The only file with raw values. Everything else references
   semantic variables. Change colour or type once, here.
   ========================================================= */

:root{
  /* ---- Color primitives ---- */
  --paper:      #FFF8E8;   /* Warm cream — site-wide */
  --paper-2:    #FFFFFF;
  --ink:        #0E1E3F;   /* Navy — primary text, logo */
  --ink-2:      #4A5875;   /* Navy muted */
  --ink-3:      #8892A6;   /* Navy subtle */
  --line:       #E6DFC8;   /* Warm cream border */
  --line-2:     #D5CCAA;   /* Warm cream input border */
  --signal:     #E5A800;   /* Gold accent */
  --signal-2:   #B88600;   /* Gold deep */

  /* ---- Semantic roles ---- */
  --bg:              #FFF8E8;
  --bg-elevated:     #FFF3D0;
  --fg:              var(--ink);
  --fg-muted:        var(--ink-2);
  --fg-subtle:       var(--ink-3);
  --border:          var(--line);
  --border-strong:   var(--line-2);
  --accent:          var(--signal);
  --focus-ring:      var(--ink);

  /* ---- Typography scale ---- */
  --t-display-size:   clamp(40px, 7vw, 72px);
  --t-display-lh:     1.02;
  --t-display-track:  -0.03em;

  --t-h1-size:        clamp(32px, 5vw, 48px);
  --t-h1-lh:          1.05;
  --t-h1-track:       -0.025em;

  --t-h2-size:        clamp(24px, 3.2vw, 32px);
  --t-h2-lh:          1.15;
  --t-h2-track:       -0.02em;

  --t-h3-size:        20px;
  --t-h3-lh:          1.25;
  --t-h3-track:       -0.01em;

  --t-h4-size:        16px;
  --t-h4-lh:          1.35;
  --t-h4-track:       -0.005em;

  --t-body-size:      16px;
  --t-body-lh:        1.55;

  --t-small-size:     14px;
  --t-small-lh:       1.5;

  --t-micro-size:     12px;
  --t-micro-lh:       1.4;
  --t-micro-track:    0.02em;

  --t-eyebrow-size:   11px;
  --t-eyebrow-lh:     1.3;
  --t-eyebrow-track:  0.16em;

  /* Font stack */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Helvetica Neue", Arial, sans-serif;

  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;

  /* ---- Spacing scale ---- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 16px;  --s-4: 24px;  --s-5: 32px;
  --s-6: 48px;  --s-7: 64px;  --s-8: 96px;  --s-9: 128px;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: var(--s-4);
  --nav-h:         72px;

  /* ---- Radius / motion ---- */
  --radius:   0px;
  --ease:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast:   120ms;
  --t-med:    200ms;

  --bp-sm: 0;
  --bp-md: 720px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

@media (min-width: 720px){ :root{ --container-pad: var(--s-5); } }
@media (min-width: 1024px){ :root{ --container-pad: var(--s-6); } }