/* ProProduction foundation tokens.
 *
 * Three layers:
 *   1. Primitives  — raw palette steps (--pp-blue-500). Never used directly
 *                    by components; they exist so semantic tokens have names.
 *   2. Semantic    — what a color is FOR (--pp-text-muted, --pp-bg-raised).
 *                    These switch between light and dark themes. Components
 *                    and screens use only these.
 *   3. Scales      — type, space, radius, size, motion, layering.
 *
 * Theme: follows the system by default. data-theme="light" | "dark" on any
 * element forces that theme for it and everything inside it.
 * Density: data-density="touch" on any element enlarges controls to 44px
 * for tablets on set.
 *
 * Brand colors: blue #34a9f7 (= --pp-blue-500), dark #252a2d
 * (= --pp-neutral-900), white #f4f4f4 (= --pp-neutral-0). Scales are
 * generated by scripts/palette.mjs, which also checks contrast.
 */

:root {
  /* ── 1. Primitives ─────────────────────────────────────────────────── */
  --pp-blue-50: #f0f8ff;
  --pp-blue-100: #deeffe;
  --pp-blue-200: #bbe0ff;
  --pp-blue-300: #93cffe;
  --pp-blue-400: #63bbfd;
  --pp-blue-500: #34a9f7; /* brand blue */
  --pp-blue-600: #0f87cd;
  --pp-blue-700: #026ca6;
  --pp-blue-800: #03527f;
  --pp-blue-900: #033b5e;
  --pp-blue-950: #002640;

  --pp-neutral-0: #f4f4f4; /* brand white */
  --pp-neutral-50: #e8eef1;
  --pp-neutral-100: #dee4e7;
  --pp-neutral-200: #ced3d7;
  --pp-neutral-300: #b6bbbe;
  --pp-neutral-400: #94999c;
  --pp-neutral-500: #6b6f72;
  --pp-neutral-600: #565c5f;
  --pp-neutral-700: #43494c;
  --pp-neutral-800: #32383b;
  --pp-neutral-900: #252a2d; /* brand dark */
  --pp-neutral-950: #151a1d;
  --pp-neutral-1000: #0d1114;
  --pp-pure-white: #ffffff;

  --pp-green-100: #d4f8da;
  --pp-green-300: #97daa4;
  --pp-green-400: #72ca86;
  --pp-green-500: #3fb663;
  --pp-green-700: #047b37;
  --pp-green-800: #045d28;
  --pp-green-950: #002d10;

  --pp-amber-100: #fee9d0;
  --pp-amber-300: #f1bd7b;
  --pp-amber-400: #e5a44c;
  --pp-amber-500: #d28a09;
  --pp-amber-800: #6b4300;
  --pp-amber-950: #341f00;

  --pp-red-100: #fee7e4;
  --pp-red-300: #ffb0a9;
  --pp-red-400: #ff8d85;
  --pp-red-500: #fe5c59;
  --pp-red-700: #b5292d;
  --pp-red-800: #920917;
  --pp-red-950: #4b0106;

  /* Camera units A–F. Identity colors: always paired with the letter,
     never the only way to tell cameras apart. Same in both themes. */
  --pp-cam-a: #f47d67;
  --pp-cam-b: #31c3b5;
  --pp-cam-c: #eabe4a;
  --pp-cam-d: #af8ceb;
  --pp-cam-e: #9bd25b;
  --pp-cam-f: #e97ab2;
  --pp-cam-ink: #252a2d; /* text on any camera color */
  --pp-cam-none: var(--pp-neutral-300); /* a camera with no unit assigned */
  --pp-knob: var(--pp-pure-white);      /* switch thumb */

  /* ── 2. Semantic: light theme ─────────────────────────────────────── */
  color-scheme: light;

  /* Backgrounds, from back to front */
  --pp-bg-canvas: var(--pp-neutral-0);        /* the app's ground */
  --pp-bg-surface: var(--pp-pure-white);      /* panels, cards, tables */
  --pp-bg-raised: var(--pp-pure-white);       /* menus, popovers, dialogs (with shadow) */
  --pp-bg-sunken: var(--pp-neutral-50);       /* wells, code, read-only fields */
  --pp-bg-inverse: var(--pp-neutral-900);     /* tooltips, toasts */
  --pp-bg-hover: rgb(37 42 45 / 0.05);        /* row/item hover, on any background */
  --pp-bg-active: rgb(37 42 45 / 0.09);       /* pressed */
  --pp-bg-selected: var(--pp-blue-50);        /* selected row, active nav item */
  --pp-bg-scrim: rgb(13 17 20 / 0.45);        /* behind dialogs and sheets */

  /* Text */
  --pp-text: var(--pp-neutral-900);
  --pp-text-muted: var(--pp-neutral-600);     /* secondary text, labels */
  --pp-text-subtle: #5f6366;                  /* placeholders, timestamps, captions (4.5:1 on every light surface) */
  --pp-text-disabled: var(--pp-neutral-400);
  --pp-text-inverse: var(--pp-neutral-0);
  --pp-text-link: var(--pp-blue-700);
  --pp-text-link-inverse: var(--pp-blue-300); /* links on --pp-bg-inverse (toasts, tooltips) */
  --pp-text-on-accent: var(--pp-neutral-900); /* on brand blue: white fails contrast */
  --pp-text-on-danger: var(--pp-pure-white);

  /* Borders */
  --pp-border-subtle: var(--pp-neutral-100);  /* dividers inside a surface */
  --pp-border: var(--pp-neutral-200);         /* card and panel edges */
  --pp-border-control: var(--pp-neutral-300); /* input, select and text-field edges: a quiet edge, the field's fill carries it */
  --pp-border-control-strong: var(--pp-neutral-500); /* checkbox, radio and switch edges, where the edge is the whole control (3:1) */
  --pp-focus-ring: var(--pp-blue-600);

  /* Accent (brand blue) */
  --pp-accent: var(--pp-blue-500);
  --pp-accent-hover: var(--pp-blue-400);
  --pp-accent-pressed: var(--pp-blue-500);
  --pp-accent-subtle-bg: var(--pp-blue-100);
  --pp-accent-subtle-text: var(--pp-blue-800);
  --pp-accent-text: var(--pp-blue-700);       /* blue used as text or an icon */

  /* Status */
  --pp-success: var(--pp-green-500);
  --pp-success-text: var(--pp-green-700);
  --pp-success-bg: var(--pp-green-100);
  --pp-success-bg-text: var(--pp-green-800);
  --pp-warning: var(--pp-amber-500);
  --pp-warning-text: var(--pp-amber-800);
  --pp-warning-bg: var(--pp-amber-100);
  --pp-warning-bg-text: var(--pp-amber-800);
  --pp-danger: var(--pp-red-700);
  --pp-danger-hover: var(--pp-red-800);
  --pp-danger-text: var(--pp-red-700);
  --pp-danger-bg: var(--pp-red-100);
  --pp-danger-bg-text: var(--pp-red-800);
  --pp-info-bg: var(--pp-blue-100);
  --pp-info-bg-text: var(--pp-blue-800);

  /* Production signals */
  --pp-rolling: var(--pp-red-500);            /* camera rolling / recording tally */
  --pp-rolling-bg: var(--pp-red-700);         /* filled "Rolling" status, white text */
  --pp-live: var(--pp-green-500);             /* connected, live sync */
  --pp-reconnecting: var(--pp-amber-500);
  --pp-offline: var(--pp-neutral-500);

  /* Elevation */
  --pp-shadow-sm: 0 1px 2px rgb(21 26 29 / 0.08);
  --pp-shadow-md: 0 1px 2px rgb(21 26 29 / 0.06), 0 4px 12px rgb(21 26 29 / 0.10);
  --pp-shadow-lg: 0 2px 6px rgb(21 26 29 / 0.08), 0 16px 40px rgb(21 26 29 / 0.18);
  --pp-shadow-edge: 0 0 0 1px var(--pp-border); /* outline raised surfaces in both themes */

  /* ── 3. Scales ─────────────────────────────────────────────────────── */

  /* Type families */
  --pp-font-heading: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --pp-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pp-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Type styles: size / line height / weight / tracking. Headings use
     Outfit; everything else Inter. Base UI text is 14px. */
  /* Outfit is set bold, in the Production Board's voice: names, numbers and
     labels you scan for are heavy; descriptions and inputs stay Inter. */
  --pp-display-size: 40px;  --pp-display-line: 44px;  --pp-display-weight: 700; --pp-display-track: -0.02em;
  --pp-h1-size: 30px;       --pp-h1-line: 34px;       --pp-h1-weight: 700;      --pp-h1-track: -0.015em;
  --pp-h2-size: 24px;       --pp-h2-line: 28px;       --pp-h2-weight: 700;      --pp-h2-track: -0.01em;
  --pp-h3-size: 19px;       --pp-h3-line: 24px;       --pp-h3-weight: 700;      --pp-h3-track: -0.005em;
  --pp-h4-size: 16px;       --pp-h4-line: 20px;       --pp-h4-weight: 700;      --pp-h4-track: 0;
  --pp-title-size: 14px;    --pp-title-line: 18px;    --pp-title-weight: 700;   /* panel titles, Outfit */
  /* Big numbers: shot IDs, setups, estimates, wrap time (Outfit 700). */
  --pp-num-xl-size: 32px;   --pp-num-xl-line: 34px;   /* shot ID in a row */
  --pp-num-lg-size: 24px;   --pp-num-lg-line: 26px;   /* setup, estimate, size */
  --pp-num-md-size: 18px;   --pp-num-md-line: 20px;   /* compact rows */
  /* Column headers: Outfit 700 caps in the accent. Micro labels: tiny
     tracked caps under or above a value ("MIN", "DAY", "CALL"). */
  --pp-colhead-size: 13px;  --pp-colhead-line: 16px;  --pp-colhead-track: 0.04em;
  --pp-micro-size: 10px;    --pp-micro-line: 12px;    --pp-micro-track: 0.12em;
  --pp-body-lg-size: 16px;  --pp-body-lg-line: 24px;
  --pp-body-size: 14px;     --pp-body-line: 20px;
  --pp-body-sm-size: 13px;  --pp-body-sm-line: 18px;
  --pp-caption-size: 12px;  --pp-caption-line: 16px;
  --pp-overline-size: 11px; --pp-overline-line: 14px; --pp-overline-weight: 600; --pp-overline-track: 0.08em;
  --pp-label-size: 13px;    --pp-label-line: 16px;    --pp-label-weight: 500;
  --pp-mono-size: 13px;     --pp-mono-line: 18px;
  --pp-weight-regular: 400;
  --pp-weight-medium: 500;
  --pp-weight-semibold: 600;
  --pp-weight-bold: 700;

  /* Space: a 4px grid */
  --pp-space-0: 0;
  --pp-space-0-5: 2px;
  --pp-space-1: 4px;
  --pp-space-1-5: 6px;
  --pp-space-2: 8px;
  --pp-space-3: 12px;
  --pp-space-4: 16px;
  --pp-space-5: 20px;
  --pp-space-6: 24px;
  --pp-space-8: 32px;
  --pp-space-10: 40px;
  --pp-space-12: 48px;
  --pp-space-16: 64px;

  /* Radius */
  --pp-radius-none: 0;
  --pp-radius-xs: 2px;    /* checkboxes, tiny chips */
  --pp-radius-sm: 4px;    /* tags, badges, small controls */
  --pp-radius-md: 6px;    /* buttons, inputs, menu items */
  --pp-radius-lg: 8px;    /* popovers, menus, inline panels */
  --pp-radius-xl: 12px;   /* dialogs */
  --pp-radius-full: 9999px; /* pills, avatars, switches */

  /* Borders */
  --pp-border-width: 1px;
  --pp-border-width-strong: 2px;
  --pp-focus-width: 2px;
  --pp-focus-offset: 2px;

  /* Control sizes (height). Touch density raises the default to 44px. */
  --pp-control-xs: 24px;
  --pp-control-sm: 28px;
  --pp-control-md: 32px;
  --pp-control-lg: 40px;
  --pp-control-touch: 44px;
  --pp-control: var(--pp-control-md); /* default */

  /* Icons (Lucide, 1.75 stroke) */
  --pp-icon-xs: 12px;
  --pp-icon-sm: 14px;
  --pp-icon-md: 16px;
  --pp-icon-lg: 20px;
  --pp-icon-xl: 24px;
  --pp-icon-stroke: 1.75;

  /* Layout */
  --pp-topbar-height: 48px;
  --pp-sidebar-width: 248px;
  --pp-sidebar-collapsed: 56px;
  --pp-inspector-width: 320px;
  --pp-content-max: 1280px;
  --pp-reading-max: 680px;
  /* Breakpoints (for reference; CSS variables can't be used in @media):
     sm 640px · md 900px · lg 1200px · xl 1600px */

  /* Motion */
  --pp-duration-instant: 80ms;   /* hover, press */
  --pp-duration-fast: 140ms;     /* toggles, small reveals */
  --pp-duration-base: 200ms;     /* menus, popovers */
  --pp-duration-slow: 320ms;     /* dialogs, sheets, page transitions */
  --pp-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --pp-ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --pp-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* Layers */
  --pp-z-base: 0;
  --pp-z-sticky: 100;
  --pp-z-dropdown: 1000;
  --pp-z-overlay: 1100;
  --pp-z-modal: 1200;
  --pp-z-popover: 1300;
  --pp-z-toast: 1400;
  --pp-z-tooltip: 1500;
}

/* Light theme forced on part of a page. */
[data-theme="light"] {
  color-scheme: light;
  --pp-bg-canvas: var(--pp-neutral-0);
  --pp-bg-surface: var(--pp-pure-white);
  --pp-bg-raised: var(--pp-pure-white);
  --pp-bg-sunken: var(--pp-neutral-50);
  --pp-bg-inverse: var(--pp-neutral-900);
  --pp-bg-hover: rgb(37 42 45 / 0.05);
  --pp-bg-active: rgb(37 42 45 / 0.09);
  --pp-bg-selected: var(--pp-blue-50);
  --pp-bg-scrim: rgb(13 17 20 / 0.45);
  --pp-text: var(--pp-neutral-900);
  --pp-text-muted: var(--pp-neutral-600);
  --pp-text-subtle: #5f6366;
  --pp-text-disabled: var(--pp-neutral-400);
  --pp-text-inverse: var(--pp-neutral-0);
  --pp-text-link: var(--pp-blue-700);
  --pp-text-link-inverse: var(--pp-blue-300);
  --pp-border-subtle: var(--pp-neutral-100);
  --pp-border: var(--pp-neutral-200);
  --pp-border-control: var(--pp-neutral-300);
  --pp-border-control-strong: var(--pp-neutral-500);
  --pp-focus-ring: var(--pp-blue-600);
  --pp-accent-subtle-bg: var(--pp-blue-100);
  --pp-accent-subtle-text: var(--pp-blue-800);
  --pp-accent-text: var(--pp-blue-700);
  --pp-success-text: var(--pp-green-700);
  --pp-success-bg: var(--pp-green-100);
  --pp-success-bg-text: var(--pp-green-800);
  --pp-warning-text: var(--pp-amber-800);
  --pp-warning-bg: var(--pp-amber-100);
  --pp-warning-bg-text: var(--pp-amber-800);
  --pp-danger-text: var(--pp-red-700);
  --pp-danger-bg: var(--pp-red-100);
  --pp-danger-bg-text: var(--pp-red-800);
  --pp-info-bg: var(--pp-blue-100);
  --pp-info-bg-text: var(--pp-blue-800);
  --pp-shadow-sm: 0 1px 2px rgb(21 26 29 / 0.08);
  --pp-shadow-md: 0 1px 2px rgb(21 26 29 / 0.06), 0 4px 12px rgb(21 26 29 / 0.10);
  --pp-shadow-lg: 0 2px 6px rgb(21 26 29 / 0.08), 0 16px 40px rgb(21 26 29 / 0.18);
}

/* Dark theme: the system setting, unless light is forced… */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --pp-bg-canvas: var(--pp-neutral-950);
    --pp-bg-surface: var(--pp-neutral-900);
    --pp-bg-raised: var(--pp-neutral-800);
    --pp-bg-sunken: var(--pp-neutral-1000);
    --pp-bg-inverse: var(--pp-neutral-0);
    --pp-bg-hover: rgb(244 244 244 / 0.06);
    --pp-bg-active: rgb(244 244 244 / 0.10);
    --pp-bg-selected: var(--pp-blue-950);
    --pp-bg-scrim: rgb(0 0 0 / 0.6);
    --pp-text: var(--pp-neutral-0);
    --pp-text-muted: var(--pp-neutral-200);
    --pp-text-subtle: var(--pp-neutral-300);
    --pp-text-disabled: var(--pp-neutral-500);
    --pp-text-inverse: var(--pp-neutral-900);
    --pp-text-link: var(--pp-blue-400);
    --pp-text-link-inverse: var(--pp-blue-700);
    --pp-border-subtle: var(--pp-neutral-800);
    --pp-border: var(--pp-neutral-700);
    --pp-border-control: var(--pp-neutral-600);
    --pp-border-control-strong: var(--pp-neutral-400);
    --pp-focus-ring: var(--pp-blue-400);
    --pp-accent-subtle-bg: var(--pp-blue-950);
    --pp-accent-subtle-text: var(--pp-blue-300);
    --pp-accent-text: var(--pp-blue-400);
    --pp-success-text: var(--pp-green-400);
    --pp-success-bg: var(--pp-green-950);
    --pp-success-bg-text: var(--pp-green-300);
    --pp-warning-text: var(--pp-amber-400);
    --pp-warning-bg: var(--pp-amber-950);
    --pp-warning-bg-text: var(--pp-amber-300);
    --pp-danger-text: var(--pp-red-400);
    --pp-danger-bg: var(--pp-red-950);
    --pp-danger-bg-text: var(--pp-red-300);
    --pp-info-bg: var(--pp-blue-950);
    --pp-info-bg-text: var(--pp-blue-300);
    --pp-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --pp-shadow-md: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 16px rgb(0 0 0 / 0.35);
    --pp-shadow-lg: 0 2px 6px rgb(0 0 0 / 0.35), 0 20px 48px rgb(0 0 0 / 0.5);
  }
}

/* …and wherever dark is forced. Same values as above. */
[data-theme="dark"] {
  color-scheme: dark;
  --pp-bg-canvas: var(--pp-neutral-950);
  --pp-bg-surface: var(--pp-neutral-900);
  --pp-bg-raised: var(--pp-neutral-800);
  --pp-bg-sunken: var(--pp-neutral-1000);
  --pp-bg-inverse: var(--pp-neutral-0);
  --pp-bg-hover: rgb(244 244 244 / 0.06);
  --pp-bg-active: rgb(244 244 244 / 0.10);
  --pp-bg-selected: var(--pp-blue-950);
  --pp-bg-scrim: rgb(0 0 0 / 0.6);
  --pp-text: var(--pp-neutral-0);
  --pp-text-muted: var(--pp-neutral-200);
  --pp-text-subtle: var(--pp-neutral-300);
  --pp-text-disabled: var(--pp-neutral-500);
  --pp-text-inverse: var(--pp-neutral-900);
  --pp-text-link: var(--pp-blue-400);
  --pp-text-link-inverse: var(--pp-blue-700);
  --pp-border-subtle: var(--pp-neutral-800);
  --pp-border: var(--pp-neutral-700);
  --pp-border-control: var(--pp-neutral-600);
  --pp-border-control-strong: var(--pp-neutral-400);
  --pp-focus-ring: var(--pp-blue-400);
  --pp-accent-subtle-bg: var(--pp-blue-950);
  --pp-accent-subtle-text: var(--pp-blue-300);
  --pp-accent-text: var(--pp-blue-400);
  --pp-success-text: var(--pp-green-400);
  --pp-success-bg: var(--pp-green-950);
  --pp-success-bg-text: var(--pp-green-300);
  --pp-warning-text: var(--pp-amber-400);
  --pp-warning-bg: var(--pp-amber-950);
  --pp-warning-bg-text: var(--pp-amber-300);
  --pp-danger-text: var(--pp-red-400);
  --pp-danger-bg: var(--pp-red-950);
  --pp-danger-bg-text: var(--pp-red-300);
  --pp-info-bg: var(--pp-blue-950);
  --pp-info-bg-text: var(--pp-blue-300);
  --pp-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --pp-shadow-md: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 16px rgb(0 0 0 / 0.35);
  --pp-shadow-lg: 0 2px 6px rgb(0 0 0 / 0.35), 0 20px 48px rgb(0 0 0 / 0.5);
}

/* Touch density: tablets and phones on set. */
[data-density="touch"] {
  --pp-control: var(--pp-control-touch);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pp-duration-instant: 0ms;
    --pp-duration-fast: 0ms;
    --pp-duration-base: 0ms;
    --pp-duration-slow: 0ms;
  }
}