/* ============================================================
   Callsheet — design tokens (SINGLE SOURCE OF TRUTH)
   ------------------------------------------------------------
   To REBRAND, change the variables in this block only.
   ► The product NAME lives in ONE place: --cc-brand (below).
     Change that string and the whole app rebrands — the wordmark,
     the tab title, and every bit of brand copy read from it.
   No other CSS file may hard-code a color or font family — every
   component references var(--cc-*). Swapping --cc-accent or
   --cc-font re-themes the entire app.

   Per-account overrides (e.g. an org's brand_accent) are applied
   at runtime by setting --cc-accent on a scope element in JS.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&family=Schibsted+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* —— Brand —— */
  --cc-brand:          "Callsheet";  /* ← THE name. Change this one string to rebrand the whole app. */
  --cc-accent:         #C9521F;   /* the orange — punctuation, not paint (deepened for a more robust read) */
  --cc-accent-tint:    #F7ECE4;   /* active nav / soft accent fill */
  --cc-accent-border:  #E6CCBC;   /* accent toggle borders */
  --cc-accent-ink:     #A8431A;   /* accent text on tint */
  --cc-accent-onchrome:#E2774B;   /* accent legible on the dark chrome */

  /* —— Surfaces (layered: chrome → canvas → surface, real depth) —— */
  --cc-canvas:         #EAE7DF;   /* deeper warm page bg so white panels separate */
  --cc-surface:        #FFFFFF;   /* cards / panels */
  --cc-surface-2:      #F3F1EC;   /* row hover / subtle fill */
  --cc-line:           #DBD6CB;   /* hairline borders */
  --cc-chip:           #ECEAE3;   /* neutral chips / tags */

  /* —— Dark chrome (sidebar + top bar form one dark L) —— */
  --cc-chrome:         #1B1915;   /* chrome background */
  --cc-chrome-2:       #2A2620;   /* hover / active within chrome */
  --cc-chrome-line:    #36312A;   /* borders inside chrome */
  --cc-chrome-ink:     #EDEAE3;   /* primary text on chrome */
  --cc-chrome-soft:    #98927F;   /* muted text on chrome */

  /* —— Ink —— */
  --cc-ink:            #1B1915;   /* primary text */
  --cc-soft:           #5F5C55;   /* secondary text */
  --cc-muted:          #7C786F;   /* tertiary text */
  --cc-faint:          #A09B90;   /* hints / placeholders */

  /* —— Semantic (used sparingly) —— */
  --cc-ok-bg:          #E8F1ED;   /* available / travel-covered */
  --cc-ok-ink:         #3F7A60;
  --cc-warn-bg:        #FBF1DD;
  --cc-warn-line:      #E9D8BC;
  --cc-warn-ink:       #8A6212;
  --cc-danger-bg:      #FBE9E7;
  --cc-danger-ink:     #B23A2B;

  /* —— Type ——
     Two faces, two jobs. Schibsted Grotesk carries display weight (headings,
     names, numbers, buttons); Onest carries the supporting copy + micro-labels
     (smoother, heavier-feeling small text — not wide-tracked dashboard caps).
     This pairing is the contract — see §4 of the design bible. */
  --cc-font:      'Schibsted Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --cc-font-soft: 'Onest', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  /* NO monospace anywhere. Figures use tabular-nums (see .cc-num). */

  /* —— Spacing scale (4/8px system) —— */
  --cc-space-1: 4px;
  --cc-space-2: 8px;
  --cc-space-3: 12px;
  --cc-space-4: 16px;
  --cc-space-5: 20px;
  --cc-space-6: 24px;
  --cc-space-8: 32px;
  --cc-space-10: 40px;

  /* —— Radii (soft & inviting — rounded, polished, not pointy) —— */
  --cc-radius-sm: 8px;    /* chips, tags, small controls */
  --cc-radius-md: 12px;   /* buttons, inputs, medium elements */
  --cc-radius-lg: 16px;   /* cards & panels */
  --cc-radius-pill: 999px;/* pills, status, the search bar — fully round */

  /* —— Misc —— */
  --cc-sidebar-w: 232px;
  --cc-topbar-h: 60px;
}

/* ============================================================
   COLOR SCHEMES — per-user swappable palettes. Default (above) is
   "Roadcase". Selecting a theme sets data-theme on <html>; each block
   overrides only the color subset, so the whole app re-skins live.
   To add one: copy a block, rename it, change the hexes.
   ============================================================ */
[data-theme="slate"]{
  --cc-chrome:#16181D; --cc-chrome-2:#23262E; --cc-chrome-line:#2F333C; --cc-chrome-ink:#ECEEF2; --cc-chrome-soft:#8B909C;
  --cc-canvas:#E7E9ED; --cc-surface:#FFFFFF; --cc-surface-2:#F1F3F6; --cc-line:#D6D9DF; --cc-chip:#EAECF0;
  --cc-ink:#181B21; --cc-soft:#555B66; --cc-muted:#747A85; --cc-faint:#9CA1AC;
  --cc-accent:#2D6FE0; --cc-accent-tint:#E8F0FD; --cc-accent-border:#C2D7F6; --cc-accent-ink:#1B52B0; --cc-accent-onchrome:#5C95F0;
  --cc-ok-bg:#E4F1EA; --cc-ok-ink:#2F7355; --cc-warn-bg:#FBF0DE; --cc-warn-line:#EDD9B4; --cc-warn-ink:#8A6212; --cc-danger-bg:#FBE8E8; --cc-danger-ink:#B23434;
}
[data-theme="forest"]{
  --cc-chrome:#15211B; --cc-chrome-2:#21302A; --cc-chrome-line:#2C3D35; --cc-chrome-ink:#E9EFEA; --cc-chrome-soft:#8AA197;
  --cc-canvas:#E8E9E2; --cc-surface:#FFFFFF; --cc-surface-2:#F2F3EC; --cc-line:#D6D9CE; --cc-chip:#EAECE2;
  --cc-ink:#1A211C; --cc-soft:#525C54; --cc-muted:#717A72; --cc-faint:#9AA39A;
  --cc-accent:#2F7D4F; --cc-accent-tint:#E6F1EA; --cc-accent-border:#C2DCCB; --cc-accent-ink:#22603C; --cc-accent-onchrome:#5BAE7C;
  --cc-ok-bg:#E4F0E8; --cc-ok-ink:#2F7355; --cc-warn-bg:#F7F0DF; --cc-warn-line:#E7D8B7; --cc-warn-ink:#866012; --cc-danger-bg:#FAE9E6; --cc-danger-ink:#A93C2B;
}
[data-theme="plum"]{
  --cc-chrome:#1A171D; --cc-chrome-2:#272231; --cc-chrome-line:#332C3E; --cc-chrome-ink:#EDEAF0; --cc-chrome-soft:#978FA3;
  --cc-canvas:#E9E6EC; --cc-surface:#FFFFFF; --cc-surface-2:#F3F0F6; --cc-line:#DAD4E0; --cc-chip:#ECE8F0;
  --cc-ink:#1D1923; --cc-soft:#5B5566; --cc-muted:#7A7385; --cc-faint:#A39CAC;
  --cc-accent:#7C4DD6; --cc-accent-tint:#F0EAFC; --cc-accent-border:#D6C6F4; --cc-accent-ink:#5E37AC; --cc-accent-onchrome:#A079E8;
  --cc-ok-bg:#E7F0EA; --cc-ok-ink:#2F7355; --cc-warn-bg:#F8F0E1; --cc-warn-line:#EBD9B8; --cc-warn-ink:#8A6212; --cc-danger-bg:#FBE8EA; --cc-danger-ink:#B23450;
}
[data-theme="mono"]{
  --cc-chrome:#171717; --cc-chrome-2:#242424; --cc-chrome-line:#323232; --cc-chrome-ink:#EDEDED; --cc-chrome-soft:#8E8E8E;
  --cc-canvas:#E8E8E6; --cc-surface:#FFFFFF; --cc-surface-2:#F2F2F0; --cc-line:#D7D7D3; --cc-chip:#EBEBE8;
  --cc-ink:#1A1A1A; --cc-soft:#565654; --cc-muted:#757572; --cc-faint:#9D9D99;
  --cc-accent:#1A1A1A; --cc-accent-tint:#E9E9E7; --cc-accent-border:#CFCFCB; --cc-accent-ink:#000000; --cc-accent-onchrome:#FFFFFF;
  --cc-ok-bg:#E8EBE8; --cc-ok-ink:#3E5A45; --cc-warn-bg:#F2EEE2; --cc-warn-line:#DDD5BE; --cc-warn-ink:#6F5A1E; --cc-danger-bg:#F3E6E5; --cc-danger-ink:#8A3A30;
}
[data-theme="midnight"]{
  --cc-chrome:#0E0F12; --cc-chrome-2:#1A1C21; --cc-chrome-line:#262931; --cc-chrome-ink:#ECEEF2; --cc-chrome-soft:#868B96;
  --cc-canvas:#15171B; --cc-surface:#1D2025; --cc-surface-2:#262A31; --cc-line:#313640; --cc-chip:#2A2E36;
  --cc-ink:#ECEEF2; --cc-soft:#AEB4BF; --cc-muted:#868B96; --cc-faint:#646A75;
  --cc-accent:#E2774B; --cc-accent-tint:#2C211B; --cc-accent-border:#4A3528; --cc-accent-ink:#F0A37F; --cc-accent-onchrome:#E2774B;
  --cc-ok-bg:#1C2A23; --cc-ok-ink:#7FC9A2; --cc-warn-bg:#2A2417; --cc-warn-line:#4A3F22; --cc-warn-ink:#E0BE72; --cc-danger-bg:#2C1B1A; --cc-danger-ink:#E58B7F;
}

/* Tabular figures everywhere numbers appear (rates, dates, counts,
   ratings) — alignment without a mono font. */
.cc-num { font-variant-numeric: tabular-nums; }