/* Carma type system — based on the Shop Floor page.
   Shared typography, color, and radius tokens for every page.
   Radius hierarchy (Erin, Nov 14 2026): tight outer pane, rounder inner cards, pill controls.
   Brand red #EE2424 is sampled from assets/carma-main-logo.png (and the light logo). */

:root,
html[data-theme="dark"]{
  color-scheme: dark;

  --font: Inter,"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --fs-display: 40px; --fw-display: 600; --ls-display: -.03em; --lh-display: 1;
  --fs-title: 30px;   --fw-title: 650;  --ls-title: -.02em;   --lh-title: 1;
  --fs-col: 17px;     --fw-col: 600;    --ls-col: .01em;      --lh-col: 1.25;
  --fs-eyebrow: 12px; --fw-eyebrow: 650;--ls-eyebrow: .08em;  --lh-eyebrow: 1.2;
  --fs-card: 16px;    --fw-card: 600;   --ls-card: -.01em;    --lh-card: 1.15;
  --fs-body: 15px;    --fw-body: 400;   --lh-body: 1.3;
  --fs-meta: 13px;    --fw-meta: 400;   --lh-meta: 1.35;
  --fs-chip: 11px;    --fw-chip: 600;   --ls-chip: .01em;
  --fw-strong: 650;
  --fs-page: 18px;
  --lh-page: 1.3;

  --bg: #000;
  --panel: #0C0C0E;
  --card: #141417;
  --card2: #1A1A1E;
  --line: #232328;
  --line2: #2E2E35;
  --text: #F4F4F6;
  --muted: #A1A1AA;
  --dim: #6B6B75;
  --accent: #1F4DD3;
  --accent-soft: rgba(31,77,211,.14);
  --accent-ink: #fff;
  --card-hover: #19191D;
  --scroll: #3A3A42;
  --scroll-hover: #55555F;

  /* Logo red #EE2424. Borders match yellow intensity (.50 dark). Labels lighten for contrast on dark cards. */
  --red-brand: #EE2424;
  --red: #EE2424;
  --red-fg: #F35E5E;
  --red-soft: rgba(238,36,36,.14);
  --st-red: rgba(238,36,36,.50);
  --st-red-glow: rgba(238,36,36,.30);
  --st-red-fg: #F35E5E;
  --banner-fg: #FFD0D0;
  --banner-line: rgba(238,36,36,.40);
  --clk-stop: #F35E5E;
  --clk-stop-line: rgba(238,36,36,.45);

  --r-pane: 10px;
  --r-card: 20px;
  --r-pill: 999px;
  --r-bubble: 18px;
  --r-tail: 3px;
  --r-swatch: 4px;

  --r-col: var(--r-pane);
  --r: var(--r-card);
  --r-btn: var(--r-pill);
  --r-panel: var(--r-card);
  --r-lg: var(--r-pane);
  --r-xl: var(--r-pill);
  --r-sm: var(--r-pill);
  --r-md: var(--r-pill);
  --r-xs: var(--r-swatch);
}

html[data-theme="light"]{
  color-scheme: light;

  --bg: #F2F2F7;
  --panel: #FFFFFF;
  --card: #FFFFFF;
  --card2: #F2F2F7;
  --line: #E5E5EA;
  --line2: #D1D1D6;
  --text: #1C1C1E;
  --muted: #636366;
  --dim: #8E8E93;
  --accent: #1F4DD3;
  --accent-soft: rgba(31,77,211,.12);
  --accent-ink: #fff;
  --card-hover: #F4F4F8;
  --scroll: #C7C7CC;
  --scroll-hover: #A1A1A6;

  --red-brand: #EE2424;
  --red: #EE2424;
  --red-fg: #C70F0F;
  --red-soft: rgba(238,36,36,.10);
  --st-red: rgba(238,36,36,.52);
  --st-red-glow: rgba(238,36,36,.14);
  --st-red-fg: #C70F0F;
  --banner-fg: #C70F0F;
  --banner-line: rgba(238,36,36,.35);
  --clk-stop: #C70F0F;
  --clk-stop-line: rgba(238,36,36,.45);
}

@media (max-width: 900px){
  :root, html[data-theme="dark"], html[data-theme="light"]{
    --fs-display: 26px;
    --fs-title: 22px;
  }
}

html, body{
  font-family: var(--font);
  font-size: var(--fs-page);
  line-height: var(--lh-page);
  font-feature-settings: "tnum" 1, "cv11" 1;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Named utilities */
.t-display{font-size:var(--fs-display);font-weight:var(--fw-display);letter-spacing:var(--ls-display);line-height:var(--lh-display);font-variant-numeric:tabular-nums}
.t-title{font-size:var(--fs-title);font-weight:var(--fw-title);letter-spacing:var(--ls-title);line-height:var(--lh-title)}
.t-col{font-size:var(--fs-col);font-weight:var(--fw-col);letter-spacing:var(--ls-col);line-height:var(--lh-col)}
.t-eyebrow{font-size:var(--fs-eyebrow);font-weight:var(--fw-eyebrow);letter-spacing:var(--ls-eyebrow);line-height:var(--lh-eyebrow);text-transform:uppercase;color:var(--dim)}
.t-card{font-size:var(--fs-card);font-weight:var(--fw-card);letter-spacing:var(--ls-card);line-height:var(--lh-card)}
.t-body{font-size:var(--fs-body);font-weight:var(--fw-body);line-height:var(--lh-body)}
.t-meta{font-size:var(--fs-meta);font-weight:var(--fw-meta);line-height:var(--lh-meta);color:var(--muted)}
.t-chip{font-size:var(--fs-chip);font-weight:var(--fw-chip);letter-spacing:var(--ls-chip)}
.r-pane{border-radius:var(--r-pane)}
.r-card{border-radius:var(--r-card)}
.r-pill{border-radius:var(--r-pill)}

/* ---------- Apply: typography (shop-floor scale) ---------- */
.brand-row h1,
header h1,
.fd-app h1,
#hdrAct h1,
.pin-card h2,
body.fd-pin h1{
  font-size: var(--fs-title);
  font-weight: var(--fw-title);
  letter-spacing: var(--ls-title);
  line-height: var(--lh-title);
}
.clock,
#clock{
  font-size: var(--fs-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  font-variant-numeric: tabular-nums;
}
.stat b{font-size:var(--fs-title);font-weight:var(--fw-title);letter-spacing:var(--ls-title)}
.stat span,
.pin-kicker,
.d-col-h h3,
.chat-list-h h3,
body.fd-pin .sub{
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--dim);
}
.col-h h2{font-size:var(--fs-col);font-weight:var(--fw-col);letter-spacing:var(--ls-col);line-height:var(--lh-col)}
.col-h .grp{font-size:var(--fs-eyebrow);font-weight:var(--fw-eyebrow);letter-spacing:var(--ls-eyebrow);line-height:var(--lh-eyebrow);text-transform:uppercase;color:var(--dim)}
.veh,
.ro b,
.d-veh,
.call .nm,
.call .veh,
.ac .nm,
.ac .veh,
#todoList .todo .want,
#allList .ac .nm,
#allList .ac .veh{font-size:var(--fs-card);font-weight:var(--fw-card);letter-spacing:var(--ls-card);line-height:var(--lh-card)}
.cust,
.ro,
.signed,
footer,
.d-spec,
.d-note,
.d-row,
.d-part,
.d-empty,
.call .want,
.ac .want,
.ac .meta,
.call .meta{font-size:var(--fs-meta);line-height:var(--lh-meta)}
.chip,
.stat-ind,
.call .chip,
.ac .chip,
#todoList .todo .chip{font-size:var(--fs-chip);font-weight:var(--fw-chip);letter-spacing:var(--ls-chip)}
.chat-msg .tx,
.chat-form textarea,
.d-job-name,
.pin-sub,
body.fd-pin .lead{font-size:var(--fs-body);line-height:var(--lh-body)}
.chat-body{font-family:var(--font)}

/* ---------- Apply: radius hierarchy ---------- */
.col,
.d-col,
.chat-dock,
html[data-theme] .board3 .col-left,
html[data-theme] .board3 .col-mid,
html[data-theme] #colChat.col-chat,
#colChat.col-chat,
body.fd-pin .card{
  border-radius: var(--r-pane);
}
.col-fade{border-radius:0 0 var(--r-pane) var(--r-pane)}

.card,
.d-hero,
.d-job,
.d-concerns,
.pin-card,
.board-menu,
.board-toast,
.tech-dd-menu,
.call,
#doneCalls .call,
#allList .ac,
#allList .ac.cardx,
#todoList .todo,
.chat-item,
.chat-item.on,
.snap,
#snap,
#txModal2,
#txModal2 .bd,
#tx2B,
#lightbox,
body.fd-pin .person{
  border-radius: var(--r-card);
}

.chip,
.col-h .n,
.clk-btn,
.theme-tg,
.floor-fd-btn,
.tech-dd-btn,
.tech-dd-item,
.floor-search input,
.floor-search-clear,
.back,
.d-tabs button,
.chat-form textarea,
.chat-form button.send,
.chat-locked-pill,
.chat-item-unread,
.chat-tab-count,
.chat-av,
.pin-key,
.pin-dots i,
.todo-view,
html[data-theme] #p-todo .todo-view,
html[data-theme] .call .chip,
html[data-theme] .ac .chip,
html[data-theme] #todoList .todo .chip,
html[data-theme] #callSearch,
html[data-theme] .srch input,
html[data-theme] .floor-search input,
html[data-theme] #floorBtn,
html[data-theme] #invBtn,
html[data-theme] #themeToggle,
html[data-theme] .tb,
.tb,
.snap-btn,
html[data-theme] .inv-wrap .snap-btn,
body.fd-pin .key{
  border-radius: var(--r-pill);
}

/* Person rows on the PIN card stay at card radius (inset inside the tight pane). */
body.fd-pin .person{border-radius:var(--r-card)}

/* Inset so 20px cards sit comfortably inside the 10px pane */
.col-in{padding:10px;gap:6px}
html[data-theme] #p-calls .scb,
html[data-theme] #p-todo .scb,
html[data-theme] #p-all .scb{
  padding:10px !important;
}

/* ---------- Apply: logo red everywhere red is used ---------- */
.chip.late,
.stat.alert b,
.pin-err,
.banner,
.board-toast .board-retry,
.chat-retry,
.chat-fail,
.clk-btn.stop,
.clk-vs.over-red,
.d-meter.over-red .d-meter-lbl,
.job-sum.over-red .clk-vs,
body.fd-pin .err{
  color: var(--red-fg);
}
.chip.late{border-color:var(--st-red);color:var(--red-fg);font-weight:600}
.live.err .dot,
#fdLive.err .dot{background:var(--red);animation:none;box-shadow:none}
.col.st-red{border-color:var(--st-red)}
.col.st-red .stat-ind,
.stat-ind.st-red,
.d-hero .stat-ind.st-red{color:var(--st-red-fg)}
.clk-btn.stop{color:var(--clk-stop);border-color:var(--clk-stop-line)}

/* Aliases so earlier Front Desk / PIN layers pick up the same tokens */
html, html[data-theme], html[data-theme="dark"], html[data-theme="light"]{
  --i-red: var(--red-fg);
  --ink: var(--text);
  --fill: var(--card2);
  --blue: var(--accent);
  --bluefill: var(--accent);
}
html[data-theme] .chip.late,
html[data-theme] .call .chip.late,
html[data-theme] #allList .ac .chip.late{
  color: var(--red-fg) !important;
  border-color: var(--st-red) !important;
}
html[data-theme] #fdLive.err .dot{
  background: var(--red) !important;
  animation: none !important;
  box-shadow: none !important;
}
html[data-theme] .chat-form .mic.on{
  background: var(--red) !important;
  border-color: var(--red) !important;
}

/* Win over earlier Front Desk layers (light theme token resets, Apple font !important). */
html[data-theme],
html[data-theme="dark"],
html[data-theme="light"],
html[data-theme=dark],
html[data-theme=light],
:root{
  --r-pane: 10px;
  --r-card: 20px;
  --r-pill: 999px;
  --r-bubble: 18px;
  --r-tail: 3px;
  --r-swatch: 4px;
  --r-col: var(--r-pane);
  --r: var(--r-card);
  --r-btn: var(--r-pill);
  --r-panel: var(--r-card);
  --r-lg: var(--r-pane);
  --r-xl: var(--r-pill);
  --r-sm: var(--r-pill);
  --r-md: var(--r-pill);
  --r-xs: var(--r-swatch);
}
html, body,
html[data-theme],
html[data-theme] body,
html[data-theme] #chatPanel,
html[data-theme] #chatPanel *,
#chatPanel, #chatPanel *{
  font-family: var(--font) !important;
}
html[data-theme] .board3 .col-left,
html[data-theme] .board3 .col-mid,
html[data-theme] #colChat.col-chat,
#colChat.col-chat,
html[data-theme=light] .board3 .col-left,
html[data-theme=light] .board3 .col-mid,
html[data-theme=light] #colChat.col-chat{
  border-radius: var(--r-pane) !important;
}
html[data-theme] .call,
html[data-theme] #doneCalls .call,
html[data-theme] #allList .ac,
html[data-theme] #allList .ac.cardx,
html[data-theme] #todoList .todo,
html[data-theme=light] .call,
html[data-theme=light] #allList .ac,
html[data-theme=light] #todoList .todo{
  border-radius: var(--r-card) !important;
}
html[data-theme] .snap,
html[data-theme] #snap,
.snap, #snap{
  border-radius: var(--r-card) !important;
}
html[data-theme] .inv-wrap .snap-btn,
html[data-theme] .snap-btn,
.snap-btn,
#snapBtn{
  border-radius: var(--r-pill) !important;
}