/* Design tokens: every colour, space, type size, radius, shadow and motion
   value on the site. Other stylesheets use these through var() only.
   Taken from the mockup; the page follows the device's light or dark setting. */

:root {
  color-scheme: light dark;

  /* Palette */
  --paper: #F3F4F6; --white: #FFFFFF; --ink: #101217; --slate: #586071; --mist: #D8DCE3; --cloud: #EEF0F3;
  --night: #0B0D11; --coal: #14171D; --snow: #ECEEF2; --ash: #9AA2B1; --smoke: #262B34; --deep: #0F1217;
  --teal: #0B9A94;        /* the logo's teal: graphics only, too light for text */
  --teal-light: #3CCFC8;  /* the logo's teal on dark */
  --teal-text: #06716C;   /* teal for text on light: 5.3:1 on paper, room enough for the clouds behind it */

  /* Page roles */
  --bg: var(--paper); --surface: var(--white); --sunk: var(--cloud);
  --text: var(--ink); --muted: var(--slate); --line: var(--mist);
  --accent: var(--teal); --accent-text: var(--teal-text); --bad-text: #B42323;
  /* Status in the Software chapter's app: in range, a warning and a note, as text on their own light tint.
     A little darker than the mockup's #1B7F4B, #9A6A12 and #0B6F9A, which fell under 4.5:1 on it. */
  --chip-ok: #187143; --chip-warn: #81590F; --chip-info: #0A6992;

  /* Drawing sheet */
  --sheet: #FFFFFF; --sheet-ink: #14171D; --sheet-soft: rgba(20, 23, 29, .56); --sheet-faint: rgba(20, 23, 29, .14);
  --sheet-cu: rgba(11, 154, 148, .6); --sheet-hl: #0B9A94;

  /* 3D studio */
  --studio-hi: #FFFFFF; --studio-lo: #D6DBE0; --l3-shadow: .6;

  /* Clouds behind the page: the sky high and low, the glow ahead, and the clouds' face, shade and sheen.
     --cloud-veil is how much of the page's colour lies over them wherever text does: enough that grey and teal text
     keep 4.5:1 over their darkest spot in light, and over their brightest in dark */
  --sky-top: #BFD3D6; --sky-low: #EDF2F3; --sky-glow: #D9F2EF;
  --cloud-face: #FFFFFF; --cloud-shade: #BCCDD0; --cloud-sheen: #F2FBFA; --cloud-veil: 70%;

  /* Tool screens: always dark */
  --tool-bg: #0C0F13; --tool-view: #0F1318; --tool-panel: #10141A; --tool-raise: #171C23; --tool-line: #222A33;
  --tool-text: #CBD3DC; --tool-muted: #7B8693; --tool-glow: #1B222B; --tool-hover: rgba(228, 231, 235, .07);
  --tool-grid: rgba(203, 211, 220, .14); --tool-top: #3CCFC8; --tool-bot: #D9A441; --tool-pad: #9BE7E1;
  --tool-silk: #E4E7EB; --tool-edge: #D8C27A; --tool-ko: #E5484D; --tool-ok: #3DD68C;

  /* Code in the tool screens. --code-com is lighter than the mockup's #6B7683, which was 4.0:1 on --tool-bg. */
  --code-kw: #3CCFC8; --code-str: #E6B673; --code-num: #F29668; --code-fn: #82AAFF; --code-type: #C3A6FF;
  --code-var: #EEF1F5; --code-com: #7D8895; --code-tag: #FF8A80;

  /* Product colourways */
  --cmf-graphite: #22272E; --cmf-paper: #E4E6E8;

  /* Type */
  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-md: 14px; --text-lg: 15px; --text-body: 16px; --text-xl: 22px;
  --text-lead: clamp(16px, 1.5vw, 18px); --text-lead-lg: clamp(17px, 1.45vw, 19px);
  --text-h4: clamp(26px, 3vw, 38px); --text-h3: clamp(32px, 4.2vw, 52px); --text-h2: clamp(34px, 4.6vw, 58px); --text-display: clamp(44px, 6.2vw, 86px);
  --sheet-text-xs: 7.5px; --sheet-text-sm: 8.5px; --sheet-text-md: 10px; --sheet-text-lg: 11px; --sheet-text-xl: 13px;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --leading-none: 1; --leading-tight: 1.2; --leading-snug: 1.35; --leading-body: 1.55; --leading-code: 1.7;
  --tracking-display: -.045em; --tracking-tight: -.035em; --tracking-wide: .03em; --tracking-caps: .1em;

  /* Space: --space-N is N × 4px */
  --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-2-5: 10px; --space-3: 12px;
  --space-3-5: 14px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-18: 72px;
  --space-fluid-s: clamp(14px, 3vw, 28px); --space-fluid-m: clamp(16px, 3vw, 40px);
  --space-fluid-l: clamp(28px, 4vw, 44px); --space-fluid-xl: clamp(40px, 6vw, 72px);
  --gutter: clamp(16px, 4vw, 48px);

  /* Size */
  --page-max: 1160px;
  --tap: 44px;
  --logo-h: 40px;
  --portrait: 108px; --portrait-ring: 120px; /* the photo is 250px, so it stays sharp up to 125px */

  /* Radius */
  --r-xs: 3px; --r-sm: 7px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px; --r-round: 50%;

  /* Shadow */
  --lift: 0 1px 2px rgba(16, 18, 23, .12);
  --float: 0 12px 32px -14px rgba(0, 0, 0, .4);
  --tool-shadow: 0 30px 70px -26px rgba(12, 16, 22, .55), 0 2px 8px rgba(12, 16, 22, .16);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-sweep: cubic-bezier(.45, .05, .35, 1);
  --dur-fast: .15s; --dur-base: .4s; --dur-slow: .7s; --dur-slower: 1s; --dur-long: 1.4s;
  --dur-stagger: .08s; --delay-hint: 2.8s;

  /* Breakpoints: for reading only, since media and container queries can't use var(). The tests hold them to these.
     --bp-stage is a skill stage's own width, where its views turn from wide to tall. */
  --bp-sm: 640px; --bp-md: 760px; --bp-lg: 900px; --bp-stage: 560px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--night); --surface: var(--coal); --sunk: var(--deep);
    --text: var(--snow); --muted: var(--ash); --line: var(--smoke);
    --accent: var(--teal-light); --accent-text: var(--teal-light); --bad-text: #FF6A73;
    --chip-ok: #3DD68C; --chip-warn: #E6B673; --chip-info: #6CC4F0;
    --sheet: #101318; --sheet-ink: #E3E7EC; --sheet-soft: rgba(227, 231, 236, .56); --sheet-faint: rgba(227, 231, 236, .13);
    --sheet-cu: rgba(60, 207, 200, .55); --sheet-hl: #3CCFC8;
    --studio-hi: #1C2129; --studio-lo: #0A0C0F; --l3-shadow: .85;
    --sky-top: #07090C; --sky-low: #0D1419; --sky-glow: #0E3C3A;
    --cloud-face: #27313B; --cloud-shade: #090C10; --cloud-sheen: #3F726E; --cloud-veil: 77%;
    --lift: 0 1px 2px rgba(0, 0, 0, .5);
    --tool-shadow: 0 30px 70px -26px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .03);
  }
}