@font-face { font-family: 'Space Grotesk'; src: url('../fonts/SpaceGrotesk-VF.ttf') format('truetype'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-VF.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-VF.ttf') format('truetype'); font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  --font-sans: var(--ct-font-body);
  --font-display: var(--ct-font-display);
  --font-mono: var(--ct-font-mono);

  --bg: var(--ct-bg);                  
  --bg-alt: var(--ct-panel);           
  --bg-card: var(--ct-panel);          
  --bg-card-alt: var(--ct-bg);         
  --ink: var(--ct-text);               
  --heading: var(--ct-text);           
  --ink-2: var(--ct-text-muted);       
  --label: var(--ct-text-muted);       
  --line: var(--ct-hairline);          
  --line-subtle: var(--ct-hairline-subtle);
  --line-strong: var(--ct-border-strong);  
  --link: var(--ct-link);
  --link-hover: var(--ct-text);
  --focus: var(--ct-focus);
  --error: var(--ct-status-error);

  --accent: var(--ct-accent);
  --accent-text: var(--ct-accent);
  --accent-tint: var(--ct-elevated);   
  --btn-bg: var(--ct-accent);
  --btn-fg: var(--ct-on-accent);
  --btn-bg-hover: var(--ct-text-strong);
  --btn-fg-hover: var(--ct-bg);
  --diagram: var(--ct-link);           
  --certsign-red: var(--ct-certsign-red);  
  --certsign-tile: var(--ct-dark-white);
  --certsign-s: var(--ct-certsign-red);
  --certsign-word: var(--ct-dark-white);

  --frame-bg: var(--ct-panel);
  --frame-panel: var(--ct-elevated);
  --frame-line: var(--ct-hairline);
  --frame-text: var(--ct-text);
  --frame-muted: var(--ct-text-muted);
  --frame-accent: var(--ct-accent);
  --frame-link: var(--ct-link);
  --frame-base: var(--ct-border-strong);  
  --frame-shadow: none;

  --fs-h1: clamp(2.25rem, 1.5rem + 2.6vw, var(--ct-text-display-size));
  --fs-h2: clamp(1.5rem, 1.3rem + 0.8vw, var(--ct-text-h2-size));
  --fs-h3: var(--ct-text-h3-size);
  --fs-lead: var(--ct-text-body-lg-size);
  --fs-body: var(--ct-text-body-size);
  --fs-small: var(--ct-text-small-size);
  --fs-label: var(--ct-text-label-size);
  --lh-h1: 1.07; --lh-h2: 1.21; --lh-h3: 1.36; --lh-lead: 1.58; --lh-body: 1.59;
  --track-h1: var(--ct-text-display-tracking); --track-h2: 0; --track-h3: 0;
  --track-label: var(--ct-text-label-tracking);
  --wt-heading: var(--ct-text-display-weight);   
  --wt-subheading: var(--ct-text-h2-weight);     

  --radius-chip: var(--ct-radius-sm);   
  --radius: var(--ct-radius-md);        
  --radius-btn: var(--ct-radius-md);
  --radius-lg: var(--ct-radius-lg);     
  --container: var(--ct-layout-content-max);
  --measure: var(--ct-layout-text-max); --measure-wide: 78ch;
  --gap: clamp(1rem, 2vw, 1.5rem);
  --section-y: clamp(3.5rem, 7vw, 6rem);
  --settle: var(--ct-motion-duration-settle) var(--ct-motion-ease-settle);
  --quick: var(--ct-motion-duration-quick) var(--ct-motion-ease-settle);
}

:root[data-theme="light"] {
  --certsign-tile: var(--ct-certsign-red);
  --certsign-s: var(--ct-light-surface);
  --certsign-word: var(--ct-certsign-red);
}