/* ══════════════════════════════════════════════════════════
   Design tokens — one set for the whole builder: the dashboard, the
   editor, sign-in and analytics (not the marketing site, which has its
   own --lp-* set, nor published websites, which have theirs).
   Change the look here; components and pages only use these names.
   Light is the default; dark applies under [data-theme="dark"] (<html>
   in the editor). The dashboard has its own single look at the end.
   ══════════════════════════════════════════════════════════ */

/* The cascade, lowest first: a page's own rule beats a component's,
   whatever their specificity or load order. Declared here because this
   file loads first (each entry in assets/, builder/index.css). */
@layer tokens, base, components, pages, marketing;

@layer tokens {
    :root {
        /* Surfaces — page → card/panel → raised (modal, popover) */
        --surface-1: #f6f7f9; /* page background */
        --surface-2: #ffffff; /* cards, sidebars, top bars */
        --surface-3: #ffffff; /* modals, popovers */
        --surface-sunken: #f1f2f5; /* inputs, table heads, segmented controls */
        --surface-hover: #f3f4f7;
        --overlay: rgba(15, 23, 42, 0.32); /* behind modals */

        /* The dashboard's frame: the dark top bar, the rail and the panel a
           shade darker than the content */
        --chrome: #1c1b2b;
        --chrome-text: #ffffff;
        --chrome-muted: #b7b4cf;
        --chrome-hover: rgba(255, 255, 255, 0.09);
        --chrome-border: rgba(255, 255, 255, 0.16);
        --chrome-border-strong: rgba(255, 255, 255, 0.3);
        --chrome-accent: #8b85ff;
        --panel-bg: #eef0f4;
        --frame-border: #dcdee5;
        --frame-active: #ffffff; /* the open item in the rail or panel */
        --frame-hover: #e2e4ea;
        --content-bg: #f7f8fa;

        /* A spotlight (the home's "Nieuw in Pagebase"): dark with two soft
           glows; and a photo with text on it, darkened below */
        --spotlight: #1c1b2b;
        --spotlight-text: #ffffff;
        --spotlight-muted: #d4d3e6;
        --spotlight-glow-1: rgba(236, 140, 90, 0.55);
        --spotlight-glow-2: rgba(129, 140, 248, 0.55);
        --photo-scrim: rgba(15, 14, 25, 0.82);
        --photo-glass: rgba(15, 14, 25, 0.38);

        /* Text */
        --text-strong: #0a0b0d; /* headings */
        --text: #1a1d23; /* body */
        --text-secondary: #5a6172;
        --text-muted: #757b87;

        /* Borders */
        --border-subtle: #f0f1f4;
        --border: #e4e6eb;
        --border-strong: #cdd1d9;

        /* Primary (indigo) */
        --primary: #4f46e5;
        --primary-hover: #4338ca;
        --primary-text: #4338ca; /* primary text on a soft background */
        --primary-soft: rgba(79, 70, 229, 0.08);
        /* Scrollbars: a thin grey thumb, shown over what scrolls when the mouse is on it */
        --scrollbar-thumb: rgba(15, 23, 42, 0.2);
        --scrollbar-thumb-hover: rgba(15, 23, 42, 0.38);
        --primary-ring: rgba(79, 70, 229, 0.18);
        --primary-on: #ffffff; /* text on primary */
        --primary-rgb: 79 70 229; /* rgb(var(--primary-rgb) / 0.2) */

        /* A website's icon (components/site-icon.css): dark blue on a light tile */
        --site-icon: #1e3a8a;
        --site-icon-bg: rgba(30, 58, 138, 0.08);

        /* Status — colour, tinted background, border */
        --success: #059669;
        --success-bg: rgba(5, 150, 105, 0.08);
        --success-border: rgba(5, 150, 105, 0.2);
        --danger: #dc2626;
        --danger-hover: #b91c1c;
        --danger-bg: rgba(220, 38, 38, 0.08);
        --danger-border: rgba(220, 38, 38, 0.2);
        --warning: #d97706;
        --warning-bg: rgba(217, 119, 6, 0.08);
        --warning-border: rgba(217, 119, 6, 0.22);
        --info: #0284c7;
        --info-bg: rgba(2, 132, 199, 0.08);
        --info-border: rgba(2, 132, 199, 0.22);

        /* Two accent colours for a gradient beside the primary (the editor's
           gradient text preview, the AI panel) */
        --chart-4: #e11d48;
        --chart-6: #7c3aed;

        /* The editor's workspace behind the page */
        --canvas-bg: #e9ecf0;
        --shadow-canvas: 0 8px 32px rgba(13, 18, 28, 0.1);

        /* Radii */
        --radius-xs: 4px;
        --radius-sm: 6px;
        --radius-md: 8px;
        /* A field (input, dropdown) everywhere: its height and text size (form.css, dropdown.css) */
        --field-h: 2.375rem;
        --field-fs: 0.875rem;
        --radius-lg: 12px;
        --radius-xl: 16px;
        --radius-pill: 999px;

        /* Spacing */
        --space-1: 4px;
        --space-2: 6px;
        --space-3: 8px;
        --space-4: 10px;
        --space-5: 12px;
        --space-6: 14px;
        --space-7: 16px;
        --space-8: 20px;
        --space-9: 24px;
        --space-10: 32px;

        /* Shadows */
        --shadow-xs: 0 1px 1px rgba(15, 23, 42, 0.03);
        --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
        --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
        --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
        --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.16), 0 8px 16px rgba(15, 23, 42, 0.08);
        --ring: 0 0 0 3px var(--primary-ring); /* focus */

        /* Type */
        --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
        --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
        --fs-xs: 0.72rem;
        --fs-sm: 0.8rem;
        --fs-md: 0.85rem;
        --fs-lg: 0.95rem;

        /* Motion */
        --trans-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
        --trans-base: 180ms cubic-bezier(0.4, 0, 0.2, 1);
        --trans-slow: 280ms cubic-bezier(0.4, 0, 0.2, 1);

        /* Stacking */
        --z-canvas: 10;
        --z-overlay: 20;
        --z-popover: 100;
        --z-dropdown: 1000;
        --z-modal: 2000;
        --z-menu: 3000;
        --z-palette: 8000;
        --z-toast: 9000;
    }

    [data-theme="dark"] {
        --surface-1: #070e19;
        --surface-2: #0d1626;
        --surface-3: #131f33;
        --surface-sunken: #0a1320;
        --surface-hover: #15233a;
        --overlay: rgba(0, 0, 0, 0.55);

        --chrome: #04070d;
        --chrome-text: #f5f7fb;
        --chrome-muted: #8d97ab;
        --chrome-hover: rgba(255, 255, 255, 0.07);
        --chrome-border: rgba(255, 255, 255, 0.12);
        --chrome-border-strong: rgba(255, 255, 255, 0.24);
        --chrome-accent: #a5afff;
        --panel-bg: #0c1522;
        --frame-border: #142035;
        --frame-active: #1a2a44;
        --frame-hover: #132036;
        --content-bg: #070e19;

        --spotlight: #131f33;
        --spotlight-text: #f5f7fb;
        --spotlight-muted: #b9c2d3;
        --spotlight-glow-1: rgba(236, 140, 90, 0.35);
        --spotlight-glow-2: rgba(129, 140, 248, 0.4);
        --photo-scrim: rgba(4, 7, 13, 0.85);
        --photo-glass: rgba(4, 7, 13, 0.45);

        --text-strong: #f5f7fb;
        --text: #e2e8f0;
        --text-secondary: #98a3b8;
        --text-muted: #6b7689;

        --border-subtle: #142035;
        --border: #1d2c44;
        --border-strong: #2a3e5d;

        --primary: #818cf8;
        --primary-hover: #a5afff;
        --primary-text: #c7cdff;
        --primary-soft: rgba(129, 140, 248, 0.14);
        --scrollbar-thumb: rgba(255, 255, 255, 0.2);
        --scrollbar-thumb-hover: rgba(255, 255, 255, 0.36);
        --primary-ring: rgba(129, 140, 248, 0.3);
        --primary-on: #ffffff;
        --site-icon: #93b4ff;
        --site-icon-bg: rgba(147, 180, 255, 0.12);
        --primary-rgb: 129 140 248;

        --success: #34d399;
        --success-bg: rgba(16, 185, 129, 0.12);
        --success-border: rgba(16, 185, 129, 0.28);
        --danger: #f87171;
        --danger-hover: #ef4444;
        --danger-bg: rgba(239, 68, 68, 0.1);
        --danger-border: rgba(239, 68, 68, 0.28);
        --warning: #fbbf24;
        --warning-bg: rgba(251, 191, 36, 0.1);
        --warning-border: rgba(251, 191, 36, 0.3);
        --info: #38bdf8;
        --info-bg: rgba(56, 189, 248, 0.1);
        --info-border: rgba(56, 189, 248, 0.28);

        --chart-4: #fb7185;
        --chart-6: #c4b5fd;

        --canvas-bg: #06070b;
        --shadow-canvas: 0 8px 32px rgba(0, 0, 0, 0.5);

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.2);
        --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.25);
        --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
        --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.35);
    }

    /* The dashboard's own look (dashboard/layout, pos/_frame): warm white,
       white panels, a black rail and black as the only colour — green for
       what's fine, amber for what needs a look, red for a problem. Glass
       only on what floats (menus, dialogs, panels, the bar once scrolled).
       One look, no dark mode; the editor keeps the set above. On :root so
       what a script puts on <body> (a dialog, a toast) has it too. */
    :root:has(.dashboard-layout) {
        /* The screen behind it all: a calm, cool haze, so what lies on it is glass
           (a white that lets the haze through) rather than flat white on beige */
        --haze:
            radial-gradient(70% 65% at 0% 0%, #cfdbef 0%, transparent 72%),
            radial-gradient(65% 70% at 100% 100%, #e2d3ee 0%, transparent 72%),
            radial-gradient(45% 45% at 60% 45%, #f6efe4 0%, transparent 72%),
            radial-gradient(40% 40% at 90% 0%, #cde3e5 0%, transparent 72%), #eceef2;
        /* A hair-fine grain over the haze, as on paper or brushed metal: you hardly see it, you feel it */
        --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        --surface-1: #f0f1f4;
        --surface-2: rgba(255, 255, 255, 0.58);
        --surface-3: #ffffff;
        --surface-sunken: rgba(120, 120, 128, 0.1);
        --surface-hover: rgba(255, 255, 255, 0.5);
        --overlay: rgba(28, 28, 36, 0.16);

        --chrome: #0a0a0a;
        --chrome-text: #f3ede6;
        --chrome-muted: rgba(243, 237, 230, 0.6);
        --chrome-faint: rgba(243, 237, 230, 0.42);
        --chrome-hover: rgba(255, 255, 255, 0.07);
        --chrome-active: rgba(255, 255, 255, 0.1);
        --chrome-border: rgba(255, 255, 255, 0.12);
        --chrome-border-strong: rgba(255, 255, 255, 0.24);
        --chrome-accent: #f3ede6;
        /* The rail: a dark glass panel floating off the screen's edge, the haze round it and faintly through */
        --chrome-glass: rgba(13, 13, 16, 0.9);
        /* Black as dark glass too: the rail's open item and its counts with a light along their top */
        --chrome-active-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.08) 100%);
        --chrome-active-edge:
            inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.06),
            0 4px 10px -6px rgba(0, 0, 0, 0.6);
        --chrome-count: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.12) 100%);
        --chrome-count-edge: inset 0 1px 0 rgba(255, 255, 255, 0.3);
        --chrome-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 160px);
        --chrome-edge:
            inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.16),
            0 24px 60px -28px rgba(0, 0, 0, 0.55);
        --panel-bg: #f0f1f4;
        --frame-border: rgba(60, 60, 67, 0.12);
        --frame-active: rgba(255, 255, 255, 0.8);
        --frame-hover: rgba(255, 255, 255, 0.45);
        --content-bg: #eef0f3;

        --spotlight: #0a0a0a;
        --spotlight-text: #ffffff;
        --spotlight-muted: rgba(255, 255, 255, 0.7);
        --spotlight-glow-1: rgba(255, 255, 255, 0.08);
        --spotlight-glow-2: rgba(255, 255, 255, 0.05);
        --photo-scrim: rgba(10, 10, 10, 0.72);
        --photo-glass: rgba(10, 10, 10, 0.38);
        /* A photo under white text: dark on the left, clear on the right */
        --photo-fade: linear-gradient(90deg, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.12) 75%);
        --photo-fade-up: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.72));
        --photo-shade: rgba(0, 0, 0, 0.34); /* over a whole photo, so white text and glass read on any */
        --on-photo: #ffffff;
        --on-photo-muted: rgba(255, 255, 255, 0.75);
        --on-photo-ghost: rgba(255, 255, 255, 0.14);
        --on-photo-line: rgba(255, 255, 255, 0.3);
        --on-photo-text: #0a0a0a; /* words on a white button on a photo: black, whatever the theme */

        --text-strong: #0a0a0a;
        --text: #1c1c1a;
        --text-secondary: #5c5c5c;
        --text-muted: #67676c;

        --border-subtle: rgba(60, 60, 67, 0.07);
        --border: rgba(60, 60, 67, 0.12);
        --border-strong: rgba(60, 60, 67, 0.22);

        --primary: #0a0a0a;
        --primary-hover: #2b2b2a;
        --primary-text: #0a0a0a;
        --primary-soft: rgba(10, 10, 10, 0.05);
        --primary-ring: rgba(10, 10, 10, 0.12);
        --primary-on: #ffffff;
        --primary-rgb: 10 10 10;
        --scrollbar-thumb: rgba(10, 10, 10, 0.18);
        --scrollbar-thumb-hover: rgba(10, 10, 10, 0.34);

        --site-icon: #0a0a0a;
        --site-icon-bg: rgba(120, 120, 128, 0.12);

        /* States, muted to sit with black, white and glass: they show, they don't shout */
        --success: #2f7d55;
        --success-bg: rgba(47, 125, 85, 0.08);
        --success-border: rgba(47, 125, 85, 0.2);
        --danger: #a63d33;
        --danger-hover: #86302a;
        --danger-bg: rgba(170, 70, 60, 0.09);
        --danger-border: rgba(170, 70, 60, 0.25);
        --warning: #8f6a2c;
        --warning-dot: #b8924a;
        --warning-bg: rgba(160, 120, 50, 0.1);
        --warning-border: rgba(160, 120, 50, 0.28);
        --info: #3c3c3c;
        --info-bg: rgba(120, 120, 128, 0.1);
        --info-border: rgba(60, 60, 67, 0.14);

        --chart-4: #5c5c5c;
        --chart-6: #0a0a0a;

        --radius-md: 10px;
        --radius-lg: 14px;
        --radius-xl: 18px;
        --radius-2xl: 22px;
        --field-h: 2.625rem;

        --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.04);
        /* Shadows soft and cool (a blue-grey, not black), so panels float over the haze */
        --shadow-sm: 0 1px 1px rgba(40, 50, 80, 0.05), 0 10px 24px -18px rgba(40, 52, 90, 0.32);
        --shadow-md: 0 1px 2px rgba(40, 50, 80, 0.06), 0 24px 50px -26px rgba(40, 52, 90, 0.3);
        --shadow-lg: 0 30px 70px -30px rgba(30, 38, 70, 0.45);
        --shadow-xl: 0 30px 70px -24px rgba(30, 38, 70, 0.5);
        --ring: 0 0 0 3px var(--primary-ring);

        /* Glass, for what floats: light over the page, darker for a bar of actions */
        --glass: rgba(255, 255, 255, 0.52);
        --glass-read: rgba(248, 248, 250, 0.8); /* a panel, menu or dialog one reads in */
        --menu-glass: rgba(
            250,
            250,
            252,
            0.94
        ); /* a menu: denser, so a switch or photo under it doesn't show through */
        --glass-line: rgba(255, 255, 255, 0.85);
        /* Glass's edge, lit from the top left: bright there, faint at the bottom right */
        --glass-shine:
            inset 1px 1px 0 rgba(255, 255, 255, 0.95), inset -1px -1px 0 rgba(255, 255, 255, 0.3),
            inset 0 0 0 1px rgba(255, 255, 255, 0.18);
        --glass-frost: blur(24px) saturate(1.7); /* a panel blurs what lies under it: calm inside, the grain round it */
        --glass-blur: blur(40px) saturate(1.9);
        --glass-mist: blur(14px) saturate(1.3); /* the screen behind a dialog */
        --glass-dark: rgba(12, 12, 12, 0.72);
        --glass-dark-line: rgba(255, 255, 255, 0.12);
        --glass-dark-soft: rgba(255, 255, 255, 0.1);
        --glass-sep: rgba(0, 0, 0, 0.07);
        --menu-sep: #c4c2bc; /* the line between groups in a menu */
        --glass-field: rgba(255, 255, 255, 0.8);
        /* The black button: a faint light along its top and a soft shadow; it sinks when pressed */
        --primary-gloss: linear-gradient(180deg, #2a2a2e 0%, #0a0a0a 100%);
        --primary-gloss-hover: linear-gradient(180deg, #3a3a3f 0%, #161618 100%);
        --shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 14px -6px rgba(0, 0, 0, 0.5);
        --shadow-btn-pressed: inset 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 5px -3px rgba(0, 0, 0, 0.4);
        /* A light button: glass with a bright top and a faint ring */
        --glass-btn: rgba(255, 255, 255, 0.62);
        --glass-btn-hover: rgba(255, 255, 255, 0.85);
        --shadow-glass-btn:
            inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(60, 60, 67, 0.14),
            0 1px 2px rgba(0, 0, 0, 0.05);
        /* What's chosen (a filter, a segment): white glass, never black — black is the main button's */
        --glass-chip-on: rgba(255, 255, 255, 0.92);
        --shadow-chip-on: 0 2px 6px -2px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(60, 60, 67, 0.08);
        /* A card you can click, under the pointer: a pixel up, a deeper shadow */
        --shadow-lift: 0 2px 4px rgba(40, 50, 80, 0.06), 0 26px 46px -22px rgba(40, 52, 90, 0.36);
        /* A message (toast): a dark glass pill at the foot of the screen */
        --toast-glass: rgba(18, 18, 22, 0.84);
        --shadow-toast: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 16px 34px -14px rgba(0, 0, 0, 0.55);
        --toast-ok: #6fd3a0;
        --toast-bad: #ff958a;
        --toast-action: rgba(255, 255, 255, 0.14);
        /* Words on a photo: a strip of dark glass, the photo itself left clear */
        --photo-strip: rgba(16, 16, 20, 0.34);
        --photo-strip-edge: inset 0 0 0 0.5px rgba(255, 255, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18);
        --photo-fade-soft: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.22) 100%);
        --row-hover: rgba(255, 255, 255, 0.62); /* a list's row under the pointer: a strip of glass */
        --field-bg: rgba(255, 255, 255, 0.58); /* a field: white glass here, a dark well in the dark */
        --field-line: rgba(60, 60, 67, 0.12);
        --thumb-line: rgba(0, 0, 0, 0.12); /* a hairline round a photo */
        --thumb-filter: none; /* a white page's screenshot: as it is here, dimmed a little in the dark */
        --switch-off: rgba(120, 120, 128, 0.26); /* a switch that's off: a tinted track, a white knob on a shadow */
        --switch-knob-on: #ffffff; /* the knob on the primary track (black here, white in the dark) */
        --switch-knob-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0, 0, 0, 0.14);
        --shadow-glass-bar: 0 14px 30px -24px rgba(0, 0, 0, 0.4);

        --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
        /* How wide a page's content gets (a phone: its own width) */
        --page-w: max(1160px, 90%);
    }

    /* The dashboard in the dark (User::theme "dark", or the device's choice,
       dashboard/_theme.html.twig): graphite, not navy — neutral greys, the
       glows almost gone, so photos and sites keep their colours. The rail
       and the panels are dark glass, the one main button turns white (and
       what was white on it black), a message a light pill. The editor keeps
       its own light html. */
    :root[data-theme="dark"]:has(.dashboard-layout) {
        color-scheme: dark;
        /* A glow you can just see — warm top left, cool bottom right — on a darker ground, so the glass does something */
        --haze:
            radial-gradient(60% 55% at 0% 0%, rgba(140, 105, 70, 0.26) 0%, transparent 70%),
            radial-gradient(55% 60% at 100% 100%, rgba(80, 90, 140, 0.26) 0%, transparent 70%),
            radial-gradient(40% 40% at 65% 40%, rgba(255, 255, 255, 0.03) 0%, transparent 70%), #0e0e10;
        --surface-1: #121214;
        /* Panels a touch lighter than the ground with a clearer edge: they lie on it, not in it */
        --surface-2: rgba(255, 255, 255, 0.085);
        --surface-3: #1e1e22;
        --surface-sunken: rgba(255, 255, 255, 0.07);
        --surface-hover: rgba(255, 255, 255, 0.06);
        --overlay: rgba(0, 0, 0, 0.5);

        --chrome: #0c0c0e;
        --chrome-text: #f2f2f2;
        --chrome-muted: rgba(242, 242, 242, 0.68);
        --chrome-faint: rgba(242, 242, 242, 0.5);
        --chrome-accent: #f2f2f2;
        --chrome-glass: rgba(
            6,
            6,
            8,
            0.72
        ); /* the rail darker than the page: the frame again, the content in front of it */
        --panel-bg: #141416;
        --frame-border: rgba(255, 255, 255, 0.1);
        --frame-active: rgba(255, 255, 255, 0.1);
        --frame-hover: rgba(255, 255, 255, 0.06);
        --content-bg: #131315;

        --spotlight: #1e1e22;
        --spotlight-muted: rgba(255, 255, 255, 0.7);
        --spotlight-glow-1: rgba(255, 255, 255, 0.06);
        --spotlight-glow-2: rgba(255, 255, 255, 0.04);

        --text-strong: #f4f4f5;
        --text: #e4e4e7;
        /* The quieter greys a step lighter than on white: small grey words sink into the dark sooner */
        --text-secondary: #b4b4bc;
        --text-muted: #9c9ca4;

        --border-subtle: rgba(255, 255, 255, 0.06);
        --border: rgba(255, 255, 255, 0.1);
        --border-strong: rgba(255, 255, 255, 0.2);

        --primary: #f4f4f5;
        --primary-hover: #ffffff;
        --primary-text: #f4f4f5;
        --primary-soft: rgba(255, 255, 255, 0.08);
        --primary-ring: rgba(255, 255, 255, 0.2);
        --primary-on: #0a0a0a;
        --primary-rgb: 244 244 245;
        --scrollbar-thumb: rgba(255, 255, 255, 0.2);
        --scrollbar-thumb-hover: rgba(255, 255, 255, 0.36);

        --site-icon: #f4f4f5;
        --site-icon-bg: rgba(255, 255, 255, 0.1);

        --success: #6fcf97;
        --success-bg: rgba(111, 207, 151, 0.12);
        --success-border: rgba(111, 207, 151, 0.3);
        --danger: #f08a7e;
        --danger-hover: #ffa396;
        --danger-bg: rgba(240, 138, 126, 0.12);
        --danger-border: rgba(240, 138, 126, 0.3);
        --warning: #e3b25c;
        --warning-dot: #e3b25c;
        --warning-bg: rgba(227, 178, 92, 0.12);
        --warning-border: rgba(227, 178, 92, 0.3);
        --info: #d4d4d8;
        --info-bg: rgba(255, 255, 255, 0.08);
        --info-border: rgba(255, 255, 255, 0.14);

        --chart-4: #a1a1aa;
        --chart-6: #f4f4f5;

        --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.3);
        --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.3), 0 10px 24px -18px rgba(0, 0, 0, 0.7);
        --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.35), 0 24px 50px -26px rgba(0, 0, 0, 0.7);
        --shadow-lg: 0 30px 70px -30px rgba(0, 0, 0, 0.8);
        --shadow-xl: 0 30px 70px -24px rgba(0, 0, 0, 0.85);

        --glass: rgba(255, 255, 255, 0.07);
        --glass-read: rgba(30, 30, 34, 0.86);
        --menu-glass: rgba(32, 32, 36, 0.96);
        --glass-line: rgba(255, 255, 255, 0.16);
        --glass-shine:
            inset 1px 1px 0 rgba(255, 255, 255, 0.2), inset -1px -1px 0 rgba(255, 255, 255, 0.06),
            inset 0 0 0 1px rgba(255, 255, 255, 0.1);
        --glass-frost: blur(24px) saturate(1.3);
        --glass-blur: blur(40px) saturate(1.4);
        --glass-mist: blur(14px) saturate(1.1);
        --glass-sep: rgba(255, 255, 255, 0.08);
        --menu-sep: rgba(255, 255, 255, 0.14);
        --glass-field: rgba(255, 255, 255, 0.06);
        --primary-gloss: linear-gradient(180deg, #ffffff 0%, #e4e4e7 100%);
        --primary-gloss-hover: linear-gradient(180deg, #ffffff 0%, #f4f4f5 100%);
        --shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 14px -6px rgba(0, 0, 0, 0.7);
        --shadow-btn-pressed: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 5px -3px rgba(0, 0, 0, 0.5);
        --glass-btn: rgba(255, 255, 255, 0.1);
        --glass-btn-hover: rgba(255, 255, 255, 0.16);
        --shadow-glass-btn:
            inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.1),
            0 1px 2px rgba(0, 0, 0, 0.3);
        --glass-chip-on: rgba(255, 255, 255, 0.16);
        --shadow-chip-on: 0 2px 6px -2px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
        --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.3), 0 26px 46px -22px rgba(0, 0, 0, 0.8);
        --toast-glass: rgba(240, 240, 244, 0.92);
        --shadow-toast: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 16px 34px -14px rgba(0, 0, 0, 0.8);
        --toast-ok: #1f8a4c;
        --toast-bad: #c2410c;
        --toast-action: rgba(0, 0, 0, 0.08);
        --row-hover: rgba(255, 255, 255, 0.06);
        --field-bg: rgba(0, 0, 0, 0.28); /* a field is a well: darker than its panel, a visible line */
        --field-line: rgba(255, 255, 255, 0.2);
        --thumb-line: rgba(255, 255, 255, 0.28);
        --thumb-filter: brightness(0.86); /* a white page's screenshot: still white, no longer a lamp */
        --switch-off: rgba(255, 255, 255, 0.18);
        --switch-knob-on: #0a0a0a;
        --switch-knob-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3);
        --shadow-glass-bar: 0 14px 30px -24px rgba(0, 0, 0, 0.8);
    }
}