/* Sayla v3 Design System — generated from tokens.json */
:root, [data-theme="paper"] {
  --color-primary-base: oklch(34.1% 0.198 280.8);
  --color-primary-dark: oklch(24.5% 0.149 279.2);
  --color-primary-light: oklch(56.3% 0.199 280.8);
  --color-primary-bright: oklch(68.8% 0.159 281.0);
  --color-secondary-base: oklch(58% 0.091 96.4);
  --color-secondary-dark: oklch(39.5% 0.073 96.3);
  --color-secondary-light: oklch(72.4% 0.087 96.0);
  --color-secondary-bright: oklch(80.3% 0.071 96.0);
  --color-accent-base: oklch(82.3% 0.126 62.3);
  --color-accent-dark: oklch(42.1% 0.098 60.4);
  --color-accent-light: oklch(86.9% 0.106 72.5);
  --color-accent-bright: oklch(93% 0.077 85.9);
  --color-background: oklch(99% 0.006 100.0);
  --color-foreground: oklch(20.5% 0.019 93.4);
  --color-white: #ffffff;
  --color-theme-authority: var(--color-primary-base);
  --color-theme-authority-strong: var(--color-primary-dark);
  --color-theme-gold: var(--color-secondary-base);
  --color-theme-gold-text: oklch(48.8% 0.082 96.3);
  --color-theme-accent: var(--color-accent-base);
  --color-theme-accent-soft: var(--color-accent-light);
  --color-theme-accent-display: oklch(59.8% 0.110 61.2);
  --color-theme-grounding: var(--color-foreground);
  --color-theme-grounding-raised: oklch(28.3% 0.018 94.1);
  --color-theme-on-grounding: var(--color-background);
  --color-theme-on-grounding-muted: oklch(92.1% 0.027 99.0);
  --color-theme-on-authority: var(--color-background);
  --color-theme-on-authority-muted: oklch(93.6% 0.034 67.8);
  --color-theme-surface: var(--color-background);
  --color-theme-surface-subtle: oklch(97.5% 0.011 99.7);
  --color-theme-surface-tonal: oklch(95.6% 0.018 99.3);
  --color-theme-surface-strong: oklch(91% 0.030 98.8);
  --color-theme-text-primary: var(--color-foreground);
  --color-theme-text-secondary: oklch(24.6% 0.073 41.6);
  --color-theme-base-50: oklch(95.9% 0.007 99.7);
  --color-theme-base-100: oklch(91.1% 0.007 99.3);
  --color-theme-base-200: oklch(84.9% 0.008 98.8);
  --color-theme-base-300: oklch(77% 0.010 98.2);
  --color-theme-base-400: oklch(66% 0.011 97.2);
  --color-theme-base-500: oklch(55.8% 0.013 96.4);
  --color-theme-base-600: oklch(47.2% 0.015 95.6);
  --color-theme-base-700: oklch(40.9% 0.016 95.1);
  --color-theme-base-800: oklch(34.6% 0.017 94.6);
  --color-theme-base-900: oklch(28.3% 0.018 94.1);
  --color-theme-base-950: var(--color-foreground);
  --color-theme-success: oklch(46% 0.110 150.0);
  --color-theme-success-soft: oklch(95.5% 0.035 150.0);
  --color-theme-success-line: oklch(80% 0.070 150.0);
  --color-theme-success-bright: oklch(84% 0.120 150.0);
  --color-theme-success-deep: oklch(31% 0.060 155.0);
  --color-theme-info: oklch(46% 0.100 240.0);
  --color-theme-info-soft: oklch(95.5% 0.025 235.0);
  --color-theme-info-line: oklch(80% 0.060 237.0);
  --color-theme-info-bright: oklch(84% 0.080 235.0);
  --color-theme-info-deep: oklch(31% 0.060 240.0);
  --color-theme-warning: oklch(48% 0.105 65.0);
  --color-theme-warning-soft: oklch(95.5% 0.040 80.0);
  --color-theme-warning-line: oklch(82% 0.090 75.0);
  --color-theme-warning-bright: oklch(86% 0.110 80.0);
  --color-theme-warning-deep: oklch(33% 0.060 65.0);
  --color-theme-error: oklch(48% 0.160 27.0);
  --color-theme-error-soft: oklch(95.5% 0.025 20.0);
  --color-theme-error-line: oklch(80% 0.080 22.0);
  --color-theme-error-bright: oklch(82% 0.090 22.0);
  --color-theme-error-deep: oklch(32% 0.080 25.0);
  --color-theme-tint-sage: oklch(88% 0.040 150.0);
  --color-theme-tint-sky: oklch(88% 0.040 235.0);
  --color-brand-linkedin: #0a66c2;
  --color-brand-google-blue: #4285f4;
  --color-brand-google-green: #34a853;
  --color-brand-google-yellow: #fbbc05;
  --color-brand-google-red: #ea4335;
  --color-surface: var(--color-theme-surface);
  --color-on-surface: var(--color-theme-text-primary);
  --color-on-surface-muted: var(--color-theme-text-secondary);
  --color-surface-raised: var(--color-white);
  --color-surface-field: var(--color-theme-surface);
  --color-surface-line: var(--color-theme-surface-strong);
  --color-surface-eyebrow: var(--color-theme-gold-text);
  --color-surface-accent-display: var(--color-theme-accent-display);
  --color-surface-cta: var(--color-theme-authority);
  --color-surface-cta-hover: var(--color-primary-dark);
  --color-surface-on-cta: var(--color-theme-on-authority);
  --color-surface-plain: var(--color-theme-grounding);
  --color-surface-plain-hover: var(--color-theme-grounding-raised);
  --color-surface-on-plain: var(--color-theme-on-grounding);
  --color-surface-featured: var(--color-secondary-dark);
  --color-surface-featured-hover: oklch(35.7% 0.062 95.7);
  --color-surface-on-featured: var(--color-theme-on-authority);
  --color-surface-featured-line: var(--color-theme-gold-text);
  --color-surface-muted: var(--color-theme-surface-tonal);
  --color-heading-authority: var(--color-theme-authority);
  --color-emphasis-marker: oklch(80.3% 0.071 96.0 / 0.55);
  --color-emphasis-line: var(--color-secondary-base);
  --color-emphasis-tint: oklch(80.3% 0.071 96.0 / 0.55);
  --color-on-emphasis-tint: var(--color-secondary-dark);
  --color-emphasis-text: var(--color-theme-gold-text);
  --color-surface-success: var(--color-theme-success);
  --color-surface-success-soft: var(--color-theme-success-soft);
  --color-surface-success-line: var(--color-theme-success-line);
  --color-surface-info: var(--color-theme-info);
  --color-surface-info-soft: var(--color-theme-info-soft);
  --color-surface-info-line: var(--color-theme-info-line);
  --color-surface-warning: var(--color-theme-warning);
  --color-surface-warning-soft: var(--color-theme-warning-soft);
  --color-surface-warning-line: var(--color-theme-warning-line);
  --color-surface-error: var(--color-theme-error);
  --color-surface-error-soft: var(--color-theme-error-soft);
  --color-surface-error-line: var(--color-theme-error-line);
  --shadow-theme-soft: 0 20px 48px -28px rgba(50, 9, 153, 0.18);
  --shadow-theme-glow: 0 32px 80px -32px rgba(50, 9, 153, 0.28);
  --shadow-theme-deep: 0 28px 64px -36px rgba(0, 0, 0, 0.7);
  --shadow-theme-up: 0 -2px 8px -4px rgba(0, 0, 0, 0.15);
}
[data-theme="authority"] {
  --color-surface: var(--color-theme-authority);
  --color-on-surface: var(--color-theme-on-authority);
  --color-on-surface-muted: var(--color-theme-on-authority-muted);
  --color-surface-raised: var(--color-theme-authority-strong);
  --color-surface-field: var(--color-theme-authority-strong);
  --color-surface-line: oklch(99% 0.006 100.0 / 0.20);
  --color-surface-eyebrow: var(--color-secondary-bright);
  --color-surface-accent-display: var(--color-theme-accent);
  --color-surface-cta: var(--color-theme-accent);
  --color-surface-cta-hover: var(--color-accent-bright);
  --color-surface-on-cta: var(--color-theme-grounding);
  --color-surface-plain: var(--color-theme-on-authority);
  --color-surface-plain-hover: var(--color-theme-base-100);
  --color-surface-on-plain: var(--color-theme-grounding);
  --color-surface-featured: var(--color-secondary-bright);
  --color-surface-featured-hover: oklch(87.8% 0.045 97.6);
  --color-surface-on-featured: var(--color-theme-grounding);
  --color-surface-featured-line: var(--color-secondary-bright);
  --color-surface-muted: var(--color-theme-authority-strong);
  --color-heading-authority: var(--color-theme-on-authority);
  --color-emphasis-marker: oklch(39.5% 0.073 96.3 / 0.85);
  --color-emphasis-line: var(--color-secondary-bright);
  --color-emphasis-tint: oklch(39.5% 0.073 96.3 / 0.80);
  --color-on-emphasis-tint: var(--color-secondary-bright);
  --color-emphasis-text: var(--color-secondary-bright);
  --color-surface-success: var(--color-theme-success-bright);
  --color-surface-success-soft: var(--color-theme-success-deep);
  --color-surface-success-line: oklch(52.2% 0.084 153.0);
  --color-surface-info: var(--color-theme-info-bright);
  --color-surface-info-soft: var(--color-theme-info-deep);
  --color-surface-info-line: oklch(52.2% 0.068 238.0);
  --color-surface-warning: var(--color-theme-warning-bright);
  --color-surface-warning-soft: var(--color-theme-warning-deep);
  --color-surface-warning-line: oklch(54.2% 0.080 71.0);
  --color-surface-error: var(--color-theme-error-bright);
  --color-surface-error-soft: var(--color-theme-error-deep);
  --color-surface-error-line: oklch(52% 0.084 23.8);
}
[data-theme="grounding"] {
  --color-surface: var(--color-theme-grounding);
  --color-on-surface: var(--color-theme-on-grounding);
  --color-on-surface-muted: var(--color-theme-on-grounding-muted);
  --color-surface-raised: var(--color-theme-grounding-raised);
  --color-surface-field: var(--color-theme-grounding-raised);
  --color-surface-line: oklch(99% 0.006 100.0 / 0.14);
  --color-surface-eyebrow: var(--color-secondary-light);
  --color-surface-accent-display: var(--color-theme-accent);
  --color-surface-cta: var(--color-theme-accent);
  --color-surface-cta-hover: var(--color-accent-bright);
  --color-surface-on-cta: var(--color-theme-grounding);
  --color-surface-plain: var(--color-theme-on-grounding);
  --color-surface-plain-hover: var(--color-theme-base-100);
  --color-surface-on-plain: var(--color-theme-grounding);
  --color-surface-featured: var(--color-secondary-light);
  --color-surface-featured-hover: var(--color-secondary-bright);
  --color-surface-on-featured: var(--color-theme-grounding);
  --color-surface-featured-line: var(--color-secondary-bright);
  --color-surface-muted: var(--color-theme-grounding-raised);
  --color-heading-authority: var(--color-theme-on-grounding);
  --color-emphasis-marker: oklch(39.5% 0.073 96.3 / 0.85);
  --color-emphasis-line: var(--color-secondary-light);
  --color-emphasis-tint: oklch(39.5% 0.073 96.3 / 0.80);
  --color-on-emphasis-tint: var(--color-secondary-bright);
  --color-emphasis-text: var(--color-secondary-light);
  --color-surface-success: var(--color-theme-success-bright);
  --color-surface-success-soft: var(--color-theme-success-deep);
  --color-surface-success-line: oklch(52.2% 0.084 153.0);
  --color-surface-info: var(--color-theme-info-bright);
  --color-surface-info-soft: var(--color-theme-info-deep);
  --color-surface-info-line: oklch(52.2% 0.068 238.0);
  --color-surface-warning: var(--color-theme-warning-bright);
  --color-surface-warning-soft: var(--color-theme-warning-deep);
  --color-surface-warning-line: oklch(54.2% 0.080 71.0);
  --color-surface-error: var(--color-theme-error-bright);
  --color-surface-error-soft: var(--color-theme-error-deep);
  --color-surface-error-line: oklch(52% 0.084 23.8);
}
:root {
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --spacing-28: 7rem;
  --spacing-32: 8rem;
  --spacing-hub-nav: 3.8125rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-theme-button: 0.75rem;
  --radius-theme-card: 1rem;
  --radius-theme-panel: 1.5rem;
  --radius-4xl: 2rem;
  --radius-full: 9999px;
  --container-measure-xs: 14ch;
  --container-measure-sm: 20ch;
  --container-measure-md: 24ch;
  --container-measure-lg: 42ch;
  --container-mini: 36rem;
  --container-narrow: 64rem;
  --container-standard: 80rem;
  --container-wide: 96rem;
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 96rem;
  --tracking-eyebrow: 0.2em;
  --font-weight-eyebrow: 650;
  --leading-display: 0.92;
  --font-display: "Fraunces", Georgia, serif;
  --font-heading: Manrope, system-ui, sans-serif;
  --font-body: Manrope, system-ui, sans-serif;
  --font-quote: Caveat, system-ui, sans-serif;
  --font-mono: "Google Sans Code", ui-monospace, monospace;
}
.display4XL { font-family: var(--font-display); font-size: 96px; line-height: 0.92; font-weight: 400; letter-spacing: -0.025em; }
.display3XL { font-family: var(--font-display); font-size: 72px; line-height: 0.92; font-weight: 400; letter-spacing: -0.025em; }
.display2XL { font-family: var(--font-display); font-size: 60px; line-height: 0.96; font-weight: 400; letter-spacing: -0.025em; }
.displayLG { font-family: var(--font-display); font-size: 48px; line-height: 1.12; font-weight: 400; letter-spacing: -0.025em; }
.displayMD { font-family: var(--font-display); font-size: 36px; line-height: 1.15; font-weight: 400; }
.displaySM { font-family: var(--font-display); font-size: 30px; line-height: 1.2; font-weight: 400; }
.headingXL { font-family: var(--font-heading); font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -0.025em; }
.headingLG { font-family: var(--font-heading); font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -0.025em; }
.headingMD { font-family: var(--font-heading); font-size: 18px; line-height: 1.25; font-weight: 700; }
.headingSM { font-family: var(--font-heading); font-size: 16px; line-height: 1.375; font-weight: 700; }
.headingXS { font-family: var(--font-heading); font-size: 14px; line-height: 1.375; font-weight: 700; }
.textXL { font-family: var(--font-body); font-size: 24px; line-height: 1.5; font-weight: 400; }
.textLG { font-family: var(--font-body); font-size: 20px; line-height: 1.625; font-weight: 400; }
.textBase { font-family: var(--font-body); font-size: 16px; line-height: 1.625; font-weight: 400; }
.textSM { font-family: var(--font-body); font-size: 16px; line-height: 1.5; font-weight: 400; }
.textXS { font-family: var(--font-body); font-size: 14px; line-height: 1.5; font-weight: 400; }
.textFP { font-family: var(--font-body); font-size: 12px; line-height: 1.5; font-weight: 400; }
.eyebrow { font-family: var(--font-body); font-size: 14px; line-height: 1.5; font-weight: 650; letter-spacing: 0.2em; }
.button { font-family: var(--font-body); font-size: 14px; line-height: 1; font-weight: 600; letter-spacing: -0.025em; }
.quote { font-family: var(--font-quote); font-size: 30px; line-height: 1.2; font-weight: 500; }
.code { font-family: var(--font-mono); font-size: 14px; line-height: 1.6; font-weight: 400; }
.print-display { font-family: var(--font-display); font-size: 64px; line-height: 0.96; font-weight: 400; letter-spacing: -0.02em; }
.print-heading { font-family: var(--font-heading); font-size: 30px; line-height: 1.2; font-weight: 700; }
.print-body { font-family: var(--font-body); font-size: 17px; line-height: 1.5; font-weight: 400; }
.print-quote { font-family: var(--font-quote); font-size: 28px; line-height: 1.2; font-weight: 500; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin-standard-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin-standard-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/caveat-latin-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Google Sans Code"; src: url("fonts/google-sans-code-latin-wght-normal.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Google Sans Code"; src: url("fonts/google-sans-code-latin-wght-italic.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }