/* Flowly Web — design tokens.
   Values follow the design export (flow_minimal_home / project_lumina_minimal_production)
   and cupertino_studio_flow/DESIGN.md where they do not conflict: off-white canvas,
   white cards with hairline borders, Inter, blue pill CTAs, tinted department hues.
   Components live in app.css; change colours/radii/type here. */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light; /* light-dark() in the stylesheets follows this; the theme below flips it */
  --ink-rgb: 0 0 0;     /* hairlines and hover washes: rgb(var(--ink-rgb) / .06) */
  --paper-rgb: 255 255 255;
  --tint-ink: #000000;  /* status / type tints mix their text toward this (ui/components.js) */
  --bg: #f5f5f7;
  --bg-home: #fbfbfd;
  --card: #ffffff;
  --subtle: #f5f5f7;
  --pill-bg: #ebebef;
  --border: rgba(0, 0, 0, 0.06);
  --border-strong: #e5e5ea;
  --text: #1d1d1f;
  --text-2: #86868b;
  --text-3: #a1a1a6;
  --blue: #0071e3;
  --blue-hover: #0077ed;
  --blue-soft: #eef5fe;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.03);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-pop: 0 8px 32px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.04);
  --radius-card: 16px;
  --radius-ctl: 8px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Responsive layout tokens — the one adaptive system. Pages, panels and drawers size from these;
     breakpoints are content-driven (640 compact · 760 stacked heads · 900/1100 side panels fold). */
  --page-gutter: clamp(16px, 2.5vw, 32px);   /* outer page margin: 16 px on a phone, 32 px on a wide monitor */
  --content-max: 72rem;                      /* reading pages: dailies, sign-in, notices */
  --grid-max: none;                          /* card grids (home): use the full width — auto-fill adds columns, cards stay ~280–560 px */
  --workspace-max: none;                     /* production workspaces: tables, calendar, casting, pipeline — full width on wide/ultrawide monitors */
  --side-panel: clamp(300px, 24vw, 420px);   /* bounded side panels (Asset Library); the board gets the rest */
  --gap-compact: 8px;
  --gap: 12px;
  --gap-lg: 20px;
  --touch: 44px;                             /* comfortable hit target on coarse pointers */
  --header-h: 56px;
  --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);

  /* Department / status hues (tailwind emerald/blue/amber/indigo/teal/rose) */
  --emerald: #10b981; --emerald-700: #047857; --emerald-50: #ecfdf5; --emerald-200: #a7f3d0;
  --blue-500: #3b82f6; --blue-700: #1d4ed8; --blue-50: #eff6ff; --blue-200: #bfdbfe;
  --amber: #f59e0b; --amber-700: #b45309; --amber-50: #fffbeb; --amber-200: #fde68a;
  --indigo: #6366f1; --indigo-700: #4338ca; --indigo-50: #eef2ff; --indigo-200: #c7d2fe;
  --teal: #14b8a6; --teal-700: #0f766e; --teal-50: #f0fdfa; --teal-200: #99f6e4;
  --rose: #f43f5e; --rose-700: #be123c; --rose-50: #fff1f2; --rose-200: #fecdd3;
  --zinc-100: #f4f4f5; --zinc-200: #e4e4e7; --zinc-500: #71717a;
}


/* Department colour scopes: set --c/--bg/--bd used by tinted pills + lane backgrounds */
.dept-layout { --c: var(--emerald-700); --bg: var(--emerald-50); --bd: rgba(167, 243, 208, 0.7); --lane: rgba(16, 185, 129, 0.10); --dot: var(--emerald); }
.dept-anim   { --c: var(--blue-700);    --bg: var(--blue-50);    --bd: rgba(191, 219, 254, 0.7); --lane: rgba(59, 130, 246, 0.10); --dot: var(--blue-500); }
.dept-light  { --c: var(--amber-700);   --bg: var(--amber-50);   --bd: rgba(253, 230, 138, 0.7); --lane: rgba(245, 158, 11, 0.10); --dot: var(--amber); }
.dept-cfx    { --c: var(--indigo-700);  --bg: var(--indigo-50);  --bd: rgba(199, 210, 254, 0.7); --lane: rgba(99, 102, 241, 0.10); --dot: var(--indigo); }
.dept-fx     { --c: var(--teal-700);    --bg: var(--teal-50);    --bd: rgba(153, 246, 228, 0.7); --lane: rgba(20, 184, 166, 0.10); --dot: var(--teal); }
.dept-render { --c: var(--rose-700);    --bg: var(--rose-50);    --bd: rgba(254, 205, 211, 0.7); --lane: rgba(244, 63, 94, 0.10); --dot: var(--rose); }
.dept-modeling { --c: var(--indigo-700); --bg: var(--indigo-50); --bd: rgba(199, 210, 254, 0.7); --lane: rgba(99, 102, 241, 0.10); --dot: var(--indigo); }
.dept-lookdev  { --c: var(--amber-700);  --bg: var(--amber-50);  --bd: rgba(253, 230, 138, 0.7); --lane: rgba(245, 158, 11, 0.10); --dot: var(--amber); }
.dept-rigging  { --c: var(--teal-700);   --bg: var(--teal-50);   --bd: rgba(153, 246, 228, 0.7); --lane: rgba(20, 184, 166, 0.10); --dot: var(--teal); }


/* Calendar event palette (from the calendar reference) */
:root {
  --cal-span: #1f1947; --cal-span-hover: #28215c; --cal-span-text: #fcf8fb; --cal-span-meta: #abc7ff;
  --cal-deadline: #bc2323; --cal-milestone: #684aac; --cal-client: #7d1f42; --cal-kickoff: #c26200;
  --cal-leave: #0284c7; --cal-leave-bg: #e6f4fd; --cal-meeting: #7c3aed; --cal-today: #0284c7;
  --cal-cell: #f6f3f5; --cal-cell-hover: #f0edef;
}


/* ---------- Dark theme (Felix, 2026-11-13: "a dark/light mode for the entirety of Flowly Web").
   The choice (Light / Dark / System) is set on <html data-theme> before the first paint (index.html) and by
   ui/theme.js. Everything reads these tokens, or light-dark(<light>, <dark>) for one-off colours, which follows
   color-scheme. Printing stays light (paper), so the block is screen-only. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --ink-rgb: 255 255 255;
    --paper-rgb: 28 28 30;
    --tint-ink: #ffffff;
    --bg: #000000;
    --bg-home: #0b0b0c;
    --card: #1c1c1e;
    --subtle: #2c2c2e;
    --pill-bg: #3a3a3c;
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: #38383a;
    --text: #f5f5f7;
    --text-2: #98989d;
    --text-3: #6e6e73;
    --blue: #0a84ff;
    --blue-hover: #409cff;
    --blue-soft: #0f2a47;
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.55);
    --shadow-pop: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);

    --emerald-700: #34d399; --emerald-50: #0d2a20; --emerald-200: #1f5c45;
    --blue-700: #93c5fd;    --blue-50: #0f2240;    --blue-200: #1e3f73;
    --amber-700: #fbbf24;   --amber-50: #2e2208;   --amber-200: #6b4e10;
    --indigo-700: #a5b4fc;  --indigo-50: #1b1d3d;  --indigo-200: #363b7a;
    --teal-700: #5eead4;    --teal-50: #0a2a27;    --teal-200: #145c55;
    --rose-700: #fda4af;    --rose-50: #33121a;    --rose-200: #6e2433;
    --zinc-100: #2c2c2e; --zinc-200: #3a3a3c; --zinc-500: #98989d;

    --cal-span: #3b3278; --cal-span-hover: #473d8f; --cal-span-text: #fcf8fb; --cal-span-meta: #c3d6ff;
    --cal-leave-bg: #0c2a3d; --cal-cell: #161618; --cal-cell-hover: #222225;
  }
  :root[data-theme="dark"] :is(.dept-layout, .dept-anim, .dept-light, .dept-cfx, .dept-fx, .dept-render, .dept-modeling, .dept-lookdev, .dept-rigging) {
    --bd: color-mix(in srgb, var(--dot) 35%, transparent); --lane: color-mix(in srgb, var(--dot) 16%, transparent);
  }
}