@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400..700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ============================================================================
   DIRECTION B: SPECIMEN GRID
   Primitive layer. Raw values only. No meaning attached, no role in the name.
   Nothing outside semantic.css may reference anything in this file.

   Primitives are theme-invariant, with the single documented exception of
   shadow (which carries colour): two raw sets are defined, and the semantic
   layer picks one per theme.
   ========================================================================= */

:root {

  /* --- Colour: slate -------------------------------------------------------
     Cool neutral, blue-leaning. The whole design lives on this ramp; chroma
     appears only where something is interactive. */
  --color-slate-0:    #FFFFFF;
  --color-slate-50:   #F8F9FB;
  --color-slate-100:  #F0F2F5;
  --color-slate-200:  #E2E6EB;
  --color-slate-300:  #CCD2DA;
  --color-slate-400:  #9BA4B0;
  --color-slate-500:  #656D79;
  --color-slate-600:  #545C68;
  --color-slate-700:  #3D444E;
  --color-slate-800:  #282E36;
  --color-slate-900:  #171B21;
  --color-slate-950:  #0D1014;
  --color-slate-1000: #000000;

  /* --- Colour: blue --------------------------------------------------------
     The only accent. Reserved for interaction. Never decorative. */
  --color-blue-50:   #EEF4FF;
  --color-blue-100:  #DBE6FE;
  --color-blue-200:  #BDD2FD;
  --color-blue-300:  #91B4FA;
  --color-blue-400:  #5D8FF3;
  --color-blue-500:  #3169E4;
  --color-blue-600:  #1E4FC4;
  --color-blue-700:  #1A3F9C;
  --color-blue-800:  #19367C;
  --color-blue-900:  #182F65;

  /* --- Colour: red (negative) --------------------------------------------- */
  --color-red-50:   #FEF1F2;
  --color-red-100:  #FDE0E3;
  --color-red-200:  #FABEC5;
  --color-red-300:  #F79AA3;
  --color-red-400:  #EC5F72;
  --color-red-500:  #D42A3D;
  --color-red-600:  #B31F30;
  --color-red-700:  #931B29;
  --color-red-800:  #791822;
  --color-red-900:  #63151D;

  /* --- Colour: green (positive) ------------------------------------------- */
  --color-green-50:   #EDF7F1;
  --color-green-100:  #D6EDE0;
  --color-green-200:  #AEDBC1;
  --color-green-300:  #7DC79C;
  --color-green-400:  #41A472;
  --color-green-500:  #197D4B;
  --color-green-600:  #14653C;
  --color-green-700:  #115231;
  --color-green-800:  #0E4228;
  --color-green-900:  #0C3621;

  /* --- Colour: transparencies --------------------------------------------- */
  --color-transparent:       rgba(0, 0, 0, 0);
  --color-scrim-light:       rgba(23, 27, 33, 0.52);
  --color-scrim-dark:        rgba(0, 0, 0, 0.68);
  --color-highlight-blue:    rgba(30, 79, 196, 0.15);
  --color-highlight-blue-dk: rgba(145, 180, 250, 0.22);

  /* --- Typeface ------------------------------------------------------------
     One grotesque for everything readable, one monospace for anything that is
     metadata. The mono is not decoration: it marks the difference between
     content and the labels that describe content. */
  --font-family-grotesque: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family-mono:      "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* --- Type scale ----------------------------------------------------------
     Deliberately tight. Ratio ~1.13 through the reading sizes, ~1.22 above.
     The grid carries hierarchy, so the type does not have to shout. */
  --font-size-3xs: 0.6875rem;                          /* 11px */
  --font-size-2xs: 0.75rem;                            /* 12px */
  --font-size-xs:  0.8125rem;                          /* 13px */
  --font-size-sm:  0.875rem;                           /* 14px */
  --font-size-md:  0.9375rem;                          /* 15px */
  --font-size-lg:  1.0625rem;                          /* 17px */
  --font-size-xl:  1.1875rem;                          /* 19px */
  --font-size-2xl: 1.375rem;                           /* 22px */
  --font-size-3xl: clamp(1.5rem,   1.40rem + 0.5vw, 1.625rem);  /* 24 → 26px */
  --font-size-4xl: clamp(1.75rem,  1.55rem + 1.0vw, 2rem);      /* 28 → 32px */
  --font-size-5xl: clamp(2rem,     1.60rem + 2.0vw, 2.5rem);    /* 32 → 40px */
  --font-size-6xl: clamp(2.25rem,  1.65rem + 3.0vw, 3rem);      /* 36 → 48px */
  --font-size-7xl: clamp(2.5rem,   1.70rem + 4.0vw, 3.5rem);    /* 40 → 56px */

  /* --- Weight -------------------------------------------------------------- */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* --- Line height --------------------------------------------------------- */
  --line-height-solid:   1;
  --line-height-tight:   1.12;
  --line-height-snug:    1.24;
  --line-height-normal:  1.45;
  --line-height-relaxed: 1.6;
  --line-height-loose:   1.72;

  /* --- Letter spacing ------------------------------------------------------ */
  --letter-spacing-tighter: -0.026em;
  --letter-spacing-tight:   -0.014em;
  --letter-spacing-normal:  0em;
  --letter-spacing-wide:    0.015em;
  --letter-spacing-wider:   0.05em;
  --letter-spacing-widest:  0.09em;

  /* --- Space ---------------------------------------------------------------
     The same 4px ruler as every other direction. Which rungs get used is a
     semantic decision. */
  --space-0:    0rem;       /* a unit, so it is valid inside calc() */
  --space-25:   0.125rem;   /* 2px  */
  --space-50:   0.25rem;    /* 4px  */
  --space-75:   0.375rem;   /* 6px  */
  --space-100:  0.5rem;     /* 8px  */
  --space-150:  0.75rem;    /* 12px */
  --space-200:  1rem;       /* 16px */
  --space-250:  1.25rem;    /* 20px */
  --space-300:  1.5rem;     /* 24px */
  --space-400:  2rem;       /* 32px */
  --space-500:  2.5rem;     /* 40px */
  --space-600:  3rem;       /* 48px */
  --space-800:  4rem;       /* 64px */
  --space-1000: 5rem;       /* 80px */
  --space-1200: 6rem;       /* 96px */
  --space-1600: 8rem;       /* 128px */
  --space-2000: 10rem;      /* 160px */

  /* --- Radius --------------------------------------------------------------
     Near zero throughout. A specimen sheet has corners, not pills. */
  --radius-none: 0;
  --radius-xs:   1px;
  --radius-sm:   2px;
  --radius-md:   3px;
  --radius-lg:   4px;
  --radius-xl:   6px;
  --radius-2xl:  8px;
  --radius-full: 9999px;

  /* --- Border width --------------------------------------------------------
     Load-bearing in this direction. Rules do the work that shadow does
     elsewhere, so the scale needs more usable steps at the fine end. */
  --border-width-0:   0;
  --border-width-1:   1px;
  --border-width-2:   2px;
  --border-width-3:   3px;
  --border-width-4:   4px;

  /* --- Icon stroke ---------------------------------------------------------
     Deliberately not a rung on the border-width scale. A border is measured on
     the box it bounds; a glyph stroke is measured after the glyph has been
     scaled into its box, so the two are not interchangeable even at equal
     nominal widths. */
  --stroke-width-regular: 1.5px;

  /* --- Stacking --------------------------------------------------------------
     Identical in every direction, like the icon stroke: which layer draws over
     which is a question about the page, not about the look. Numbered in tens
     so a role can be slotted between two others later without renumbering
     anything that already reads these. */
  --layer-10: 10;
  --layer-20: 20;
  --layer-30: 30;

  /* --- Elevation -----------------------------------------------------------
     Almost absent by design. A shadow in a ruled layout is a second answer to
     a question the rule already answered. Kept for overlays only. */
  --shadow-light-0: none;
  --shadow-light-1: none;
  --shadow-light-2: 0 1px 2px rgba(23, 27, 33, 0.07);
  --shadow-light-3: 0 2px 4px rgba(23, 27, 33, 0.06), 0 6px 14px rgba(23, 27, 33, 0.07);
  --shadow-light-4: 0 4px 8px rgba(23, 27, 33, 0.07), 0 16px 36px rgba(23, 27, 33, 0.11);

  --shadow-dark-0:  none;
  --shadow-dark-1:  none;
  --shadow-dark-2:  0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-dark-3:  0 2px 4px rgba(0, 0, 0, 0.46), 0 6px 14px rgba(0, 0, 0, 0.54);
  --shadow-dark-4:  0 4px 8px rgba(0, 0, 0, 0.48), 0 16px 36px rgba(0, 0, 0, 0.62);

  /* --- Motion --------------------------------------------------------------
     Short and flat. Interface pacing, not editorial pacing. */
  --duration-0:    0ms;
  --duration-100:  90ms;
  --duration-200:  140ms;
  --duration-300:  200ms;
  --duration-400:  280ms;
  --duration-500:  400ms;

  --easing-linear:     linear;
  --easing-standard:   cubic-bezier(0.25, 0.00, 0.20, 1.00);
  --easing-entrance:   cubic-bezier(0.00, 0.00, 0.25, 1.00);
  --easing-exit:       cubic-bezier(0.45, 0.00, 1.00, 1.00);
  --easing-emphasized: cubic-bezier(0.35, 0.00, 0.05, 1.00);

  /* --- Measure -------------------------------------------------------------- */
  --measure-40: 40ch;
  --measure-52: 52ch;
  --measure-64: 64ch;
  --measure-72: 72ch;
  --measure-none: none;

  /* --- Layout widths -------------------------------------------------------- */
  --width-176:  11rem;
  --width-400:  25rem;
  --width-640:  40rem;
  --width-720:  45rem;
  --width-880:  55rem;
  --width-1100: 68.75rem;
  --width-1320: 82.5rem;
}