/* =========================================================
   Bravos Coffee — BACKOFFICE design system
   Audience:  managers, admins, operators at a desk
   Examples:  marking (reference), manager, roast-manager,
              reports, any desktop admin surface
   Vibe:      cool neutrals, copper accent, 12-px radii, soft
              shadows, Inter + Martian Mono, Russian UI.
   Reference: ui_kits/backoffice/ (formerly marking)
   Do NOT mix with factory.css on the same surface.
   ========================================================= */

@import url('./brand.css');

:root {
  /* ---------- NEUTRALS (light) ---------- */
  --bg:         #f4f5f7;    /* page */
  --surface:    #ffffff;    /* card */
  --raised:     #f8f9fb;    /* hover / input bg / row stripe */
  --border:     #e2e5ea;    /* primary border */
  --bl:         #eceef2;    /* border-light / divider */

  --text:       #1a1d26;    /* primary ink */
  --t2:         #5c6370;    /* secondary */
  --t3:         #9ca3b0;    /* muted */

  /* ---------- ACCENT (copper) ---------- */
  --accent:     var(--brand-copper);
  --accent-h:   var(--brand-copper-h);
  --accent-bg:  rgba(200, 145, 90, .08);
  --accent-bd:  rgba(200, 145, 90, .25);

  /* Primary button fill — full copper in light, muted tint in dark.
     Kept separate from --accent so text and chips stay crisp while
     the large button plate can stand down on dark backgrounds. */
  --primary-bg:   var(--brand-copper);
  --primary-bg-h: var(--brand-copper-h);
  --primary-fg:   #ffffff;

  /* ---------- SEMANTIC STATES (tints on brand hues) ---------- */
  --green:    var(--sem-success);  --green-bg:  #f0fdf4;  --green-bd:  #bbf7d0;  --green-fg:  #1a6a2a;
  --red:      var(--sem-error);    --red-bg:    #fef2f2;  --red-bd:    #fecaca;  --red-fg:    #8a1f1f;
  --yellow:   var(--sem-warn);     --yellow-bg: #fefce8;  --yellow-bd: #fef08a;  --yellow-fg: #6a4a0a;
  --blue:     var(--sem-info);     --blue-bg:   #eff6ff;  --blue-bd:   #dbeafe;  --blue-fg:   #1e3a8a;
  --purple:   var(--sem-note);     --purple-bg: #f5f3ff;  --purple-bd: #ddd6fe;  --purple-fg: #4c1d95;
  --neutral-fg: #4a4f5c;
  --accent-fg:  #6b3d1a;

  /* ---------- RADII ---------- */
  --r:   12px;   /* card, modal */
  --rs:  8px;    /* input, small button */
  --rx:  4px;    /* tag, chip */

  /* ---------- SHADOWS ---------- */
  --ss: 0 1px 2px rgba(0,0,0,.04);   /* subtle / resting card */
  --sh: 0 1px 3px rgba(0,0,0,.06);   /* elevated */
  --sl: 0 8px 32px rgba(0,0,0,.12);  /* modal / tooltip */

  /* ---------- LAYOUT ---------- */
  --sidebar-w:   200px;
  --header-h:    52px;
  --content-max: 1100px;

  /* ---------- TYPE SCALE ---------- */
  --fs-h1: 22px; --fw-h1: 800; --ls-h1: -0.4px;   /* page title */
  --fs-h2: 16px; --fw-h2: 700; --ls-h2: 0;        /* modal title / section */
  --fs-h3: 13px; --fw-h3: 700;                    /* row title */
  --fs-body:    14px; --fw-body:    400; --lh-body: 1.5;
  --fs-small:   13px; --fw-small:   400;
  --fs-caption: 12px; --fw-caption: 500;
  --fs-label:   11px; --fw-label:   700;           /* uppercase, tracked */
  --tr-label:   0.5px;
  --fs-stat:    26px; --fw-stat:    800; --ls-stat: -0.8px;
  --fs-mono:    12px;
}

/* ---------- DARK MODE (auto, backoffice only) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:       #0f1115;
    --surface:  #1a1d24;
    --raised:   #22262f;
    --border:   #2a2e38;
    --bl:       #353a46;
    --text:     #e0e2e8;
    --t2:       #8b90a0;
    --t3:       #4e5361;
    --accent-bg: rgba(200, 145, 90, .12);
    --accent-bd: rgba(200, 145, 90, .3);
    /* Muted primary on dark — tinted plate, not a glowing copper brick. */
    --primary-bg:   rgba(200, 145, 90, .14);
    --primary-bg-h: rgba(200, 145, 90, .22);
    --primary-fg:   #e0b58a;
    --green:  #3ecf71; --green-bg:  rgba(62,207,113,.1); --green-bd:  rgba(62,207,113,.25); --green-fg:  #7ee2a0;
    --red:    #f06060; --red-bg:    rgba(240,96,96,.1);  --red-bd:    rgba(240,96,96,.25);  --red-fg:    #ffa5a5;
    --yellow: #e8b93e; --yellow-bg: rgba(232,185,62,.1); --yellow-bd: rgba(232,185,62,.25); --yellow-fg: #ffd980;
    --blue:   #5b9ef0; --blue-bg:   rgba(91,158,240,.1); --blue-bd:   rgba(91,158,240,.25); --blue-fg:   #a0c8ff;
    --purple: #a78bfa; --purple-bg: rgba(167,139,250,.1);--purple-bd: rgba(167,139,250,.25); --purple-fg: #d4c4ff;
    --neutral-fg: #a8adbb;
    --accent-fg:  #e0b58a;
    --ss: 0 1px 2px rgba(0,0,0,.2);
    --sh: 0 1px 3px rgba(0,0,0,.3);
    --sl: 0 8px 32px rgba(0,0,0,.5);
  }
}

/* ---------- SEMANTIC ELEMENT DEFAULTS ---------- */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
}
h1, .h1 { font-family: var(--font-sans); font-size: var(--fs-h1); font-weight: var(--fw-h1); letter-spacing: var(--ls-h1); }
h2, .h2 { font-size: var(--fs-h2); font-weight: var(--fw-h2); }
h3, .h3 { font-size: var(--fs-h3); font-weight: var(--fw-h3); }
.label   { font-size: var(--fs-label); font-weight: var(--fw-label); text-transform: uppercase; letter-spacing: var(--tr-label); color: var(--t2); }
.stat    { font-size: var(--fs-stat);  font-weight: var(--fw-stat);  letter-spacing: var(--ls-stat); }