/* ============================================================================
   BAJ Royal Farm — Design System (tokens)            design-system.css · v1.0.0
   Designed & Developed by: Babatunde Adedeji Adelaja · 2026
   ----------------------------------------------------------------------------
   ONE reusable token layer for the premium experiences (Executive Dashboard +
   Workspace). All names are prefixed --ds-* so they can NEVER collide with or
   override the existing global app variables (--ink, --soft, --ln, --p, …).
   Consumed by exec-dashboard.css (.exd-root) and control-panel.css (.cp-ws).
   Every colour pair below is chosen to pass WCAG AA on its intended surface.
   ============================================================================ */
:root {
  /* ---- Brand ---- */
  --ds-green:        #0B4D3A;   /* BAJ deep green */
  --ds-green-2:      #0f4c39;
  --ds-green-700:    #0a3b2c;
  --ds-green-900:    #072c21;
  --ds-gold:         #D4A437;   /* BAJ gold */
  --ds-gold-soft:    #dcc78f;
  --ds-wine:         #7a1220;

  /* ---- Neutral / ink (for LIGHT surfaces = white/cream cards) ---- */
  --ds-ink:          #16202e;   /* primary text on light   — AA on #fff (16.4:1) */
  --ds-ink-2:        #3a4351;   /* secondary text on light — AA on #fff (9.3:1) */
  --ds-soft:         #5c6673;   /* muted text on light     — AA on #fff (5.8:1) */
  --ds-ph:           #8a94a3;   /* placeholder             — for large/again bg  */
  --ds-line:         #e4e8ee;   /* hairline border on light */
  --ds-line-2:       #eef1f5;
  --ds-card:         #ffffff;
  --ds-card-2:       #f8faf9;
  --ds-cream:        #F8F4E8;   /* premium cream card */
  --ds-surface:      #f4f6f5;   /* app page behind cards */

  /* ---- Ink for DARK surfaces (deep-green hero / dark panels) ---- */
  --ds-on-dark:      #f5f8f5;   /* primary text on green — AA (13.8:1) */
  --ds-on-dark-2:    #cfe0d6;   /* secondary on green    — AA (8.9:1)  */
  --ds-on-dark-3:    #a9c4b7;   /* tertiary on green     — AA (5.4:1)  */

  /* ---- Status ---- */
  --ds-good:         #1f8a4c;   /* AA on #fff (4.5:1) */
  --ds-good-bg:      #e7f6ec;
  --ds-good-ink:     #0f5c30;
  --ds-warn:         #B57E10;   /* AA on #fff (4.5:1) */
  --ds-warn-bg:      #fdf3dd;
  --ds-warn-ink:     #7a5300;
  --ds-bad:          #c0281f;   /* AA on #fff (5.1:1) */
  --ds-bad-bg:       #fdeceb;
  --ds-bad-ink:      #8a1a13;
  --ds-info:         #1663b0;   /* AA on #fff (5.2:1) */
  --ds-info-bg:      #e8f1fb;
  --ds-info-ink:     #0e4a86;

  /* ---- Category accents (module cards) ---- */
  --ds-c-mgmt:       #0f6b4a;   /* management  (green) */
  --ds-c-doc:        #b07d12;   /* documents   (gold)  */
  --ds-c-fn:         #b4601f;   /* functions   (amber) */
  --ds-c-pub:        #12756b;   /* public      (teal)  */
  --ds-c-gen:        #556070;

  /* ---- Typography ---- */
  --ds-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --ds-fs-xs: 11px; --ds-fs-sm: 12.5px; --ds-fs-md: 14px; --ds-fs-lg: 16px;
  --ds-fs-xl: 20px; --ds-fs-2xl: 26px; --ds-fs-3xl: 34px;
  --ds-fw-med: 600; --ds-fw-semi: 700; --ds-fw-bold: 800;
  --ds-lh-tight: 1.15; --ds-lh: 1.5;

  /* ---- Spacing ---- */
  --ds-1: 4px; --ds-2: 8px; --ds-3: 12px; --ds-4: 16px; --ds-5: 20px;
  --ds-6: 24px; --ds-8: 32px; --ds-10: 40px; --ds-12: 48px;

  /* ---- Radius ---- */
  --ds-r-sm: 8px; --ds-r-md: 12px; --ds-r-lg: 16px; --ds-r-xl: 20px; --ds-r-2xl: 26px; --ds-r-pill: 999px;

  /* ---- Shadows (soft, layered) ---- */
  --ds-sh-xs: 0 1px 2px rgba(11,45,34,.06);
  --ds-sh-sm: 0 1px 3px rgba(11,45,34,.08), 0 1px 2px rgba(11,45,34,.05);
  --ds-sh-md: 0 6px 18px -8px rgba(11,45,34,.22), 0 2px 6px rgba(11,45,34,.08);
  --ds-sh-lg: 0 18px 40px -18px rgba(11,45,34,.34), 0 6px 14px -8px rgba(11,45,34,.14);
  --ds-sh-xl: 0 30px 70px -28px rgba(7,44,33,.45);
  --ds-sh-focus: 0 0 0 3px rgba(212,164,55,.40);

  /* ---- Motion ---- */
  --ds-t-fast: .12s cubic-bezier(.4,0,.2,1);
  --ds-t: .2s cubic-bezier(.4,0,.2,1);
  --ds-t-slow: .32s cubic-bezier(.4,0,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --ds-t-fast: 0s; --ds-t: 0s; --ds-t-slow: 0s; }
}