/* app/css/tokens.css
 * Structural design tokens — NEVER brand-overridden.
 * Layer A of the two-layer token system. See docs/superpowers/specs/2026-05-20-altideal-multi-brand-redesign-design.md §4.1
 */

/* Self-hosted font faces. CSP-compliant (font-src 'self' data:). */
@font-face {
  font-family: 'Tenor Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/TenorSans/TenorSans-Regular.woff2') format('woff2');
}

@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/InterTight/InterTight-Light.woff2')    format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/InterTight/InterTight-Regular.woff2')  format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/InterTight/InterTight-Medium.woff2')   format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/InterTight/InterTight-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/InterTight/InterTight-Bold.woff2')     format('woff2'); }

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/Montserrat/Montserrat-Light.woff2')    format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Montserrat/Montserrat-Regular.woff2')  format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Montserrat/Montserrat-Medium.woff2')   format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Montserrat/Montserrat-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Montserrat/Montserrat-Bold.woff2')     format('woff2'); }

@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/JetBrainsMono/JetBrainsMono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/JetBrainsMono/JetBrainsMono-Medium.woff2')  format('woff2'); }

:root {
  /* Spatial */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Type scale */
  --font-size-display: 56px;
  --font-size-h1: 32px;
  --font-size-h2: 22px;
  --font-size-h3: 17px;
  --font-size-body: 14px;
  --font-size-small: 12px;
  --font-size-micro: 11px;
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-body: 1.55;

  /* Motion base — multiplied per brand by --brand-motion-pace */
  --motion-fast: 120ms;
  --motion-med:  240ms;
  --motion-slow: 400ms;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-deco:  cubic-bezier(0.22, 1.2, 0.36, 1);

  /* Z-index */
  --z-base: 1;
  --z-content: 10;
  --z-nav: 50;
  --z-modal: 100;
  --z-toast: 200;
}