/* ══════════════════════════════════════════════════════════
   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, .dashboard-layout in the dashboard).
   ══════════════════════════════════════════════════════════ */

/* 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);
        --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);
        --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);
    }
}