/* ==========================================================================
   Trestle — design tokens.
   Aside's token set (oklch, layered translucent surfaces, hairline rings,
   squircle radii, Geist). Glass is a light touch on floating chrome only.
   The single neomorphic element in the product is the orb.
   ========================================================================== */
@font-face { font-family: "Geist Variable"; font-weight: 100 900; font-display: swap; src: url(../fonts/geist-latin.woff2) format("woff2-variations"); }
@font-face { font-family: "Geist Mono Variable"; font-weight: 100 900; font-display: swap; src: url(../fonts/geist-mono.ttf) format("truetype"); }
@font-face { font-family: "Aside Display"; font-weight: 100 900; font-display: swap; src: url(../fonts/aside-display.woff2) format("woff2-variations"); }

:root {
  --font-sans: "Geist Variable", "Geist", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, monospace;
  --font-display: "Aside Display", var(--font-sans);

  --sky-400: oklch(74.6% .16 232.661); --sky-500: oklch(68.5% .169 237.323); --sky-600: oklch(58.8% .158 241.966);
  --emerald-400: oklch(76.5% .177 163.223); --emerald-500: oklch(69.6% .17 162.48);
  --red-400: oklch(70.4% .191 22.216); --red-600: oklch(57.7% .245 27.325); --red-50: oklch(97.1% .013 17.38);
  --amber-400: oklch(82.8% .189 84.429); --amber-500: oklch(76.9% .188 70.08);
  --violet-400: oklch(71.4% .203 305.504); --violet-500: oklch(60.6% .25 292.717);
  --neutral-100: oklch(97% 0 0); --neutral-800: oklch(26.9% 0 0); --neutral-900: oklch(20.5% 0 0); --neutral-950: oklch(14.5% 0 0);

  --background: #fff; --foreground: var(--neutral-950);
  --popover: var(--background); --popover-foreground: var(--foreground);
  --primary: oklch(14.5% 0 0/.95); --primary-foreground: oklch(98.5% 0 0/.95);
  --secondary: oklch(14.5% 0 0/.08); --secondary-foreground: oklch(14.5% 0 0/.55);
  --muted: oklch(14.5% 0 0/.05); --muted-foreground: oklch(14.5% 0 0/.55);
  --accent: oklch(14.5% 0 0/.1); --accent-foreground: oklch(14.5% 0 0/.85);
  --destructive: var(--red-600); --destructive-foreground: var(--red-50);
  --brand: var(--sky-500); --brand-content: var(--sky-600); --success: var(--emerald-500); --warn: var(--amber-500);

  --border: oklch(14.5% 0 0/.1); --border-surface: oklch(14.5% 0 0/.1); --border-surface-strong: oklch(14.5% 0 0/.15);
  --input: oklch(14.5% 0 0/.1); --ring: oklch(14.5% 0 0/.08); --hairline: .5px;

  --surface-primary: oklch(100% 0 0); --surface-secondary: oklch(100% 0 0/.85); --surface-tertiary: oklch(100% 0 0/.55);
  --surface-fg-1: oklch(14.5% 0 0/.85); --surface-fg-2: oklch(14.5% 0 0/.55); --surface-fg-3: oklch(14.5% 0 0/.25);
  --sidebar: oklch(98.5% 0 0);
  --sidebar-glass: oklch(98.5% 0 0/.72);
  --masthead-glass: oklch(100% 0 0/.62);

  --radius: .625rem; --r-sm: .375rem; --r-md: .5rem; --r-lg: .75rem; --r-xl: 1rem; --r-2xl: 1.25rem; --r-3xl: 2.1rem; --r-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px -1px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.05);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.05);
  --ring-surface: 0 0 0 .5px var(--border-surface-strong);
  --overlay-ring: inset 0 0 0 1px rgba(255,255,255,.8), 0 0 0 .5px oklch(14.5% 0 0/.2);
  --overlay-blur: 20px;

  --composer-radius: 20px; --composer-bg: var(--surface-primary);
  --composer-shadow: 0 4px 6px -1px rgba(0,0,0,.05), 0 2px 4px -2px rgba(0,0,0,.05);
  --card-radius: var(--r-lg);

  --ease-out: cubic-bezier(0,0,.2,1); --ease-in-out: cubic-bezier(.4,0,.2,1);
  --dur-fast: 100ms; --dur: 150ms; --dur-slow: 240ms;
  --header-h: 48px; --rail-w: 272px; --rail-w-collapsed: 56px;
  --backdrop: oklch(0 0 0/.15); --focus-ring: 0 0 0 3px var(--ring);
  color-scheme: light;
}

.dark {
  --background: var(--neutral-900); --foreground: oklch(98.5% 0 0);
  --popover: var(--neutral-800); --popover-foreground: oklch(98.5% 0 0);
  --primary: oklch(98.5% 0 0/.9); --primary-foreground: oklch(14.5% 0 0/.9);
  --secondary: oklch(98.5% 0 0/.08); --secondary-foreground: oklch(98.5% 0 0/.55);
  --muted: oklch(98.5% 0 0/.06); --muted-foreground: oklch(98.5% 0 0/.55);
  --accent: oklch(98.5% 0 0/.1); --accent-foreground: oklch(98.5% 0 0/.85);
  --destructive: var(--red-400); --brand: var(--sky-400); --brand-content: var(--sky-400); --success: var(--emerald-400); --warn: var(--amber-400);
  --border: oklch(98.5% 0 0/.1); --border-surface: oklch(98.5% 0 0/.14); --border-surface-strong: oklch(98.5% 0 0/.2);
  --input: oklch(98.5% 0 0/.1); --ring: oklch(98.5% 0 0/.08);
  --surface-primary: oklch(98.5% 0 0/.08); --surface-secondary: oklch(98.5% 0 0/.06); --surface-tertiary: oklch(98.5% 0 0/.04);
  --surface-fg-1: oklch(98.5% 0 0/.85); --surface-fg-2: oklch(98.5% 0 0/.55); --surface-fg-3: oklch(98.5% 0 0/.25);
  --sidebar: oklch(22% 0 0);
  --sidebar-glass: oklch(22% 0 0/.72);
  --masthead-glass: oklch(20.5% 0 0/.6);
  --overlay-ring: inset 0 0 0 1px rgba(255,255,255,.06), 0 0 0 .5px oklch(0 0 0/.5);
  --backdrop: oklch(0 0 0/.45);
  color-scheme: dark;
}