/* ShellDocs Design Tokens
   ─────────────────────────────────────────────────────────────────────
   The palette + scale that ShellDocs itself, and any UI library layered
   on top (ShellUI, third-party), consume via CSS variables on :root.
   Override any variable in a stylesheet loaded AFTER this file to
   customise; the whole system responds through the cascade.

   Docs: docs/TOKENS.md
   ───────────────────────────────────────────────────────────────────── */

@import url('https://rsms.me/inter/inter.css');

:root {
    /* Surface */
    --background: hsl(0, 0%, 96%);
    --foreground: hsl(0, 0%, 3.9%);

    --card: hsl(0, 0%, 94.7%);
    --card-foreground: hsl(0, 0%, 3.9%);

    --popover: hsl(0, 0%, 98%);
    --popover-foreground: hsl(0, 0%, 15.1%);

    /* Actions */
    --primary: hsl(0, 0%, 9%);
    --primary-foreground: hsl(0, 0%, 98%);

    --secondary: hsl(0, 0%, 93.1%);
    --secondary-foreground: hsl(0, 0%, 9%);

    /* Neutrals */
    --muted: hsl(0, 0%, 96.1%);
    --muted-foreground: hsl(0, 0%, 45.1%);

    --accent: hsla(0, 0%, 82%, 0.5);
    --accent-foreground: hsl(0, 0%, 9%);

    /* Borders + form */
    --border: hsla(0, 0%, 80%, 0.5);
    --border-strong: hsl(0, 0%, 78%);
    --input: hsl(0, 0%, 89%);
    --ring: hsl(0, 0%, 63.9%);

    /* Semantic — the only vibrant tokens */
    --info: oklch(0.623 0.214 259.815);
    --warning: oklch(0.769 0.188 70.08);
    --error: oklch(0.637 0.237 25.331);
    --success: oklch(0.723 0.219 149.579);

    /* Scale */
    --radius: 0.5rem;
    --sidebar-width: 17.5rem;
    --toc-width: 14rem;
    --header-height: 3.5rem;

    /* Typography */
    --font-sans: 'Inter var', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

    color-scheme: light;
}

:root.dark {
    --background: hsl(0, 0%, 7.04%);
    --foreground: hsl(0, 0%, 92%);

    --card: hsl(0, 0%, 9.8%);
    --card-foreground: hsl(0, 0%, 98%);

    --popover: hsl(0, 0%, 11.6%);
    --popover-foreground: hsl(0, 0%, 86.9%);

    --primary: hsl(0, 0%, 98%);
    --primary-foreground: hsl(0, 0%, 9%);

    --secondary: hsl(0, 0%, 12.9%);
    --secondary-foreground: hsl(0, 0%, 92%);

    --muted: hsl(0, 0%, 12.9%);
    --muted-foreground: hsla(0, 0%, 70%, 0.8);

    --accent: hsla(0, 0%, 40.9%, 0.3);
    --accent-foreground: hsl(0, 0%, 90%);

    --border: hsla(0, 0%, 40%, 0.2);
    --border-strong: hsla(0, 0%, 40%, 0.5);
    --input: hsl(0, 0%, 15%);
    --ring: hsl(0, 0%, 54.9%);

    color-scheme: dark;
}