/* ============================================================================
   Kelderhof Ops — design tokens (v16 — full design-system refresh)
   Source of truth: DESIGN-SYSTEM.md + design-references/*.html
   ============================================================================ */
:root {
  /* Surfaces */
  --cream:        #F5EFE0;   /* desktop page background — slightly darker so white cards stand out */
  --cream-warm:   #F5EFDD;   /* warmer cream for accents */
  --white:        #FFFFFF;   /* card surfaces */

  /* Brand — sage (primary) */
  --sage:         #A2B18E;   /* hero band on desktop, page bg on mobile */
  --sage-deep:    #7E8E69;   /* progress fills, active rings */
  --sage-darker:  #5F6E4D;   /* primary action buttons, active text */
  --sage-soft:    #ECEFE5;   /* active nav backgrounds, badge tints */
  --sage-tint:    #F5F7EE;   /* hover states */

  /* Brand — brown (secondary / identity) */
  --brown:        #432311;   /* wordmark, user avatar */
  --brown-soft:   #F1E9DF;   /* footnote backgrounds, category tags */
  --brown-mid:    #6B4528;   /* category icons */

  /* Text */
  --text:         #1A1612;   /* primary text, headlines */
  --text-mid:     #4A413A;   /* secondary text */
  --text-light:   #8A7F73;   /* meta text, placeholders, labels */

  /* Borders */
  --border:       #E8E2D3;   /* card borders */
  --border-soft:  #F0EBDD;   /* row dividers inside cards */

  /* Semantic status */
  --danger:       #B85A3A;   /* critical issues, red dots */
  --danger-soft:  #FAEDE6;
  --warning:      #C98A4F;   /* warnings, falling behind teams */
  --warning-soft: #FAEEDA;
  --info-blue:    #A8C5D6;   /* monthly indicators, neutral status */
  --info-blue-soft:#E8F0F4;
  --info-blue-mid:#4A7A95;   /* readable info text */
  --purple:       #8B6D9C;   /* admin category icon, scheduled status */
  --purple-soft:  #EFE6F2;

  /* Shadows */
  --shadow-soft:  0 2px 12px rgba(67, 35, 17, 0.06);
  --shadow-card:  0 1px 3px  rgba(67, 35, 17, 0.06);
  --shadow-lift:  0 6px 16px rgba(67, 35, 17, 0.08);

  /* Type — Inter as primary, system fallback if it hasn't loaded yet */
  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Aliases kept so legacy var(--font-display) / var(--font-body) refs still resolve */
  --font-display: var(--font);
  --font-body:    var(--font);

  /* Layout */
  --shell-max:    1320px;
  --content-max:  480px;     /* mobile content column */
  --sidebar-w:    260px;

  /* Radii — slightly larger than v15, matches design system */
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  18px;
  --r-xl:  22px;
  --r-pill: 999px;

  /* Motion */
  --t-fast:  .12s;
  --t-med:   .15s;
  --t-slow:  .2s;

  /* Status pill colors (Open jobs) */
  --status-open-bg:      var(--danger-soft);
  --status-open-text:    var(--danger);
  --status-quote-bg:     var(--info-blue-soft);
  --status-quote-text:   var(--info-blue-mid);
  --status-sched-bg:     var(--purple-soft);
  --status-sched-text:   var(--purple);
  --status-resolved-bg:  var(--sage-soft);
  --status-resolved-text:var(--sage-darker);

  /* ------------------------------------------------------------------
     Legacy aliases (pre-v16). Per-page CSS still references these names;
     map them to current v16 tokens so colours resolve correctly without
     touching every page CSS file.
     ------------------------------------------------------------------ */
  --paper:        var(--white);          /* card / surface */
  --brown-d:      var(--brown);          /* "dark brown" old name */
  --brown-deep:   var(--brown);          /* sometimes spelled this way */
  --text-l:       var(--text-light);     /* old short-name */
  --text-m:       var(--text-mid);       /* old short-name */
  --border-l:     var(--border-soft);    /* "light border" */
  --border-light: var(--border-soft);
  --danger-d:     var(--danger);
  --danger-bg:    var(--danger-soft);
  --warning-deep: var(--warning);
  --warning-bg:   var(--warning-soft);
  --sage-h:       var(--sage-deep);      /* hover sage */
  --sage-bg:      var(--sage-soft);
  --info-d:       var(--info-blue-mid);
  --info-bg:      var(--info-blue-soft);
  --shadow-sm:    var(--shadow-card);
  --shadow-md:    var(--shadow-soft);
  --shadow-lg:    var(--shadow-lift);
}