/* Proto-owned homepage design tokens. Shared workspace tokens are not consumed. */

:root {
  --proto-paper: #f2f0ee;
  --proto-paper-raised: #faf9f7;
  --proto-paper-deep: #e7e3df;
  --proto-surface: #ffffff;
  --proto-ink: #1d1c1a;
  --proto-ink-soft: #3f3d39;
  --proto-muted: #6d6964;
  --proto-faint: #918c86;
  --proto-line: rgba(29, 28, 26, 0.14);
  --proto-line-strong: rgba(29, 28, 26, 0.28);
  --proto-brand: #7847eb;
  --proto-brand-soft: #ede7fb;
  --proto-success: #0f7a3d;
  --proto-warning: #a05a00;
  --proto-dark: #171614;
  --proto-dark-surface: #242220;
  --proto-dark-line: rgba(255, 255, 255, 0.16);
  --proto-dark-muted: #aaa59f;
  --proto-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --proto-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --proto-shell: 1440px;
  --proto-viewport-safe-left: env(safe-area-inset-left, 0px);
  --proto-viewport-safe-right: env(safe-area-inset-right, 0px);
  --proto-gutter: max(
    clamp(20px, 4vw, 64px),
    var(--proto-viewport-safe-left),
    var(--proto-viewport-safe-right)
  );
  --proto-section-space: clamp(96px, 13vw, 200px);
  --proto-radius-sm: 8px;
  --proto-radius: 14px;
  --proto-radius-lg: 24px;
  --proto-shadow: 0 26px 80px rgba(45, 37, 31, 0.12);
}

:root {
  --proto-beige-50: oklch(98.2% 0.0054 82);
  --proto-beige-100: oklch(97% 0.0065 82);
  --proto-beige-200: oklch(94.5% 0.01 82);
  --proto-beige-300: oklch(91% 0.012 81.5);
  --proto-beige-400: oklch(86% 0.014 81);
  --proto-beige-500: oklch(69% 0.032 78);
  --proto-beige-600: oklch(54% 0.036 78);
  --proto-beige-700: oklch(42% 0.028 78);
  --proto-beige-800: oklch(34% 0.012 79);
  --proto-beige-900: oklch(24% 0.01 78.5);
  --proto-beige-950: oklch(16% 0.008 78);
  --proto-ink-deep: oklch(15% 0.012 78);
  --proto-ink-mid: oklch(41% 0.008 78);
  --proto-ink-muted: oklch(44% 0.008 78);
  --proto-tacet-orange: oklch(69% 0.19 56);
  --proto-tacet-orange-on-light: oklch(47% 0.18 56);
  --proto-pur: oklch(66% 0.18 287);

  --proto-background: var(--proto-beige-50);
  --proto-foreground: var(--proto-ink-deep);
  --proto-card: var(--proto-background);
  --proto-surface-bright: var(--proto-beige-100);
  --proto-secondary: var(--proto-beige-200);
  --proto-muted-background: var(--proto-beige-200);
  --proto-muted-foreground: var(--proto-ink-muted);
  --proto-border: var(--proto-beige-300);
  --proto-border-strong: var(--proto-beige-400);
  --proto-surface-container: var(--proto-beige-200);
  --proto-surface-invert: var(--proto-beige-900);
  --proto-on-invert: var(--proto-beige-50);
  --proto-diagram-core-surface: var(--proto-beige-950);
  --proto-diagram-core-foreground: var(--proto-beige-50);
  --proto-diagram-core-muted: var(--proto-beige-400);
  --proto-diagram-core-border: color-mix(in oklch, var(--proto-beige-500), transparent 68%);
  --proto-boundary-source-surface: color-mix(in oklch, var(--proto-beige-100), var(--proto-beige-300) 30%);
  --proto-boundary-source-border: color-mix(in oklch, var(--proto-beige-300), var(--proto-beige-500) 18%);
  --proto-boundary-destination-surface: color-mix(in oklch, var(--proto-beige-50), var(--proto-beige-200) 22%);
  --proto-boundary-destination-border: var(--proto-beige-300);
  --proto-boundary-trace: color-mix(in oklch, var(--proto-brand), var(--proto-beige-500) 64%);

  --proto-paper: var(--proto-background);
  --proto-paper-raised: var(--proto-beige-100);
  --proto-paper-deep: var(--proto-beige-200);
  --proto-surface: var(--proto-card);
  --proto-ink: var(--proto-foreground);
  --proto-ink-soft: var(--proto-ink-mid);
  --proto-muted: var(--proto-muted-foreground);
  --proto-faint: var(--proto-beige-600);
  --proto-line: var(--proto-border);
  --proto-line-strong: var(--proto-border-strong);
  --proto-brand: var(--proto-tacet-orange-on-light);
  --proto-brand-soft: color-mix(in oklch, var(--proto-tacet-orange), transparent 86%);
  --proto-dark: var(--proto-surface-invert);
  --proto-dark-surface: var(--proto-beige-800);
  --proto-dark-line: color-mix(in oklch, var(--proto-beige-200), transparent 76%);
  --proto-dark-muted: var(--proto-beige-400);

  --proto-font-heading: "Clash Grotesk", system-ui, sans-serif;
  --proto-font-heading-weight: 900;
  --proto-font-body: "Supreme", system-ui, sans-serif;
  --proto-font-mono: "Office Code Pro", ui-monospace, monospace;
  --proto-font-sans: var(--proto-font-body);
  --proto-shell: 90rem;
  --proto-navigation-rest-width: min(calc((100vw - 2rem) * 0.9), 25rem);
  --proto-navigation-sticky-width: min(calc((100vw - 2rem) * 0.88), 25rem);
  --proto-gutter: max(
    clamp(1.25rem, 4vw, 4rem),
    var(--proto-viewport-safe-left),
    var(--proto-viewport-safe-right)
  );
  --proto-section-space: clamp(6rem, 11vw, 10rem);
  --proto-radius-full: 9999px;
  --proto-duration-fast: 140ms;
  --proto-duration-normal: 240ms;
  --proto-duration-signature: 640ms;
  --proto-duration-cinema: 1800ms;
  --proto-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --proto-ease-signature: cubic-bezier(0.22, 1, 0.36, 1);
  --proto-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --proto-ease-expo-in-out: cubic-bezier(0.87, 0, 0.13, 1);
  --proto-space-2: 0.5rem;
  --proto-space-3: 0.75rem;
  --proto-space-4: 1rem;
  --proto-space-6: 1.5rem;
  --proto-ring: var(--proto-tacet-orange);

  --proto-footer-highlight: var(--proto-beige-50);
  --proto-footer-tacet-bg-light: #fbfbf8;
  --proto-footer-tacet-bg-soft-light: #f3f4f1;
  --proto-footer-tacet-bg-lift-light: #fff;
  --proto-footer-tacet-ink-light: #687080;
  --proto-footer-tacet-ink-strong-light: #172033;
  --proto-footer-tacet-ink-muted-light: #687080;
  --proto-footer-tacet-rule-light: #dbe1eb;
  --proto-footer-wordmark-outline: color-mix(in oklch, var(--proto-footer-tacet-ink-light), transparent 52%);
  --proto-footer-wordmark-glow-core: color-mix(in oklch, var(--proto-beige-300), var(--proto-beige-400) 28%);
  --proto-footer-wordmark-glow-mid: color-mix(in oklch, var(--proto-beige-400), var(--proto-tacet-orange) 5%);
  --proto-footer-wordmark-glow-edge: color-mix(in oklch, var(--proto-beige-500), transparent 84%);
  --proto-footer-wordmark-glow-radius: 16rem;
  --proto-footer-tacet-bg-dark: var(--proto-beige-800);
  --proto-footer-tacet-bg-soft-dark: color-mix(in oklch, var(--proto-beige-800), var(--proto-beige-900) 36%);
  --proto-footer-tacet-bg-lift-dark: color-mix(in oklch, var(--proto-beige-700), var(--proto-beige-800) 48%);
  --proto-footer-tacet-ink-dark: var(--proto-beige-300);
  --proto-footer-tacet-ink-strong-dark: var(--proto-beige-100);
  --proto-footer-tacet-ink-muted-dark: color-mix(in oklch, var(--proto-beige-300), transparent 24%);
  --proto-footer-tacet-rule-dark: color-mix(in oklch, var(--proto-beige-300), transparent 72%);
  --proto-footer-tacet-backdrop-dark: radial-gradient(ellipse 58% 48% at 10% 100%, color-mix(in oklch, var(--proto-beige-700), transparent 68%) 0%, color-mix(in oklch, var(--proto-beige-800), transparent 82%) 38%, transparent 76%);
  --proto-footer-rich-surface-shadow: inset 0 1px 0 color-mix(in oklch, var(--proto-footer-highlight), transparent 80%), 0 -1rem 2.25rem -1.5rem rgb(18 15 12 / 20%);
  --proto-footer-main-seam-shadow: 0 1.25rem 3rem rgb(18 15 12 / 16%);
  --proto-footer-toggle-track-shadow: inset 0 1px 1px rgb(18 15 12 / 18%), 0 1px 0 color-mix(in oklch, var(--proto-footer-highlight), transparent 88%);
  --proto-footer-toggle-thumb-shadow: 0 0.45rem 0.85rem -0.25rem rgb(18 15 12 / 32%), inset 0 1px 0 color-mix(in oklch, var(--proto-footer-highlight), transparent 72%);
}

@media (min-width: 64rem) {
  :root {
    --proto-navigation-rest-width: min(calc((100vw - 2rem) * 0.985), 70rem);
    --proto-navigation-sticky-width: min(calc((100vw - 2rem) * 0.88), 70rem);
  }
}

@media (max-width: 39.99rem) {
  :root {
    --proto-navigation-rest-width: min(calc((100vw - 1.5rem) * 0.9), 25rem);
    --proto-navigation-sticky-width: min(calc((100vw - 1.5rem) * 0.88), 25rem);
  }
}

html.dark {
  --proto-background: var(--proto-beige-900);
  --proto-foreground: var(--proto-beige-200);
  --proto-card: var(--proto-background);
  --proto-surface-bright: var(--proto-beige-800);
  --proto-secondary: var(--proto-beige-950);
  --proto-muted-background: var(--proto-beige-800);
  --proto-muted-foreground: var(--proto-beige-400);
  --proto-border: var(--proto-beige-800);
  --proto-border-strong: var(--proto-beige-700);
  --proto-surface-container: var(--proto-beige-800);
  --proto-surface-invert: var(--proto-beige-200);
  --proto-on-invert: var(--proto-ink-deep);
  --proto-boundary-source-surface: color-mix(in oklch, var(--proto-beige-800), var(--proto-beige-700) 24%);
  --proto-boundary-source-border: color-mix(in oklch, var(--proto-beige-700), var(--proto-beige-500) 16%);
  --proto-boundary-destination-surface: color-mix(in oklch, var(--proto-beige-900), var(--proto-beige-800) 42%);
  --proto-boundary-destination-border: color-mix(in oklch, var(--proto-beige-800), var(--proto-beige-700) 22%);
  --proto-boundary-trace: color-mix(in oklch, var(--proto-brand), var(--proto-beige-500) 60%);
  --proto-tacet-orange-on-light: var(--proto-tacet-orange);
  --proto-paper-raised: var(--proto-beige-800);
  --proto-paper-deep: var(--proto-beige-950);
  --proto-ink-soft: var(--proto-beige-400);
  --proto-faint: var(--proto-beige-500);
  --proto-brand: var(--proto-tacet-orange);
  --proto-brand-soft: color-mix(in oklch, var(--proto-tacet-orange), transparent 82%);
  --proto-dark: var(--proto-beige-950);
  --proto-dark-surface: var(--proto-beige-900);
  --proto-dark-muted: var(--proto-beige-400);
  --proto-footer-wordmark-outline: color-mix(in oklch, var(--proto-footer-tacet-ink-dark), transparent 52%);
  --proto-footer-wordmark-glow-core: color-mix(in oklch, var(--proto-beige-400), transparent 48%);
  --proto-footer-wordmark-glow-mid: color-mix(in oklch, var(--proto-beige-500), transparent 66%);
  --proto-footer-wordmark-glow-edge: color-mix(in oklch, var(--proto-beige-600), transparent 88%);
  --proto-footer-main-seam-shadow:
    0 1px 0 color-mix(in oklch, var(--proto-beige-200), transparent 84%),
    0 1.35rem 2rem -0.9rem rgb(0 0 0 / 82%);
}

:root {
  --proto-radius-xs: 0.125rem;
  --proto-radius-sm: 0.25rem;
  --proto-radius-md: 0.375rem;
  --proto-radius-lg: 0.5rem;
  --proto-radius-xl: 0.75rem;
  --proto-radius: var(--proto-radius-lg);
  --proto-surface-dim: var(--proto-beige-100);
  --proto-darker: var(--proto-beige-100);
  --proto-text-m: var(--proto-ink-mid);
  --proto-org: var(--proto-tacet-orange);
  --proto-org-on-light: var(--proto-tacet-orange-on-light);
  --proto-tacet-panel-border: var(--proto-border);
  --proto-tacet-visible-rail: min(calc(100% - (2 * var(--proto-gutter))), 84rem);
  --proto-tacet-shadow-xs: 0 0.25rem 0.9rem -0.7rem rgb(18 15 12 / 22%);
  --proto-tacet-shadow-sm: 0 0.85rem 2.5rem -2rem rgb(18 15 12 / 34%);
  --proto-tacet-shadow-md: 0 1.4rem 4rem -2.7rem rgb(18 15 12 / 38%);
}

html.dark {
  --proto-surface-dim: var(--proto-beige-950);
  --proto-darker: var(--proto-beige-950);
  --proto-text-m: var(--proto-beige-400);
}