/* Design tokens. */

:root {
  color-scheme: light dark;
  /* Surfaces and text */
  --paper:      light-dark(#F5F8FC, #070F1D);   /* page background */
  --surface:    light-dark(#FFFFFF, #0D1B30);   /* cards, panels */
  --surface-2:  light-dark(#EDF2F9, #12233C);   /* footer, insets */
  --ink:        light-dark(#0A1628, #E7EEF9);   /* body text */
  --muted:      light-dark(#55688A, #93A8C7);   /* secondary text */
  --line:       light-dark(#DBE4F0, #1C3050);   /* borders, rules */

  /* Accent */
  --blue:       light-dark(#0B4FA8, #5BA0F0);   /* links, buttons */
  --blue-hover: light-dark(#093F87, #82B8F6);
  --blue-tint:  light-dark(#E4EEFB, #10233E);   /* accent backgrounds */
  --on-blue:    light-dark(#FFFFFF, #04101F);   /* text on --blue */

  /* Verdicts */
  --signal:     light-dark(#136B50, #38C99A);   /* proven / passing */

  /* Code surfaces */
  --code-bg:    light-dark(#0A1628, #04101F);
  --code-ink:   #C9D8EE;
  --code-line:  light-dark(#1D3357, #16294A);

  /* Elevation */
  --shadow-1:   light-dark(rgba(10,22,40,.06), rgba(0,0,0,.40));
  --shadow-2:   light-dark(rgba(10,22,40,.05), rgba(0,0,0,.42));
  --shadow-sm: 0 1px 2px var(--shadow-1), 0 2px 8px var(--shadow-2);
  --shadow-md: 0 2px 4px var(--shadow-1), 0 12px 32px var(--shadow-2);

  /* Syntax colours. Fixed, since the code panel is dark in both themes. */
  --tok-kw:  #E29B5A;
  --tok-str: #E5A87B;
  --tok-cls: #6FD3C2;
  --tok-fn:  #7FB8F2;

  /* Methodology groups: blue for automatic tools, green for properties */
  --prop-tint:  light-dark(#E6F4EE, #0F2421);

  /* Typography */
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Type scale, fluid between 360px and 1440px */
  --s-1:  clamp(.78rem, .76rem + .1vw, .84rem);
  --s0:   clamp(1rem, .97rem + .16vw, 1.08rem);
  --s1:   clamp(1.13rem, 1.06rem + .34vw, 1.35rem);
  --s2:   clamp(1.45rem, 1.28rem + .82vw, 2.05rem);
  --s3:   clamp(1.9rem, 1.55rem + 1.7vw, 2.85rem);
  --mark: clamp(3.4rem, 1.9rem + 7.4vw, 6.6rem);

  /* Layout */
  --gutter:  clamp(1.25rem, .7rem + 2.4vw, 3rem);
  --wide:    1180px;
  --measure: 66ch;
  --nav-h:   56px;

  /* Radii */
  --r-sm:   6px;
  --r-md:   10px;
  --r-pill: 999px;

  /* Motion. Kept short and few on purpose. */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 550ms;   /* entrance and scroll reveal only */
  --ease:     cubic-bezier(.2, .7, .3, 1);
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }