/* ═══════════════════════════════════════════════════════════
   BUVA – Design Tokens  (tokens.css)
   Single source of truth — imported by styles.css, holiday.css
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Brand colours ─────────────────────── */
  --clr-primary:       #7c120f;
  --clr-primary-dark:  #55110e;
  --clr-primary-hover: #9b1712;

  /* ── Text ───────────────────────────────── */
  --clr-ink:           #111827;
  --clr-ink-2:         #374151;
  --clr-muted:         #6b7280;
  --clr-subtle:        #9ca3af;

  /* ── Borders ────────────────────────────── */
  --clr-border:        #e5e7eb;
  --clr-border-strong: #d1d5db;

  /* ── Backgrounds ────────────────────────── */
  --clr-bg:            #ffffff;
  --clr-bg-alt:        #f9fafb;
  --clr-bg-section:    #f3f4f6;

  /* ── Content tracker status ─────────────── */
  --safe:    #16a34a;
  --near:    #b45309;
  --urgent:  #c2410c;
  --overdue: #b91c1c;

  /* ── Holiday tracker status ─────────────── */
  --hs-upcoming:    #6b7280;
  --hs-upcoming-bg: #f3f4f6;
  --hs-prod:        #2563eb;
  --hs-prod-bg:     #eff6ff;
  --hs-approval:    #d97706;
  --hs-approval-bg: #fffbeb;
  --hs-ready:       #16a34a;
  --hs-ready-bg:    #f0fdf4;

  /* ── Typography ─────────────────────────── */
  --ff-display: "Outfit", sans-serif;
  --ff-body:    "Inter", sans-serif;

  /* ── Layout ─────────────────────────────── */
  --max-w:    1200px;
  --gutter:   clamp(16px, 4vw, 40px);
  --header-h: 68px;   /* single authoritative value — both pages */

  /* ── Shape ──────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  /* Modals sit above everything and carry a slightly softer corner. */
  --radius-modal: 18px;

  /* ── Admin surface spacing ──────────────────
     One authoritative value per surface type. These were previously written
     as literals in each page's stylesheet and had drifted apart — topbars
     ranged 22-24px, stat cards 14-18px, and the two modals disagreed on both
     header and body padding. Anything that looks like a card, panel, topbar
     or modal should reference these rather than a new number, so the six
     admin pages stay aligned when one of them changes.

     Each value is a clamp() rather than a literal so a surface tightens with
     the viewport on its own. They used to be fixed, which meant every page
     re-patched its own padding in its own media query to stop cards looking
     cramped on a phone — six sets of overrides that drifted apart again and
     left .bp-topbar stacking an 18px pad on top of a 16px gap at 520px.
     Scaling here means a page only needs a media query when its LAYOUT
     changes (columns collapsing), never merely to reclaim space. */
  --pad-topbar:     clamp(14px, 3.2vw, 22px) clamp(14px, 4vw, 26px);
  --pad-panel:      clamp(11px, 2.4vw, 14px);
  --pad-stat:       clamp(12px, 2.6vw, 16px) clamp(13px, 3vw, 18px);
  --pad-modal-head: clamp(15px, 3vw, 20px) clamp(16px, 3.4vw, 22px) clamp(12px, 2.4vw, 16px);
  --pad-modal-body: clamp(15px, 3vw, 20px) clamp(16px, 3.4vw, 22px) clamp(17px, 3.6vw, 24px);
  /* Page shell. --pad-shell-top is the inset from the top of the content
     column to the first card; --pad-shell-bottom is the room left above the
     footer. Both surfaces use them, so a page cannot tighten at its own
     private breakpoint any more. */
  --pad-shell-top:    clamp(16px, 2.4vw, 28px);
  --pad-shell-bottom: clamp(24px, 3.2vw, 40px);
  /* Member pages hang their header above the content column, so this is the
     gap between the two rather than a page inset. */
  --gap-after-head:   clamp(14px, 1.6vw, 20px);

  --gap-field:      6px;         /* label → input inside one field */
  --sidebar-item-h: 40px;        /* one sidebar nav row: 8px padding around
                                   a 16px icon that its own 4px padding
                                   grows to 24. The cold-start placeholder
                                   in skeleton.css reserves this exactly. */
  --gap-fields:     18px;        /* between stacked fields in a form */

  /* ── Elevation ──────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 28px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.06);

  /* ── Scrollbar (universal, system-wide) ──── */
  --scrollbar-size:        10px;
  --scrollbar-track:       #f1eeed;
  --scrollbar-thumb:       rgba(124,18,15,.30);
  --scrollbar-thumb-hover: rgba(124,18,15,.55);
  /* On the dark sidebar the maroon thumb disappears — use a light thumb there. */
  --scrollbar-thumb-dark:       rgba(255,255,255,.28);
  --scrollbar-thumb-dark-hover: rgba(255,255,255,.45);

  /* ── Public surface UI (landing page + sign-in) ──
     One definition of the buttons, borders and focus ring the visitor sees
     before signing in, so the landing page and the login page cannot drift
     apart again. Both pages read these; nothing inside the workspace does. */
  --ui-btn-primary-bg:     linear-gradient(180deg, #9b1712, #7c120f);
  --ui-btn-primary-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 16px -4px rgba(124,18,15,.45);
  --ui-btn-primary-shadow-hover: 0 1px 0 rgba(255,255,255,.18) inset, 0 10px 22px -6px rgba(124,18,15,.55);
  --ui-btn-radius:         10px;
  --ui-btn-radius-lg:      12px;
  --ui-btn-weight:         600;
  --ui-border:             #eee2df;   /* warm grey, tinted toward the brand red */
  --ui-border-strong:      #e2d2cf;
  --ui-bg-soft:            #fcf8f7;
  --ui-bg-warm:            #f8f1ef;
  --ui-shadow-sm:          0 1px 2px rgba(61,10,8,.05), 0 2px 8px rgba(61,10,8,.05);
  --ui-shadow-md:          0 8px 28px rgba(61,10,8,.09);
  --ui-focus-ring:         2px solid #9b1712;
  --ui-ease:               cubic-bezier(.2,.7,.2,1);

  /* ── Legacy aliases (used by JS-generated HTML) ─ */
  --primary:      #7c120f;
  --primary-dark: #55110e;
  --ink:          #111827;
  --muted:        #6b7280;
  --line:         rgba(124,18,15,.16);
  --line-soft:    rgba(124,18,15,.10);
}