/* Brand typefaces (zeroheight › Typography): Syne for headings, Inter for
   body copy, Instrument Serif Italic for accents inside headings. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Syne:wght@500;600;700&family=Instrument+Serif:ital@1&display=swap');

/* ============================================================
   BAD REALITY STUDIOS — CORPORATE IDENTITY
   Shared design tokens & base layer for the Storybook Designer.
   Loaded before every page stylesheet so login, dashboard, help
   and print all speak the same visual language.
   ============================================================ */

:root {
    color-scheme: dark;

    /* ---------- Brand primitives (zeroheight › Color) ----------
       Two fixed pairings that are never mixed on one surface:
       yellow #FCDF00 only on black, blue #163A70 only on white.
       The dark theme is the black/yellow pairing, the light theme the
       white/blue one — the light theme remaps the --brs-yellow* names. */
    --brs-yellow: #fcdf00;
    --brs-yellow-rgb: 252 223 0;
    --brs-yellow-bright: #ffe93d;
    --brs-gold: #e6cb00;          /* hover state of the yellow fill */
    --brs-yellow-deep: #b89f00;
    --brs-blue: #163a70;
    --brs-blue-rgb: 22 58 112;
    --brs-black: #000000;
    --brs-white: #ffffff;

    /* Neutral ramp — pure black to white, no tint, so the brand pairs stay clean. */
    --brs-n-1000: #000000;
    --brs-n-950: #070707;
    --brs-n-900: #0d0d0d;
    --brs-n-850: #121212;
    --brs-n-800: #171717;
    --brs-n-750: #1f1f1f;
    --brs-n-700: #292929;
    --brs-n-600: #383838;
    --brs-n-500: #555555;
    --brs-n-400: #8a8a8a;
    --brs-n-300: #b4b4b4;
    --brs-n-200: #ececec;
    --brs-n-000: #ffffff;

    /* ---------- Production roles ----------
       Muted, evenly weighted hues — they label the work, they don't shout.
       Each ships an -rgb triplet so tints can be mixed with rgb(... / a). */
    --c-aroll: #7ba0f0;
    --c-aroll-rgb: 123 160 240;
    --c-aroll-strong: #5477ce;
    --c-aroll-strong-rgb: 84 119 206;

    --c-broll: #5fc49b;
    --c-broll-rgb: 95 196 155;
    --c-broll-strong: #379b7c;
    --c-broll-strong-rgb: 55 155 124;

    --c-bts: #e5ac63;
    --c-bts-rgb: 229 172 99;
    --c-bts-strong: #c08640;
    --c-bts-strong-rgb: 192 134 64;

    --c-note: #78b4dc;
    --c-note-rgb: 120 180 220;

    --c-ai: #a992f5;
    --c-ai-rgb: 169 146 245;
    --c-ai-strong: #7f6fd8;
    --c-ai-deep: #6355b8;

    --c-voice: #e88a72;
    --c-voice-rgb: 232 138 114;
    --c-voice-strong: #c56550;
    --c-voice-strong-rgb: 197 101 80;

    --c-error: #e5695f;
    --c-error-rgb: 229 105 95;
    --c-error-strong: #c4504a;

    /* ---------- Semantic roles (consumed by page stylesheets) ---------- */
    --primary-color: var(--brs-yellow);
    --primary-hover: var(--brs-gold);
    --primary-dark: var(--brs-yellow-deep);
    --success-color: var(--c-broll);
    --error-color: var(--c-error);

    --text-primary: var(--brs-n-200);
    --text-secondary: var(--brs-n-300);
    --text-muted: var(--brs-n-400);

    --border-color: var(--brs-n-600);
    --background-dark: var(--brs-n-900);
    --background-black: var(--brs-n-1000);
    --background-charcoal: var(--brs-n-850);
    --sidebar-bg: var(--brs-n-850);
    --card-bg: var(--brs-n-800);
    --card-hover-bg: var(--brs-n-750);

    --accent-subtle: rgb(var(--brs-yellow-rgb) / 0.05);
    --accent-strong: rgb(var(--brs-yellow-rgb) / 0.13);
    --accent-border: rgb(255 255 255 / 0.09);
    --pane-sheen: rgb(255 255 255 / 0.03);
    --hairline: rgb(255 255 255 / 0.05);
    --scrim: rgb(0 0 0 / 0.88);

    /* ---------- Typography ---------- */
    --font-sans: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto',
                 'Helvetica Neue', sans-serif;
    --font-display: 'Syne', 'Inter', 'Segoe UI', sans-serif;
    --font-accent: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --font-mono: 'SF Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --fs-micro: 10px;   /* uppercase eyebrow labels */
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-base: 13px;
    --fs-md: 14px;
    --fs-lg: 17px;
    --fs-xl: 22px;
    --fs-2xl: 28px;

    /* The clapperboard voice: tight, uppercase, wide tracking */
    --tracking-label: 0.08em;
    --tracking-body: 0;
    --tracking-display: -0.01em;

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

    /* ---------- Radii ----------
       The CI buttons are hard-edged rectangles; surfaces follow suit. */
    --radius-xs: 0;
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 2px;
    --radius-xl: 2px;
    --radius-pill: 999px;

    /* ---------- Elevation ----------
       Two layers: a tight contact shadow plus a wide, very soft ambient one.
       A single hard black drop is what makes dark UI look cheap. */
    --card-shadow: 0 1px 2px rgb(0 0 0 / 0.4),
                   0 10px 28px -14px rgb(0 0 0 / 0.7);
    --card-hover-shadow: 0 2px 4px rgb(0 0 0 / 0.45),
                         0 20px 44px -18px rgb(0 0 0 / 0.8);
    --glow-shadow: 0 0 24px rgb(var(--brs-yellow-rgb) / 0.1);
    --modal-shadow: 0 2px 8px rgb(0 0 0 / 0.5),
                    0 36px 84px -28px rgb(0 0 0 / 0.9);
    /* The 1px lit edge along the top of a raised surface */
    --edge-highlight: inset 0 1px 0 var(--hairline);

    /* ---------- Motion ---------- */
    --ease: cubic-bezier(0.2, 0.6, 0.25, 1);
    --dur-fast: 0.15s;
    --dur: 0.25s;
    --dur-slow: 0.35s;

    /* ---------- Focus ---------- */
    --focus-ring: 0 0 0 3px rgb(var(--brs-yellow-rgb) / 0.32);

    /* ---------- Layout metrics (overridden per breakpoint) ---------- */
    --topbar-h: 70px;
    --footer-h: 30px;
    --gutter: 12px;
    --touch-target: 36px;

    /* Safe areas — iPad in landscape with a home indicator */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

/* ---------- Light theme ---------- */
[data-theme="light"],
body.light-theme {
    color-scheme: light;

    /* White surfaces carry the blue accent, never yellow (zeroheight › Color).
       Remapping the yellow primitives makes every accent reference follow. */
    --brs-yellow: var(--brs-blue);
    --brs-yellow-rgb: var(--brs-blue-rgb);
    --brs-yellow-bright: #24508f;
    --brs-gold: #0f2a52;
    --brs-yellow-deep: #0f2a52;

    /* Semantic accents resolve on :root, so they are redeclared here */
    --primary-color: var(--brs-blue);
    --primary-hover: #0f2a52;
    --primary-dark: #0f2a52;

    --text-primary: #000000;
    --text-secondary: #3d3d3d;
    --text-muted: #767676;

    --border-color: #e2e2e2;
    --background-dark: #fafafa;
    --background-black: #ffffff;
    --background-charcoal: #f4f4f4;
    --sidebar-bg: #ffffff;
    --card-bg: #ffffff;
    --card-hover-bg: #f6f6f6;

    /* Roles darken so they stay legible on paper-white */
    --c-aroll: #3f68c4;
    --c-broll: #1f8a6a;
    --c-bts: #a9722c;
    --c-note: #2f7aa8;
    --c-ai: #6a55c8;
    --c-voice: #b8503b;
    --c-error: #c4443c;

    --accent-subtle: rgb(var(--brs-blue-rgb) / 0.05);
    --accent-strong: rgb(var(--brs-blue-rgb) / 0.1);
    --accent-border: rgb(0 0 0 / 0.1);
    --pane-sheen: rgb(0 0 0 / 0.02);
    --hairline: rgb(255 255 255 / 0.9);
    --scrim: rgb(0 0 0 / 0.45);

    --card-shadow: 0 1px 2px rgb(0 0 0 / 0.06),
                   0 8px 20px -12px rgb(0 0 0 / 0.16);
    --card-hover-shadow: 0 2px 4px rgb(0 0 0 / 0.08),
                         0 16px 32px -14px rgb(0 0 0 / 0.2);
    --glow-shadow: 0 0 18px rgb(var(--brs-blue-rgb) / 0.16);
    --modal-shadow: 0 24px 56px -20px rgb(0 0 0 / 0.3);
    --focus-ring: 0 0 0 3px rgb(var(--brs-blue-rgb) / 0.28);
}

/* ============================================================
   BASE LAYER
   Written with :where() so page stylesheets always win.
   ============================================================ */

:where(html) {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

:where(body) {
    font-family: var(--font-sans);
    letter-spacing: var(--tracking-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings and titles are set in Syne */
:where(h1, h2, h3, h4, .page-title, .pane-title, .modal-header h3, .help-content h1, .help-content h2) {
    font-family: var(--font-display);
    letter-spacing: var(--tracking-display);
}

/* Accent words inside a heading: Instrument Serif Italic, same size, brand accent colour */
:where(.brand-accent) {
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--primary-color);
}

/* Icons: Google Material Symbols only (zeroheight › Icons). The markup keeps
   the historic .material-icons-outlined class; it is bound to the Symbols font here. */
.material-icons-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* No blue flash on tap; every interactive element gets a real :active state */
:where(a, button, input, select, textarea, label, [role="button"], .filmed-toggle) {
    -webkit-tap-highlight-color: transparent;
}

/* One focus ring for the whole product */
:where(a, button, input, select, textarea, [tabindex], [contenteditable="true"]):focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* Scroll areas behave like native panels on touch devices */
:where(.pane-body, .modal-content, .equipment-list, .equipment-checkboxes,
       .rich-text-editor, .filming-left, .filming-right, .help-content) {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Brand-tinted scrollbars, unobtrusive on both themes */
:where(.pane-body, .modal-content, .equipment-list, .equipment-checkboxes,
       .rich-text-editor, .filming-left, .filming-right, .help-sidebar) {
    scrollbar-width: thin;
    scrollbar-color: var(--brs-n-600) transparent;
}

:where(.pane-body, .modal-content, .equipment-list, .equipment-checkboxes,
       .rich-text-editor, .filming-left, .filming-right, .help-sidebar)::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

:where(.pane-body, .modal-content, .equipment-list, .equipment-checkboxes,
       .rich-text-editor, .filming-left, .filming-right, .help-sidebar)::-webkit-scrollbar-thumb {
    background: var(--brs-n-600);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: var(--radius-pill);
}

:where(.pane-body, .modal-content, .equipment-list, .equipment-checkboxes,
       .rich-text-editor, .filming-left, .filming-right, .help-sidebar)::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
    border: 3px solid transparent;
    background-clip: content-box;
}

::selection {
    background: rgb(var(--brs-yellow-rgb) / 0.28);
    color: var(--text-primary);
}

/* Respect the system motion preference — set on set, not everyone wants this */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}