/* Seenlark x fin.ai design tokens
 * Values measured from fin.ai computed styles and declared :root custom properties
 * (run /workspace/dse/runs/fin.ai-2026-11-12/, measured 2026-11-12).
 * Token NAMES are ours. Do not reuse fin.ai logos, photographs, video, or copy.
 * Fonts: Saans, Serrif, SaansMono, MediumLL, IvoryLL, AeonikFono are commercial.
 * The @font-face rules below load FREE SUBSTITUTES (Inter, Newsreader, IBM Plex Mono,
 * Fraunces) with metric compensation. If Alek licenses the originals, replace the
 * family names and remove the size/tracking compensation in DESIGN-SYSTEM.md.
 */

/* ---------- substitutes (SIL OFL) ---------- */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: Newsreader;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/newsreader:vf@latest/latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-mono@latest/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: Fraunces;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/fraunces:vf@latest/latin-wght-normal.woff2") format("woff2-variations");
}

:root {
  /* Color: paper / light surfaces */
  --color-paper: #faf9f6;
  --color-white: #ffffff;
  --color-chalk: #f1eee9;
  --color-cream: #f4f3ec;
  --color-cream-dark: #eae6dc;
  --color-canvas: #e7e3db;
  --color-clay: #d3cec6;
  --color-linen: #dedbd6;
  --color-beige: #d0cfc7;
  --color-beige-light: #e6e6e5;
  --color-blueprint-pale: #f3f9ff;
  --color-blueprint-off-white: #f8f8f8;

  /* Ink scale */
  --color-ink: #000000;
  --color-ink-off: #111111;
  --color-ink-90: #191919;
  --color-ink-80: #313130;
  --color-ink-70: #4a4a49;
  --color-ink-60: #626260;
  --color-ink-50: #7b7b78;
  --color-ink-40: #949491;
  --color-ink-30: #acaca8;
  --color-ink-20: #c5c5c1;
  --color-ink-10: #ddddd8;
  --color-ink-05: #e9e9e5;

  --color-text: #000000;
  --color-text-80: oklab(0 0 0 / 0.8);
  --color-text-70: oklab(0 0 0 / 0.7);
  --color-text-60: oklab(0.177637 0.00000810623 0.00000356138 / 0.6);
  --color-text-50: oklab(0.177637 0.00000810623 0.00000356138 / 0.5);
  --color-text-30: color-mix(in oklab, #000 30%, transparent);
  --color-blueprint-body: #515151;

  /* Accent. Alek chose Seenlark cobalt (2026-11-12). Single swap token: --accent.
     To restore fin.ai orange, set --accent: #ff5600 and re-derive tints (orange on
     paper is ≈3.3:1 — large figures only). Cobalt on paper ≈7.58:1 (AA small text);
     white on cobalt ≈7.98:1 (AAA). Cobalt on dark-screen ≈2.5:1 — FAIL; use
     --accent-on-dark (#646ce3, ≥4.5:1) on #020917. */
  --accent: #2b36d9;
  --color-accent: var(--accent);
  --accent-hover: #222aa9;
  --accent-tint: #dddef2;
  --accent-tint-strong: #c0c2ee;
  --accent-on-dark: #646ce3;
  /* Lighter than --accent-on-dark so 11px text stays ≥4.5:1 on the lifted
     pricing sky and elevated cards (the base token is calibrated to #020917). */
  --accent-on-dark-text: #8a91ed;
  --color-seenlark-cobalt: #2b36d9;
  --color-fin-orange: #ff5600; /* kept for reference; do not use as the accent */

  /* Buttons (declared --button-*) */
  --button-height: 2.5rem;
  --button-padding-x: 0.875rem;
  --button-radius: 0.25rem;
  --button-primary-background: #111;
  --button-primary-foreground: #fff;
  --button-primary-hover-background: #0007cb;
  --button-primary-hover-foreground: #fff;
  --button-primary-hover-border: color-mix(in oklab, #000 80%, transparent);
  --button-primary-active-background: color-mix(in oklab, #0007cb 85%, transparent);
  --button-primary-active-foreground: #fff;
  --button-primary-disabled-background: color-mix(in oklab, #000 30%, transparent);
  --button-primary-disabled-foreground: #fff;
  --button-secondary-background: transparent;
  --button-secondary-foreground: #111;
  --button-secondary-border: #111;
  --button-secondary-hover-background: transparent;
  --button-secondary-hover-foreground: color-mix(in oklab, #111 75%, transparent);
  --button-secondary-hover-border: color-mix(in oklab, #111 75%, transparent);
  --button-secondary-active-background: color-mix(in oklab, #111 2%, transparent);
  --button-secondary-active-foreground: #000;
  --button-secondary-disabled-background: transparent;
  --button-secondary-disabled-border: color-mix(in oklab, #000 30%, transparent);
  --button-secondary-disabled-foreground: color-mix(in oklab, #000 30%, transparent);



  /* Blueprint blues */
  --color-blueprint-core: #0007cb;
  --color-blueprint-blue: #0037fb;
  --color-blueprint-rich: #004bfe;
  --color-blueprint-dark: #000f83;
  --color-blueprint-black: #000740;
  --color-blueprint-light: #cde5ff;
  --color-blueprint-soft: #add4ff;
  --color-focus: #000ce1;

  /* Dark theme (pricing) */
  --color-dark-screen: #020917;
  --color-dark-midnight: #020918;
  --color-dark-lift: #0b162a;
  --color-dark-elevated: #080f1e;
  --color-dark-elevated-soft: #101a2c;
  --color-dark-highlight: #151b29;
  --color-dark-overlay: color-mix(in oklab, #020917 80%, transparent);
  --color-dark-blue-light: #0f182b;
  --color-content-on-dark: #fff;
  --color-content-on-dark-80: #cecfd2;
  --color-content-on-dark-60: #9c9fa5;
  --color-content-on-dark-50: #84878f;
  --color-white-90: #e6e7e8;
  --color-white-70: #b4b7bb;
  --color-white-40: #6b6f78;
  --color-white-30: #535762;
  --color-white-20: #393f4b;
  --color-white-10: #212735;

  /* Semantic */
  --color-error: #c41c1c;
  --color-success-bright: #6ad36d;
  --color-success-deep: #2f5711;
  --color-warning: #edc843;
  --color-flag: #ff6b6b;
  --color-voice-accent: #b9fe6f;
  --color-voice-green: #37b54a;
  --color-operator: #441572;
  --color-ecom: #2f6a5e;
  --color-ecom-accent: #e2f947;
  --color-sales: #055895;
  --color-sales-accent: #a3b3ff;

  /* Borders */
  --color-border: oklab(0 0 0 / 0.1);
  --color-border-off: oklab(0.177637 0.00000810623 0.00000356138 / 0.1);
  --color-border-15: oklab(0 0 0 / 0.15);
  --color-border-20: oklab(0.177637 0.00000810623 0.00000356138 / 0.2);
  --color-border-07: oklab(0.177637 0.00000810623 0.00000356138 / 0.07);
  --color-border-ink: #111111;
  --color-nav-border: color-mix(in oklab, #000 50%, transparent);
  --color-nav-hover: color-mix(in oklab, #000 10%, transparent);
  --color-nav-content-secondary: color-mix(in oklab, #000 80%, transparent);
  --color-nav-content-tertiary: color-mix(in oklab, #000 60%, transparent);
  --color-nav-background: #fff;
  --color-nav-background-highlight: #f1eee9;
  --color-overlay-20: oklab(0 0 0 / 0.2);
  --color-overlay-80: oklab(0 0 0 / 0.8);

  /* Type families: FREE SUBSTITUTES. Swap to Saans/Serrif/SaansMono if licensed. */
  --font-sans: Inter, "Inter Fallback", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;
  --font-serif: Newsreader, "Newsreader Fallback", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", ui-serif, Georgia, serif;
  --font-serif-condensed: Fraunces, "Fraunces Fallback", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", ui-serif, Georgia, serif;
  --font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
  --font-fallback-jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP";
  --font-fallback-jp-serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP";

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Declared type scale (desktop). Heading 1/2 weight 300 is measured Serrif Light;
     the source declared 400 but ships the Light file. */
  --text-heading-1: 6.25rem;
  --text-heading-1--line-height: 0.9;
  --text-heading-1--letter-spacing: -0.25rem;
  --text-heading-1--font-weight: 300;
  --text-heading-2: 5rem;
  --text-heading-2--line-height: 1;
  --text-heading-2--letter-spacing: -0.15rem;
  --text-heading-2--font-weight: 300;
  --text-heading-3: 3.375rem;
  --text-heading-3--line-height: 1;
  --text-heading-3--letter-spacing: -0.1rem;
  --text-heading-3--font-weight: 400;
  --text-heading-4: 2.5rem;
  --text-heading-4--line-height: 1;
  --text-heading-4--letter-spacing: -0.075rem;
  --text-heading-5: 1.5rem;
  --text-heading-5--line-height: 1;
  --text-heading-5--letter-spacing: -0.03rem;
  --text-heading-6: 1.25rem;
  --text-heading-6--line-height: 1.2;
  --text-heading-6--letter-spacing: -0.0125rem;
  --text-callout: 1.75rem;
  --text-callout--line-height: 1;
  --text-callout--letter-spacing: -0.06rem;
  --text-body-xl: 1.6rem;
  --text-body-xl--line-height: 1.15;
  --text-body-xl--letter-spacing: -0.05rem;
  --text-body-lg: 1.125rem;
  --text-body-lg--line-height: 1.4;
  --text-body-lg--letter-spacing: -0.01em;
  --text-body: 1rem;
  --text-body--line-height: 1.4;
  --text-body-sm: 0.875rem;
  --text-body-sm--line-height: 1.4;
  --text-button-lg: 1rem;
  --text-button-lg--line-height: 1.1;
  --text-button-lg--letter-spacing: -0.01rem;
  --text-button-sm: 0.875rem;
  --text-button-sm--line-height: 1.1;
  --text-label: 0.75rem;
  --text-label--line-height: 1;
  --text-label--letter-spacing: 0.0375rem;
  --text-label-11: 11px;
  --text-label-11--line-height: 13.75px;
  --text-label-11--letter-spacing: 0.96px;
  --text-nav: 14px;
  --text-nav--line-height: 13.132px;
  --text-nav--letter-spacing: -0.096px;

  /* Inter tracking compensation vs Saans (drop if licensing Saans) */
  --tracking-sans-body: -0.011em;
  --tracking-sans-body-lg: -0.02em;
  --tracking-sans-body-sm: -0.006em;
  --tracking-sans-button: -0.01em;
  --tracking-sans-heading: -0.035em;
  /* Newsreader size compensation vs Serrif 100px (drop if licensing Serrif) */
  --text-heading-1-substitute: 6.5rem;
  --text-heading-1-substitute--line-height: 0.9;
  --text-heading-1-substitute--letter-spacing: -0.045em;

  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --tracking-tight: -0.02em;
  --tracking-tighter: -0.05em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* Space: declared base 4px (--spacing: .25rem); 2px half-step is also frequent */
  --spacing: 0.25rem;
  --space-px: 1px;
  --space-0_5: 2px;
  --space-1: 4px;
  --space-1_5: 6px;
  --space-2: 8px;
  --space-2_5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;
  --space-36: 144px;
  --space-40: 160px;
  --space-48: 192px;
  --space-56: 224px;
  --space-64: 256px;

  /* Radius */
  --radius-none: 0px;
  --radius-px: 1px;
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-button: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-4xl: 2rem;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-sculpture: 0 10px 84px rgba(0, 0, 0, 0.75);
  --shadow-product: 3.68px 2.352px 31.52px rgba(0, 0, 0, 0.15);
  --shadow-orange: inset 0 -1em 0 0 var(--accent);
  --shadow-accent: inset 0 -1em 0 0 var(--accent);
  --shadow-orange-mobile: inset 0 -1.1em 0 0 var(--accent);
  --shadow-accent-mobile: inset 0 -1.1em 0 0 var(--accent);

  /* Breakpoints / container */
  --breakpoint-xs: 400px;
  --breakpoint-sm: 500px;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 96rem;
  --breakpoint-3xl: 120rem;
  --container-screen: 1920px;
  --container-footer: 1600px;
  --container-wide: 1240px;
  --container-content: 768px;
  --container-narrow: 672px;
  --container-prose: 720px;
  --container-ask: 324px;

  /* Z-index */
  --z-below: -1;
  --z-base: 1;
  --z-raised: 10;
  --z-ask: 500;
  --z-nav-submenu: 990;
  --z-nav-menu: 999;
  --z-nav: 1000;
  --z-nav-tooltip: 1001;
  --z-modal: 1110;
  --z-modal-control: 1200;
  --z-modal-top: 5000;

  /* Motion */
  --duration-default: 0.15s;
  --duration-300: 0.3s;
  --duration-500: 0.5s;
  --duration-660: 0.66s;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --animate-marquee: animateMarquee 60s linear infinite;

  --blur-xs: 4px;
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --blur-2xl: 40px;

  /* Selection: computed was a capture artifact (transparent). Class is selection:bg-off-black. */
  --selection-color: #faf9f6;
  --selection-bg: #111111;
}

@media (max-width: 1023px) {
  :root {
    --text-heading-1: 5rem;
    --text-heading-1--line-height: 1;
    --text-heading-1--letter-spacing: -0.15rem;
    --text-heading-1-substitute: 5.125rem;
    --text-heading-2: 4rem;
    --text-heading-2--line-height: 0.95;
    --text-heading-2--letter-spacing: -0.12rem;
    --text-heading-3: 2.5rem;
    --text-heading-3--letter-spacing: -0.075rem;
    --text-heading-4: 1.75rem;
    --text-heading-4--letter-spacing: -0.053rem;
    --text-body-xl: 1.25rem;
    --text-body-xl--line-height: 1.1;
    --text-body-xl--letter-spacing: -0.0375rem;
    --text-callout: 1.5rem;
    --text-callout--letter-spacing: -0.045rem;
  }
}
@media (max-width: 767px) {
  :root {
    --text-heading-1: 3rem;
    --text-heading-1--line-height: 1;
    --text-heading-1--letter-spacing: -0.09rem;
    --text-heading-1-substitute: 3.125rem;
    --text-heading-2: 2.5rem;
    --text-heading-2--line-height: 0.95;
    --text-heading-2--letter-spacing: -0.075rem;
    --text-heading-3: 1.875rem;
    --text-heading-3--letter-spacing: -0.06rem;
    --text-heading-4: 1.375rem;
    --text-heading-4--line-height: 1.1;
    --text-heading-4--letter-spacing: -0.04rem;
    --text-heading-5: 1.25rem;
    --text-heading-5--letter-spacing: -0.025rem;
    --text-heading-6: 1.125rem;
    --text-heading-6--letter-spacing: -0.01rem;
    --text-body-xl: 1.125rem;
    --text-body-lg: 1rem;
    --text-callout: 1.5rem;
  }
}

::selection {
  color: var(--selection-color);
  background-color: var(--selection-bg);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroBlurFade {
  from { opacity: 0; filter: blur(8px); }
  to   { opacity: 1; filter: blur(0); }
}
@keyframes heroHeadlineReveal {
  from { opacity: 0; filter: blur(8px); mask-position: 100% center; }
  to   { opacity: 1; filter: blur(0); mask-position: 0 center; }
}
@keyframes headerSlideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
@keyframes carouselAutoplay {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes animateMarquee {
  from { transform: translate(0); }
  to   { transform: translate(calc(-50% - 18px)); }
}
@keyframes pulse-ring {
  from { transform: scale(1); }
  to   { opacity: 0; transform: scale(1.75); }
}
@keyframes pulse-ring-2 {
  from { transform: scale(1); }
  to   { opacity: 0; transform: scale(2.5); }
}
@keyframes aurora-glow-inhale {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
@keyframes aurora-glow-exhale {
  0%, 100% { transform: scale(1.02); }
  50%      { transform: scale(0.98); }
}
@keyframes aurora-glow-drift-a {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(1.6%, -1.2%); }
  50%  { transform: translate(-1.2%, -0.4%); }
  75%  { transform: translate(-1.6%, -1.4%); }
  100% { transform: translate(0, 0); }
}
@keyframes aurora-glow-drift-b {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-1.8%, 0.8%); }
  66%  { transform: translate(1.5%, -1%); }
  100% { transform: translate(0, 0); }
}