/* ============================================================
   NEW-TRITION — Design Tokens
   White & gold are the brand (logo, frames, highlights).
   Greens — deep, mid, lime, pale — are the accent family for
   UI bodies, frames and backgrounds. Elegant · clean · simple.
   ============================================================ */

:root {
  /* ---- Brand palette ---- */
  --gold:        #FFD700;   /* signature gold (frames, logo, highlights) */
  --gold-soft:   #FFE963;
  --gold-pale:   #FFFBE0;   /* palest gold wash for tinted panels */
  --gold-deep:   #A16207;   /* readable gold for small text on white */
  --gold-mid:    #C9971C;
  --gold-grad:   linear-gradient(135deg, #b8860b 0%, #ffd700 45%, #f5c518 70%, #a16207 100%);

  --ink:         #1C2419;   /* near-black forest ink — body text */
  --ink-soft:    #4A5545;
  --ink-faint:   #77816F;

  --bg:          #FFFFFF;
  --bg-tint:     #F5FAEF;   /* pale green panel wash (table heads, meal heads) */
  --bg-sunken:   #EAF3E0;   /* light green sunken strips & borders */
  --bg-hover:    #F2F8E7;   /* light green hover */

  --green-deep:  #14532D;   /* deep healthy green — headers, ink accents */
  --green-mid:   #1E7A40;   /* confident mid green — active states */
  --green:       #16A34A;
  --green-soft:  #DCFCE7;

  --lime:        #84CC16;   /* energetic secondary accent */
  --lime-deep:   #4D7C0F;
  --lime-soft:   #ECFCCB;

  /* Legacy accent slots — remapped into the green/gold family so every
     component (buttons, chips, switches, mode tags) stays on palette. */
  --sky:         #2F9E5F;   /* was light blue → mid green */
  --sky-deep:    #166534;   /* deep green */
  --sky-soft:    #E3F4E5;   /* pale green */
  --orange:      #D9A514;   /* was orange → antique gold */
  --orange-deep: #8A6D1A;   /* deep gold */
  --orange-soft: #FFF6D8;   /* pale gold */

  --danger:      #DC2626;
  --danger-soft: #FEE2E2;
  --warn:        #B45309;
  --ok:          #16A34A;

  /* ---- Compliance ramp (actual vs target) ---- */
  --c-ok:        #16A34A;
  --c-near:      #65A30D;
  --c-warn:      #D97706;
  --c-bad:       #DC2626;
  --c-off:       #C7D6BC;

  /* ---- Typography ---- */
  --font-display: Cambria, "Palatino Linotype", Georgia, serif;
  --font-ui:      "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num:     "Segoe UI", "SF Mono", Consolas, monospace;

  --fs-hero:   clamp(2.2rem, 5vw, 3.2rem);
  --fs-h1:     1.45rem;
  --fs-h2:     1.15rem;
  --fs-h3:     1rem;
  --fs-body:   0.875rem;
  --fs-sm:     0.78rem;
  --fs-xs:     0.68rem;

  /* ---- Spacing scale ---- */
  --sp-1: 2px;  --sp-2: 4px;  --sp-3: 8px;  --sp-4: 12px;
  --sp-5: 16px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px;

  /* ---- Frame (gold rectangle frames per brand spec) ---- */
  --frame-w:      2px;
  --frame-color:  var(--gold);
  --frame-radius: 12px;
  --frame-shadow: 0 1px 2px rgba(120, 90, 0, 0.05), 0 6px 18px rgba(70, 100, 40, 0.07);

  /* ---- Radii ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-1: 0 1px 3px rgba(28, 36, 25, 0.08);
  --shadow-2: 0 2px 8px rgba(28, 36, 25, 0.10);
  --shadow-3: 0 8px 28px rgba(28, 36, 25, 0.16);

  /* ---- Layout ---- */
  --header-h: 56px;
  --tabbar-h: 58px;
  --content-max: 100%;

  /* ---- Motion ---- */
  --tr-fast: 120ms cubic-bezier(0.3, 0.7, 0.4, 1);
  --tr-med:  220ms cubic-bezier(0.3, 0.7, 0.4, 1);

  /* ---- Z-index ---- */
  --z-sticky: 20;
  --z-header: 50;
  --z-dropdown: 80;
  --z-modal: 100;
  --z-toast: 120;
}