/* ==========================================================================
   Aspect 10 design tokens — ported near-verbatim from the Aspect 10 design
   system (prototype/_ds/aspect10-design-system-73d0287f…/tokens/*.css).
   Fonts self-hosted in ../fonts/. Light theme only is used by the website.
   ========================================================================== */

/* --- Webfonts ------------------------------------------------------------ */
@font-face {
  font-family: "Clarity City";
  src: url("../fonts/ClarityCity-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clarity City";
  src: url("../fonts/ClarityCity-Italic-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Emilea";
  src: url("../fonts/Emilea.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Colour -------------------------------------------------------------- */
:root, [data-theme="light"] {
  --pinstripe: #26272a;
  --suit-grey: #8a8c90;
  --carpet: #d6d3cc;
  --monitor-cream: #e8e0cb;
  --office-white: #f4f3ef;
  --secondary-text: #5f6166;
  --raised-surface: #fafaf8;
  --rule: #b7b8bb;
  --copper: #a2582f;
  --copper-pressed: #9a522b;
  --moss: #5e6e3a;
  --moss-pressed: #576634;
  --prussian-blue: #2c4a6b;
  --prussian-blue-pressed: #284565;
  --aubergine: #4e3150;
  --aubergine-pressed: #472c49;
  --ink: var(--pinstripe);
  --ground: var(--office-white);
  --on-highlight: var(--office-white);
  --glass: rgba(250, 248, 244, 0.72);
  --glass-edge: transparent;
  --hairline: rgba(38, 39, 42, 0.14);
  --control-edge: rgba(38, 39, 42, 0.2);
  --frame-edge: rgba(38, 39, 42, 0.3);
  --track-off: rgba(38, 39, 42, 0.14);
  --primary-hover: #3a3b40;
  --thumb: #ffffff;
  --scrim: rgba(28, 26, 24, 0.5);
  --focus-ring: 0 0 0 2px #26272a;
  --focus-ring-inverse: 0 0 0 2px #f4f3ef;
  --photo-veil: linear-gradient(180deg, rgba(38, 39, 42, 0.18), rgba(38, 39, 42, 0.32));
}
:root {
  --text-primary: var(--ink);
  --text-secondary: var(--secondary-text);
  --surface-ground: var(--ground);
  --surface-raised: var(--raised-surface);
  --surface-tile: var(--carpet);
  --surface-quiet: var(--monitor-cream);
  --surface-ink: var(--pinstripe);
  --border-control: var(--suit-grey);
  --border-rule: var(--rule);
  --text-error: var(--copper);
  --surface-glass: var(--glass);
  /* Phase highlight aliases (new site names map to the same four hues). */
  --posture-pursue: var(--copper);
  --posture-build: var(--moss);
  --posture-review: var(--prussian-blue);
  --posture-pause: var(--aubergine);
}

/* --- Typography ---------------------------------------------------------- */
:root {
  --font-sans: "Clarity City", "Helvetica Neue", Arial, sans-serif;
  --font-display: Emilea, Didot, "Bodoni 72", Georgia, serif;
  --text-numeral: 400 72px/72px var(--font-display);
  --text-energy-number: 400 56px/56px var(--font-display);
  --text-theme: 400 34px/40px var(--font-display);
  --text-display: 400 44px/50px var(--font-display);
  --text-caps-title: 600 16px/22px var(--font-sans);
  --text-posture-label: 600 13px/16px var(--font-sans);
  --text-title: 500 20px/26px var(--font-sans);
  --text-body: 400 17px/26px var(--font-sans);
  --text-body-s: 400 15px/23px var(--font-sans);
  --text-button: 600 12px/16px var(--font-sans);
  --text-subcaps: 600 11px/16px var(--font-sans);
  --text-chip: 600 11px/14px var(--font-sans);
  --text-caption: 400 12px/17px var(--font-sans);
  --text-label: 600 11px/14px var(--font-sans);
  --text-data: 500 15px/20px var(--font-sans);
  --text-figure-l: 300 64px/64px var(--font-sans);
  --text-figure: 300 44px/48px var(--font-sans);
  --text-figure-s: 300 28px/32px var(--font-sans);
  --text-posture-title: 600 28px/34px var(--font-sans);
  --tracking-posture-title: 0.08em;
  --tracking-display: 0.1em;
  --tracking-caps: 0.12em;
  --tracking-caps-title: var(--tracking-caps);
  --tracking-posture: var(--tracking-caps);
  --tracking-subcaps: var(--tracking-caps);
  --tracking-button: var(--tracking-caps);
  --tracking-chip: var(--tracking-caps);
  --tracking-label: var(--tracking-caps);
}
.numeral { font: var(--text-numeral); letter-spacing: -0.01em; }
.energy-number { font: var(--text-energy-number); letter-spacing: 0; }
.theme { font: var(--text-theme); letter-spacing: 0; }
.display { font: var(--text-display); letter-spacing: var(--tracking-display); text-transform: uppercase; }
.caps-title { font: var(--text-caps-title); letter-spacing: var(--tracking-caps-title); text-transform: uppercase; }
.posture-title { font: var(--text-posture-title); letter-spacing: var(--tracking-posture-title); text-transform: uppercase; white-space: nowrap; }
.posture-label { font: var(--text-posture-label); letter-spacing: var(--tracking-posture); text-transform: uppercase; }
.title { font: var(--text-title); letter-spacing: 0; }
.body { font: var(--text-body); letter-spacing: 0; }
.body-s { font: var(--text-body-s); letter-spacing: 0; }
.button { font: var(--text-button); letter-spacing: var(--tracking-button); text-transform: uppercase; }
.subcaps { font: var(--text-subcaps); letter-spacing: var(--tracking-subcaps); text-transform: uppercase; }
.chip-caps { font: var(--text-chip); letter-spacing: var(--tracking-chip); text-transform: uppercase; }
.caption { font: var(--text-caption); letter-spacing: 0; }
.label { font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.data { font: var(--text-data); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.figure-l { font: var(--text-figure-l); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.figure { font: var(--text-figure); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.figure-s { font: var(--text-figure-s); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.numeral, .energy-number, .theme, .display { font-variant-ligatures: none; }

/* --- Space, shape, control sizes ----------------------------------------- */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-3: var(--space-4);
  --space-5: var(--space-6);
  --space-16: var(--space-12);

  --radius-none: 0;
  --radius-round: 50%;
  --radius-s: 4px;
  --radius-m: 6px;
  --radius-l: var(--radius-m);
  --radius-xs: var(--radius-s);
  --radius-control-sm: var(--radius-s);
  --radius-control: var(--radius-m);
  --radius-sm: var(--radius-m);
  --radius-chip: var(--radius-m);
  --radius-toast: var(--radius-l);
  --radius-card: var(--radius-l);
  --radius-dialog: var(--radius-l);
  --radius-sheet: var(--radius-l);
  --radius-tabbar: var(--radius-l);

  --control-xl: 52px;
  --control-round: 44px;
  --tabbar-height: 58px;
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
  --blur-glass: 30px;
  --blur-ground: 28px;
}