/* MWD Design System - tokens.
   Merwin Web Designz. The master copy lives in
   MWD Studio\_Assets\Brand\MWD\MWD_Design_System_v<version>\Tokens\MWD_Tokens.css.
   Projects copy this file in unchanged; they never edit their copy. A project that
   needs a different value overrides the custom property in its own stylesheet.

   The system in one sentence: near-black surfaces in five even steps, one warm off-white,
   one orange, one blue-grey - and nothing else. No gradients, no glows. Hierarchy comes
   from size, weight, spacing and the orange, used sparingly enough that it always means
   "this is the thing to look at or press".

   Fonts are NOT loaded here (an @import serialises the download behind this file).
   Each page loads them with preconnect + <link>:
     https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap
   Offline tools bundle the woff2 files and point --font-* at local faces instead. */

:root{
  /* ---- surfaces: five steps from the board ----
     1 is the page. Each step up is "closer to you": panel, control, hairline, strong
     hairline. Never skip more than two steps between neighbours. */
  --surface-1:#0E0F11;              /* page ground */
  --surface-2:#16181D;              /* raised panel, card, alternating band */
  --surface-3:#1F2229;              /* control fill, panel on a panel, pill */
  --surface-4:#2B3038;              /* hairline, divider, hover fill */
  --surface-5:#3A414C;              /* input border, strong hairline, hover border */

  /* ---- ink ---- */
  --text:#F4F2ED;                   /* headings, primary text, ghost-button border */
  --text-2:#C9CDD3;                 /* long body copy (derived: between text and muted) */
  --muted:#8B96A7;                  /* secondary copy, placeholders, captions; 5.3:1 on surface-3 */

  /* ---- accent ----
     One orange. Primary buttons, the accent rule, a card's top edge, the status dot,
     focus rings, active nav. If two orange things compete on one screen, remove one. */
  --accent:#FF8A2B;
  --accent-hi:#FFA35A;              /* hover */
  --accent-lo:#E8731A;              /* pressed */
  --accent-ink:#0E0F11;             /* text on orange; 8.9:1 */
  --accent-wash:rgba(255,138,43,.12);
  --accent-line:rgba(255,138,43,.45);

  /* ---- feedback (functional only, never decorative) ---- */
  --ok:#5CD6A8;
  --warn:#F2C14E;
  --danger:#FF6363;
  --ok-wash:rgba(92,214,168,.10);
  --danger-wash:rgba(255,99,99,.10);

  /* ---- type ---- */
  --font-display:"Inter Tight","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Fluid scale: each clamp() lands on its min near 380px and its max near 1280px. */
  --t-2xs:10.5px;
  --t-xs:11.5px;
  --t-sm:13px;
  --t-base:clamp(15px,.3vw + 13.9px,16.5px);
  --t-md:clamp(16.5px,.5vw + 14.8px,19px);
  --t-lg:clamp(19px,.9vw + 15.6px,24px);
  --t-xl:clamp(23px,1.6vw + 17px,32px);
  --t-2xl:clamp(29px,2.9vw + 18px,46px);
  --t-3xl:clamp(36px,4.6vw + 18.5px,68px);
  --t-4xl:clamp(46px,7.4vw + 18px,112px);   /* the "Create" size: one word or a short line */

  --lead-display:.96;
  --lead-tight:1.08;
  --lead-snug:1.22;
  --lead-body:1.62;

  --track-display:-.035em;          /* Inter Tight at display sizes */
  --track-heading:-.02em;
  --track-label:.22em;              /* mono section labels: COLORS, TYPOGRAPHY */
  --track-meta:.12em;               /* small mono meta lines */
  --track-brand:.42em;              /* the spaced wordmark */

  /* ---- shape ---- */
  --r-xs:2px;
  --r-sm:3px;                       /* buttons, inputs, tags */
  --r:6px;                          /* cards, panels */
  --r-pill:999px;                   /* status pill only */

  --bw:1px;
  --bw-accent:2px;                  /* a card's orange top edge */
  --rule-accent:3px;                /* the orange rule under a display headline */

  /* ---- space: 4px grid ---- */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;
  --s-20:80px; --s-24:96px; --s-32:128px;

  --content:1200px;
  --content-narrow:760px;
  --gutter:max(20px,env(safe-area-inset-left));
  --header-h:68px;

  /* ---- elevation: almost none. Borders do the work; shadow only for floating layers. ---- */
  --shadow-float:0 18px 48px -18px rgba(0,0,0,.85);

  /* ---- motion ---- */
  --ease:cubic-bezier(.65,.02,.2,1);
  --ease-out:cubic-bezier(.2,.85,.25,1);
  --dur-press:.08s; --dur-hover:.16s; --dur-move:.34s; --dur-reveal:.7s;
}

/* Breakpoints cannot be custom properties. Used verbatim:
     560px  card grids go to one column
     760px  prose column hits its max
     900px  desktop nav, two-column splits
     1100px wide grids go to three or four up */

@media (prefers-reduced-motion:reduce){
  :root{--dur-press:.01ms;--dur-hover:.01ms;--dur-move:.01ms;--dur-reveal:.01ms}
}