/* Design tokens. Loaded immediately after fonts.css and before every page
   stylesheet, so the scales below are available everywhere and later files may
   override an individual role without redefining a scale.

   Three scales carry the interface:
     radius   6 steps, concentric (inner radius = outer radius - padding)
     motion   5 durations, 3 curves. Nothing else should hardcode a timing.
     elevation 4 levels with matched blur / spread / offset ratios.

   The material roles below describe a single light source, top-down. Every
   surface reads as glass lit from above: a top highlight, an inner ring, a
   bottom shade, then a cast shadow. */

:root {
  /* ---------------------------------------------------------------- type -- */
  --font-sans:
    "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:
    "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Inter's optional features: single-storey a is off (cv11 keeps the two-storey
     a the design direction was drawn against), tabular figures are opt-in per
     element, and ss01 gives the shorter, more geometric numeral set. */
  --font-feature-sans: "cv05" 1, "cv08" 1, "ss01" 1, "calt" 1, "kern" 1;
  --font-feature-tabular: "tnum" 1, "ss01" 1, "calt" 1;

  /* --------------------------------------------------------------- radius -- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-pill: 999px;

  /* --------------------------------------------------------------- motion -- */
  --dur-1: 90ms; /* state flips: hover, press */
  --dur-2: 160ms; /* small reveals: menus, tooltips */
  --dur-3: 240ms; /* panel and layout changes */
  --dur-4: 380ms; /* overlays entering */
  --dur-5: 720ms; /* ambient: parallax settle, scene fade */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);

  /* ------------------------------------------------------------ elevation -- */
  --el-1: 0 1px 2px #00000073, 0 2px 6px #00000059;
  --el-2: 0 4px 14px #0000007a, 0 2px 5px #00000061;
  --el-3: 0 14px 38px #0000008f, 0 5px 12px #00000070;
  --el-4: 0 30px 84px #000000ad, 0 12px 28px #00000085;

  /* ------------------------------------------------------------- material -- */
  --glass-edge: #ffffff1f;
  --glass-edge-strong: #ffffff2b;
  /* Top highlight, hairline ring, and lower shade of one glass surface. */
  --glass-light: inset 0 1px 0 #ffffff14;
  --glass-ring: inset 0 0 0 1px #ffffff0a;
  --glass-shade: inset 0 -1px 0 #0000004d;

  /* ---------------------------------------------------------------- brand -- */
  /* The signature hairline: ember anchor cooling to nothing. Used for section
     rules, dividers and the short accent dash under the motto and footer. */
  --rule-ember: linear-gradient(90deg, #ff8a00, #ff4338 34%, #ff433800 82%);
  --rule-ember-soft: linear-gradient(90deg, #ff8a0029, #ffffff00 70%);
  --ember-dash: linear-gradient(90deg, #ff8a00, #ff4338);
}