/* =====================================================================================
   The shared look file for the factory and every client HQ.
   Light = "Paper Desk", every value read from the first HQ's Main office. Dark = "Night Studio".
   Every part uses these names, never its own colors, so one switch changes everything.

   How the switch works: <html data-theme="light"> or <html data-theme="dark">. Any element can
   carry data-theme too, so a light HQ preview can sit inside the dark factory.
   With no data-theme, the page follows the computer's own light or dark setting.
   A client's brand changes only --brand-* and --accent (see "Brand" below).
   ===================================================================================== */

@import url(fonts/manrope.css);

:root {
  /* ---- Type: Manrope only ---- */
  --font: Manrope, Arial, sans-serif;
  --text-xs: 11px;     /* caps labels on the room, badges */
  --text-sm: 12.5px;   /* second lines, small notes */
  --text-md: 14px;     /* body text, buttons */
  --text-lg: 16px;     /* card titles */
  --text-xl: 20px;     /* page titles */
  --text-2xl: 26px;    /* big numbers */
  --weight-regular: 500;
  --weight-strong: 700;
  --weight-heavy: 800;
  --caps-spacing: .1em;
  --line: 1.45;

  /* ---- Shapes ---- */
  --radius-sm: 8px;    /* boxed labels, small chips */
  --radius-md: 10px;   /* buttons, menu rows */
  --radius-lg: 12px;   /* cards, panels */
  --radius-xl: 16px;   /* the side menu, the sheet */
  --radius-tag: 14px;  /* name tags in the Main office */
  --radius-pill: 999px;
  --gap-1: 4px; --gap-2: 8px; --gap-3: 12px; --gap-4: 16px; --gap-5: 24px; --gap-6: 32px;

  /* ---- Brand: the only colors a client changes (logo, name, one or two accents) ---- */
  --brand-navy: #14243B;
  --brand-blue: #5B93D6;
  --brand-light: #BCD5F1;
  --brand-slate: #4A5568;
}

/* =========================== Light: Paper Desk =========================== */
:root, [data-theme="light"] {
  color-scheme: light;
  /* ground and surfaces */
  --ground: #EEF3F9;          /* the desk behind everything */
  --panel: #FFFFFF;           /* cards, the sheet, the side menu */
  --raised: #F9FBFE;
  --mist: #F3F7FC;            /* hover */
  --select: #E3EEFA;          /* the chosen row */
  --line: #BCD5F1;            /* card and panel borders (1px) */
  --line-soft: #DCE7F4;       /* dividers inside a card */
  /* words */
  --ink: #14243B;             /* main text, main buttons */
  --ink-soft: #4A5568;        /* second lines */
  --ink-faint: #5E6A7D;       /* caps labels (darkened from #8A96A8, which was too faint to read) */
  /* accent */
  --accent: var(--brand-blue);
  --accent-strong: var(--brand-navy);
  --on-accent-strong: #FFFFFF;
  --focus: var(--brand-blue);
  /* status: always shown with words */
  --status-red: #B23A3A;   --status-red-dot: #C9433F;   --status-red-bg: #FCECEB;
  --status-amber: #9A5A00; --status-amber-dot: #C98A1B; --status-amber-bg: #FFF4DE;
  --status-green: #1D7A52; --status-green-dot: #3E8E6A; --status-green-bg: #E6F4EC;
  --badge: #C9433F;           /* the red number badge */
  /* paper things: brown folders, sticky notes, the cork board */
  --kraft: #CFAD7D; --kraft-edge: #AE8A58; --kraft-ink: #3C2810; --kraft-deep: #B48E5C;
  --fold-1: #CFAD7D; --fold-2: #C9A574; --fold-3: #D6B98E; --fold-4: #C3A06F;
  --note-yellow: #FFF0A3; --note-pink: #FFDCE3; --note-blue: #CFE2FA; --note-green: #DAF1DC;
  --note-ink: #14243B;
  --cork: #F4EDE1; --cork-dot: #E6DAC6; --cork-frame: #FFFFFF; --pin: #C94C4C;
  /* the community board: cork in the light look */
  --board-face: radial-gradient(var(--cork-dot) 1px, transparent 1.2px) 0 0 / 9px 9px, var(--cork);
  --board-frame: var(--cork-frame); --board-frame-width: 6px;
  --board-shadow: 0 0 0 1px var(--office-wall-edge); --board-shadow-flat: 0 0 0 1px var(--line);
  /* notifications ("1 waiting"): red, so it reads as something to do */
  --notice-ink: #B23A3A; --notice-bg: #FCECEB; --notice-edge: #E5484D; --notice-dot: #E5484D;
  --notice-glow: none; --notice-dot-glow: none;
  /* the Main office room */
  --office-stage-top: #FBFCFE; --office-stage-bottom: #EDF2F8;
  --office-floor: #F4F7FB; --office-floor-edge: #14243B;
  --office-room: #FFFFFF; --office-room-grid: #EEF2F7; --office-room-edge: #D6E0EC;
  --office-main: #F7FAFD; --office-main-grid: #E8EEF6;
  --office-open: #FBFCFE;
  --office-glass-top: rgba(228,238,249,.55); --office-glass-bottom: rgba(214,228,245,.30);
  --office-glass-edge: rgba(91,147,214,.40); --office-glass-cap: #8FAACB;
  --office-wall-top: #FFFFFF; --office-wall-bottom: #F3F6FA; --office-wall-edge: #D6E0EC; --office-wall-cap: #14243B;
  --office-mat: #E3ECF7; --office-mat-edge: #BCD5F1; --office-mat-ink: #35679F; /* darkened from #5B93D6, too faint on the mat */
  --office-rug: #E8F0FA; --office-rug-edge: #D3E1F1;
  --office-desk: #FFFFFF; --office-desk-edge: #CBD7E6;
  --office-chair: #EEF3F9; --office-chair-edge: #D3DDEA;
  --office-monitor: #14243B; --office-monitor-rim: #2B3E5A;
  --office-cabinet: #F7F9FC; --office-cabinet-line: #CBD7E6;
  --office-table-1: #FFFFFF; --office-table-2: #F9F5EE; --office-table-3: #F0E8DA;
  --office-table-edge: #E2D6C2; --office-table-full: #E7C3BE; --office-table-rim: #E4D9C6;
  /* the Main office table: the paper-desk table shows in this look; the glass one is used only if a client picks it */
  --office-table-wood: block; --office-table-glass: none;
  --office-glass-table-1: rgba(188,213,241,.62); --office-glass-table-2: rgba(141,182,232,.34); --office-glass-table-3: rgba(188,213,241,.52);
  --office-glass-table-rim: rgba(91,147,214,.70); --office-glass-table-edge: rgba(91,147,214,.45); --office-glass-table-full: rgba(201,67,63,.55);
  --office-glass-table-shine: rgba(255,255,255,.55); --office-table-base: #B9C7D8; --office-table-base-top: #D5DFEB; --office-table-glow: rgba(91,147,214,.16);
  --office-tag: #FFFFFF; --office-tag-edge: #BCD5F1; --office-tag-open: #F9FBFE;
  /* shadows */
  --shadow-card: 0 1px 2px rgba(20,36,59,.06);
  --shadow-float: 0 8px 20px rgba(20,36,59,.12);
  --shadow-paper: 0 3px 7px rgba(20,36,59,.12);
  --shadow-pop: 0 28px 56px rgba(20,36,59,.28);
  --backdrop: rgba(20,36,59,.35);
}

/* =========================== Dark: Night Studio =========================== */
[data-theme="dark"] {
  color-scheme: dark;
  --ground: #12161C;
  --panel: #1A2029;
  --raised: #1F2630;
  --mist: #1F2630;
  --select: #243142;
  --line: #2A3340;
  --line-soft: #232B36;
  --ink: #E6ECF3;
  --ink-soft: #A9B4C2;
  --ink-faint: #8D99A8;
  --accent: var(--brand-blue);
  --accent-strong: #5B93D6;
  --on-accent-strong: #0E1520;
  --focus: #8DB6E8;
  --status-red: #F07075;   --status-red-dot: #E5484D;   --status-red-bg: #3A1F24;
  --status-amber: #F0B45A; --status-amber-dot: #E8A33D; --status-amber-bg: #3A2D18;
  --status-green: #5CC793; --status-green-dot: #3FB37F; --status-green-bg: #17322A;
  --badge: #C9433F;           /* white numbers need this darker red to be readable */
  --kraft: #B8996C; --kraft-edge: #8F7247; --kraft-ink: #2A1C0B; --kraft-deep: #A0825A;
  --fold-1: #B8996C; --fold-2: #B39266; --fold-3: #BEA27B; --fold-4: #AD8E62;
  --note-yellow: #E9DC8F; --note-pink: #E8C7CE; --note-blue: #BCCFE6; --note-green: #C7DDC9;
  --note-ink: #14243B;
  --cork: #2B2721; --cork-dot: #3A342B; --cork-frame: #1F2630; --pin: #E5484D;
  /* Night Studio community board: light blue glass, like the table and the walls, held by four steel pins */
  --board-face: radial-gradient(circle at 10px 10px, #A9B4C2 3px, #5E6A7D 3.6px, transparent 4.2px), radial-gradient(circle at calc(100% - 10px) 10px, #A9B4C2 3px, #5E6A7D 3.6px, transparent 4.2px), radial-gradient(circle at 10px calc(100% - 10px), #A9B4C2 3px, #5E6A7D 3.6px, transparent 4.2px), radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #A9B4C2 3px, #5E6A7D 3.6px, transparent 4.2px), linear-gradient(135deg, rgba(141,182,232,.26), rgba(91,147,214,.10) 55%, rgba(141,182,232,.20)), #18202B;
  --board-frame: rgba(165,200,240,.75); --board-frame-width: 2px;
  --board-shadow: 0 0 0 1px rgba(91,147,214,.30);  /* no blur here: a blurred shadow on the 3D wall gets cut off */
  --board-shadow-flat: 0 0 16px rgba(91,147,214,.22), inset 0 0 24px rgba(141,182,232,.14);
  /* notifications ("1 waiting"): electric red with a glow, to match the electric blue */
  --notice-ink: #FF7A86; --notice-bg: rgba(255,59,79,.16); --notice-edge: #FF3B4F; --notice-dot: #FF3B4F;
  --notice-glow: 0 0 0 1px rgba(255,59,79,.35), 0 0 16px rgba(255,59,79,.45); --notice-dot-glow: 0 0 8px #FF3B4F;
  --office-stage-top: #161B22; --office-stage-bottom: #12161C;
  --office-floor: #161B22; --office-floor-edge: #5B93D6;
  --office-room: #1A2029; --office-room-grid: #222A35; --office-room-edge: #2A3340;
  --office-main: #1C232D; --office-main-grid: #252E3A;
  --office-open: #181E26;
  --office-glass-top: rgba(91,147,214,.16); --office-glass-bottom: rgba(91,147,214,.06);
  --office-glass-edge: rgba(141,182,232,.35); --office-glass-cap: #4A6A92;
  --office-wall-top: #1F2630; --office-wall-bottom: #1A2029; --office-wall-edge: #2A3340; --office-wall-cap: #8DB6E8;
  --office-mat: #1F2A3A; --office-mat-edge: #2E4A6E; --office-mat-ink: #8DB6E8;
  --office-rug: #1C2633; --office-rug-edge: #26354A;
  --office-desk: #263040; --office-desk-edge: #2F3B4C;
  --office-chair: #222B38; --office-chair-edge: #2A3340;
  --office-monitor: #0B0F14; --office-monitor-rim: #2A3340;
  --office-cabinet: #222A35; --office-cabinet-line: #34404F;
  --office-table-1: #3A3328; --office-table-2: #322C22; --office-table-3: #2A251D;
  --office-table-edge: #4A4033; --office-table-full: #6B3A38; --office-table-rim: #4A4033;
  /* Night Studio table: light blue glass, like the office walls, on a graphite stand with a soft blue glow */
  --office-table-wood: none; --office-table-glass: block;
  --office-glass-table-1: rgba(141,182,232,.30); --office-glass-table-2: rgba(91,147,214,.13); --office-glass-table-3: rgba(141,182,232,.24);
  --office-glass-table-rim: rgba(165,200,240,.75); --office-glass-table-edge: rgba(141,182,232,.50); --office-glass-table-full: rgba(229,72,77,.60);
  --office-glass-table-shine: rgba(141,182,232,.22); --office-table-base: #2A3340; --office-table-base-top: #3A4656; --office-table-glow: rgba(91,147,214,.30);
  --office-tag: #1F2630; --office-tag-edge: #2E4A6E; --office-tag-open: #1A2029;
  --shadow-card: 0 1px 2px rgba(0,0,0,.35);
  --shadow-float: 0 8px 20px rgba(0,0,0,.40);
  --shadow-paper: 0 3px 7px rgba(0,0,0,.35);
  --shadow-pop: 0 28px 56px rgba(0,0,0,.55);
  --backdrop: rgba(6,9,13,.55);
}

/* With no choice made, follow the computer's own setting. (Same values as Night Studio.) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --ground: #12161C; --panel: #1A2029; --raised: #1F2630; --mist: #1F2630; --select: #243142;
    --line: #2A3340; --line-soft: #232B36; --ink: #E6ECF3; --ink-soft: #A9B4C2; --ink-faint: #8D99A8;
    --accent-strong: #5B93D6; --on-accent-strong: #0E1520; --focus: #8DB6E8;
    --status-red: #F07075; --status-red-dot: #E5484D; --status-red-bg: #3A1F24;
    --status-amber: #F0B45A; --status-amber-dot: #E8A33D; --status-amber-bg: #3A2D18;
    --status-green: #5CC793; --status-green-dot: #3FB37F; --status-green-bg: #17322A;
    --badge: #C9433F;
    --kraft: #B8996C; --kraft-edge: #8F7247; --kraft-ink: #2A1C0B; --kraft-deep: #A0825A;
    --fold-1: #B8996C; --fold-2: #B39266; --fold-3: #BEA27B; --fold-4: #AD8E62;
    --note-yellow: #E9DC8F; --note-pink: #E8C7CE; --note-blue: #BCCFE6; --note-green: #C7DDC9;
    --cork: #2B2721; --cork-dot: #3A342B; --cork-frame: #1F2630; --pin: #E5484D;
    /* Night Studio community board: light blue glass, like the table and the walls, held by four steel pins */
    --board-face: radial-gradient(circle at 10px 10px, #A9B4C2 3px, #5E6A7D 3.6px, transparent 4.2px), radial-gradient(circle at calc(100% - 10px) 10px, #A9B4C2 3px, #5E6A7D 3.6px, transparent 4.2px), radial-gradient(circle at 10px calc(100% - 10px), #A9B4C2 3px, #5E6A7D 3.6px, transparent 4.2px), radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #A9B4C2 3px, #5E6A7D 3.6px, transparent 4.2px), linear-gradient(135deg, rgba(141,182,232,.26), rgba(91,147,214,.10) 55%, rgba(141,182,232,.20)), #18202B;
    --board-frame: rgba(165,200,240,.75); --board-frame-width: 2px;
    --board-shadow: 0 0 0 1px rgba(91,147,214,.30);  /* no blur here: a blurred shadow on the 3D wall gets cut off */
    --board-shadow-flat: 0 0 16px rgba(91,147,214,.22), inset 0 0 24px rgba(141,182,232,.14);
    /* notifications ("1 waiting"): electric red with a glow, to match the electric blue */
    --notice-ink: #FF7A86; --notice-bg: rgba(255,59,79,.16); --notice-edge: #FF3B4F; --notice-dot: #FF3B4F;
    --notice-glow: 0 0 0 1px rgba(255,59,79,.35), 0 0 16px rgba(255,59,79,.45); --notice-dot-glow: 0 0 8px #FF3B4F;
    --office-stage-top: #161B22; --office-stage-bottom: #12161C;
    --office-floor: #161B22; --office-floor-edge: #5B93D6;
    --office-room: #1A2029; --office-room-grid: #222A35; --office-room-edge: #2A3340;
    --office-main: #1C232D; --office-main-grid: #252E3A; --office-open: #181E26;
    --office-glass-top: rgba(91,147,214,.16); --office-glass-bottom: rgba(91,147,214,.06);
    --office-glass-edge: rgba(141,182,232,.35); --office-glass-cap: #4A6A92;
    --office-wall-top: #1F2630; --office-wall-bottom: #1A2029; --office-wall-edge: #2A3340; --office-wall-cap: #8DB6E8;
    --office-mat: #1F2A3A; --office-mat-edge: #2E4A6E; --office-mat-ink: #8DB6E8;
    --office-rug: #1C2633; --office-rug-edge: #26354A;
    --office-desk: #263040; --office-desk-edge: #2F3B4C;
    --office-chair: #222B38; --office-chair-edge: #2A3340;
    --office-monitor: #0B0F14; --office-monitor-rim: #2A3340;
    --office-cabinet: #222A35; --office-cabinet-line: #34404F;
    --office-table-1: #3A3328; --office-table-2: #322C22; --office-table-3: #2A251D;
    --office-table-edge: #4A4033; --office-table-full: #6B3A38; --office-table-rim: #4A4033;
    /* Night Studio table: light blue glass, like the office walls, on a graphite stand with a soft blue glow */
    --office-table-wood: none; --office-table-glass: block;
    --office-glass-table-1: rgba(141,182,232,.30); --office-glass-table-2: rgba(91,147,214,.13); --office-glass-table-3: rgba(141,182,232,.24);
    --office-glass-table-rim: rgba(165,200,240,.75); --office-glass-table-edge: rgba(141,182,232,.50); --office-glass-table-full: rgba(229,72,77,.60);
    --office-glass-table-shine: rgba(141,182,232,.22); --office-table-base: #2A3340; --office-table-base-top: #3A4656; --office-table-glow: rgba(91,147,214,.30);
    --office-tag: #1F2630; --office-tag-edge: #2E4A6E; --office-tag-open: #1A2029;
    --shadow-card: 0 1px 2px rgba(0,0,0,.35); --shadow-float: 0 8px 20px rgba(0,0,0,.40);
    --shadow-paper: 0 3px 7px rgba(0,0,0,.35); --shadow-pop: 0 28px 56px rgba(0,0,0,.55);
    --backdrop: rgba(6,9,13,.55);
  }
}