/* Lythouse design tokens: the single source for landing/, apps/web and Beacon.
   Radius rule: frames and cards are square (0). Buttons, inputs and pills use
   --radius-control (6px); the nav pill is the only full-round shape. */

@font-face {
  font-family: "Archivo";
  src: url("./fonts/archivo-latin-standard-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("./fonts/archivo-latin-standard-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("./fonts/geist-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("./fonts/geist-mono-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Colour: cool neutrals, one accent */
  --color-bg: #f4f5f7;
  --color-surface: #ffffff;
  --color-surface-sunken: #e9ebef;
  --color-ink: #121318;
  --color-ink-muted: #565a66;
  --color-ink-subtle: #646976;
  --color-line: #d6d9e0;
  --color-line-strong: #121318;
  --color-accent: #7c3aed;
  --color-accent-hover: #6d28d9;
  --color-accent-ink: #ffffff;
  --color-accent-text: #6d28d9; /* accent used as text: AA on bg and surface */
  --color-accent-soft: #ede5fd;
  --color-block: #121318; /* the one inverted block: dark on a light page, light on a dark one */
  --color-block-ink: #f4f5f7;
  /* Status: text colours pass AA on their own -soft tint */
  --color-success: #12703a;
  --color-success-soft: #e3f4e8;
  --color-warning: #a15c07;
  --color-warning-soft: #fdf3dc;
  --color-danger: #b42318;
  --color-danger-soft: #fdecea;
  --color-focus: #7c3aed;

  /* Type */
  --font-display: "Archivo", "Arial Narrow", sans-serif;
  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --display-stretch: 62%; /* ExtraCondensed */
  --display-heavy: 900;
  --display-thin: 100;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  --text-4xl: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  --text-5xl: clamp(3rem, 1.6rem + 5.6vw, 6.5rem);
  --text-display: clamp(3.5rem, 1.4rem + 8.4vw, 9.5rem);

  --leading-display: 0.88;
  --leading-tight: 1.15;
  --leading-body: 1.6;
  --tracking-display: -0.01em;

  /* Spacing: 4px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --container: 1400px;

  /* Shape */
  --radius-frame: 0;
  --radius-control: 6px;
  --radius-pill: 999px;
  --frame-width: 10px; /* the signature thick frame */
  --border: 1px;

  /* Elevation: tinted, used sparingly */
  --shadow-lift: 0 18px 40px -18px rgb(18 19 24 / 0.28);

  /* Motion: house eases */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 700ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #0e0f13;
    --color-surface: #16181d;
    --color-surface-sunken: #0a0b0e;
    --color-ink: #eceef2;
    --color-ink-muted: #a3a8b4;
    --color-ink-subtle: #8a8f9c;
    --color-line: #2a2d35;
    --color-line-strong: #eceef2;
    --color-accent: #8b5cf6;
    --color-accent-hover: #a78bfa;
    --color-accent-soft: #241a3d;
    --color-accent-text: #a78bfa;
    --color-block: #e9ebef;
    --color-block-ink: #121318;
    --color-success: #4ade80;
    --color-success-soft: #12291b;
    --color-warning: #fdb022;
    --color-warning-soft: #33260b;
    --color-danger: #f97066;
    --color-danger-soft: #3a1614;
    --color-focus: #a78bfa;
    --shadow-lift: 0 18px 40px -18px rgb(0 0 0 / 0.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0e0f13;
  --color-surface: #16181d;
  --color-surface-sunken: #0a0b0e;
  --color-ink: #eceef2;
  --color-ink-muted: #a3a8b4;
  --color-ink-subtle: #8a8f9c;
  --color-line: #2a2d35;
  --color-line-strong: #eceef2;
  --color-accent: #8b5cf6;
  --color-accent-hover: #a78bfa;
  --color-accent-soft: #241a3d;
  --color-accent-text: #a78bfa;
  --color-block: #e9ebef;
  --color-block-ink: #121318;
  --color-success: #4ade80;
  --color-success-soft: #12291b;
  --color-warning: #fdb022;
  --color-warning-soft: #33260b;
  --color-danger: #f97066;
  --color-danger-soft: #3a1614;
  --color-focus: #a78bfa;
  --shadow-lift: 0 18px 40px -18px rgb(0 0 0 / 0.6);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}