/* ============================================================================
   TaxPolicy Department — Design Tokens
   Philosophy: "Civic Confidence" — modern fintech clarity grounded by official
   government gravity. Palette: MoFPED brand — amber/gold seal accent, cool
   silver-grey neutrals, near-black ink, with the Uganda flag (black / yellow /
   red) reserved strictly for flag motifs.
   Format: CSS custom properties (portable; plain HTML/CSS/JS).
   Notes on choices:
     - Amber (~#F9A21D, the MoFPED seal accent) is bright; it is used as a FILL
       accent with dark ink text. For text/links on light backgrounds we use
       deep amber (gold-700/800) to meet WCAG AA — never bright amber as body
       text on white or on the silver-grey canvas.
     - Red (~#F41921) is reserved for emphasis, display headlines, alerts, and
       flag motifs; the accessible error red (gold-600... see red-600) is tuned
       for contrast on white.
     - Neutrals are cool silver-grey (no warm/paper cast), running to a
       near-black ink (~#0D0D0D).
     - Flag motifs (--gradient-flag, .flag-rule, .signin__flag) use dedicated
       --ug-flag-yellow/--ug-flag-red primitives — authentic flag colors that
       stay fixed even as the accent/text ramps are retuned.
     - The theme is light-only; there is no dark mode.
   ============================================================================ */

:root {
  /* ---- RAW PALETTE (primitives — do not use directly in components) ------- */

  /* Cool silver-grey neutrals (no warm cast) */
  --ug-neutral-50:  #f8f8f8;
  --ug-neutral-100: #f0f1f3;
  --ug-neutral-200: #e3e5e8;
  --ug-neutral-300: #ccced3;
  --ug-neutral-400: #a8acb1;
  --ug-neutral-500: #84888e;
  --ug-neutral-600: #60646a;
  --ug-neutral-700: #42454b;

  /* Black / ink (cool, near-black) */
  --ug-ink-500: #5c5c5c;
  --ug-ink-600: #3d3d3d;
  --ug-ink-700: #262626;
  --ug-ink-800: #171717;
  --ug-ink-900: #0d0d0d;
  --ug-black:   #000000; /* flag black */

  /* Flag motif primitives — authentic Uganda flag colors, reserved for flag
     stripes/motifs (--gradient-flag, .flag-rule, .signin__flag). Never used
     as an accent; kept fixed independent of the amber/red retunes below. */
  --ug-flag-yellow: #fcdc04;
  --ug-flag-red:    #d90000;

  /* Amber (MoFPED seal accent) */
  --ug-gold-50:  #fff6e9;
  --ug-gold-100: #ffebcc;
  --ug-gold-200: #fedea9;
  --ug-gold-300: #fcc469;
  --ug-gold-400: #f9a21d; /* brand accent — fill with dark ink text */
  --ug-gold-500: #e99207;
  --ug-gold-600: #c47c08;
  --ug-gold-700: #8a5a00; /* AA text on white AND on #F8F8F8 (5.9:1 / 5.6:1) */
  --ug-gold-800: #6b4400; /* AA text, darker hover (8.6:1 / 8.1:1) */
  --ug-gold-900: #5b3a06;

  /* Red (emphasis / display / error / flag-adjacent) */
  --ug-red-50:  #fdecec;
  --ug-red-100: #fbd2d2;
  --ug-red-200: #f4a3a3;
  --ug-red-300: #ec6a6a;
  --ug-red-400: #f5372b;
  --ug-red-500: #f41921; /* emphasis / display red */
  --ug-red-600: #b8141d; /* AA error text on white (6.7:1) */
  --ug-red-700: #8a0f16;

  /* Support: success green / info (kept minimal & subordinate to brand) */
  --ug-green-400: #34c77b;
  --ug-green-500: #1b7f4b;
  --ug-green-600: #15673c;
  --ug-blue-400:  #4f83e8;
  --ug-blue-500:  #1d4ed8;
  --ug-blue-600:  #1741b6;

  /* ---- SEMANTIC COLOR (LIGHT) -------------------------------------------- */
  --color-bg-primary:    var(--ug-neutral-50);
  --color-bg-secondary:  #ffffff;            /* cards lift off the silver-grey canvas */
  --color-bg-tertiary:   var(--ug-neutral-100); /* inputs, wells */
  --color-bg-inverse:    var(--ug-ink-800);
  --color-bg-muted:      var(--ug-neutral-200);

  --color-text-primary:   var(--ug-ink-800);
  --color-text-secondary: var(--ug-ink-500);
  --color-text-tertiary:  var(--ug-neutral-500);
  --color-text-inverse:   var(--ug-neutral-50);
  --color-text-on-accent: var(--ug-ink-900);  /* dark ink ON gold */
  --color-text-link:      var(--ug-gold-800);
  --color-text-link-hover:var(--ug-gold-900);

  --color-border-primary:   var(--ug-neutral-300);
  --color-border-secondary: var(--ug-neutral-200);
  --color-border-focus:     var(--ug-gold-600);

  --color-accent-primary:        var(--ug-gold-400);
  --color-accent-primary-hover:  var(--ug-gold-500);
  --color-accent-primary-active: var(--ug-gold-600);
  --color-accent-secondary:      var(--ug-ink-800); /* black secondary action */
  --color-accent-secondary-hover:var(--ug-ink-700);

  --color-status-success: var(--ug-green-500);
  --color-status-warning: var(--ug-gold-700);
  --color-status-error:   var(--ug-red-600);
  --color-status-info:    var(--ug-blue-500);

  --color-success-bg: #e7f5ee;
  --color-warning-bg: var(--ug-gold-50);
  --color-error-bg:   var(--ug-red-50);
  --color-info-bg:    #e8effc;

  --color-surface-overlay: rgba(13, 13, 13, 0.55);
  --color-surface-glass:   rgba(255, 255, 255, 0.7);

  /* Brand gradients & motifs */
  --gradient-hero: linear-gradient(135deg, var(--ug-ink-900) 0%, var(--ug-ink-700) 55%, #1c1c1c 100%);
  --gradient-gold: linear-gradient(135deg, var(--ug-gold-400) 0%, var(--ug-gold-600) 100%);
  --gradient-flag: linear-gradient(180deg, var(--ug-black) 0 33.33%, var(--ug-flag-yellow) 33.33% 66.66%, var(--ug-flag-red) 66.66% 100%);
  --glow-gold: radial-gradient(circle at 70% 30%, rgba(249, 162, 29, 0.18), transparent 55%);

  /* ---- DATA-VIZ TOKENS (chart-system redesign, validated 23 Jul 2026) ----
     Categorical slots: fixed order, assigned in sequence, never cycled.
     Validated against white card surface (dataviz six checks): adjacent-pair
     CVD ΔE 22.6 worst (target ≥ 8). Forms where ANY two colors can touch
     (scatter-like) may use slots 1–4 only (all-pairs ΔE 9.5); donut rings may
     use all 6 (wrap pair 6→1 passes at ΔE 21.9, ≤ 5 segments + "Other").
     chart-1 and chart-3 sit below 3:1 on white — legal ONLY because every
     chart ships direct labels + a table alternative (engine-enforced).
     Red never encodes data — reserved for errors, alerts, flag motifs. */
  --chart-1: var(--ug-gold-500);   /* semantic anchor: actual / collected */
  --chart-2: var(--ug-blue-500);
  --chart-3: var(--ug-green-400);
  --chart-4: var(--ug-gold-700);
  --chart-5: var(--ug-blue-400);
  --chart-6: var(--ug-green-600);

  /* Reference lines */
  --chart-target:  var(--ug-ink-500);      /* dashed target line (6.7:1) */
  --chart-compare: var(--ug-neutral-500);  /* prior-period context line (3.6:1) */

  /* Ordinal ramp (funnel stages, tiers) — 4 steps is the validated max; a
     5th step fails the ΔL gap check. More stages → direct labels, one hue. */
  --chart-ord-1: var(--ug-gold-400);
  --chart-ord-2: var(--ug-gold-600);
  --chart-ord-3: var(--ug-gold-700);
  --chart-ord-4: var(--ug-gold-900);

  /* Diverging (Likert agree↔disagree): warm amber pole ↔ cool blue pole with
     neutral midpoint; monotone lightness per arm. Red stays out of data. */
  --chart-div-neg-2: var(--ug-gold-600);
  --chart-div-neg-1: var(--ug-gold-300);
  --chart-div-mid:   var(--ug-neutral-300);
  --chart-div-pos-1: var(--ug-blue-400);
  --chart-div-pos-2: var(--ug-blue-600);

  /* Chart chrome */
  --chart-grid:        var(--ug-neutral-200);
  --chart-axis-text:   var(--color-text-secondary);
  --chart-area-alpha:  0.12;               /* line-chart area fill opacity */
  --chart-donut-track: var(--ug-neutral-100);

  /* Tooltip */
  --chart-tooltip-bg:     var(--ug-ink-800);
  --chart-tooltip-text:   var(--ug-neutral-50);
  --chart-tooltip-radius: var(--border-radius-sm);
  --chart-tooltip-shadow: var(--shadow-md);

  /* Marks */
  --chart-marker-size: 8px;                /* data-point marker & min hit size */
  --chart-marker-ring: var(--color-bg-secondary); /* 2px surface ring on overlap */
  --chart-gap: 2px;                        /* surface gap between adjacent fills */

  /* Heights per context (engine measures width; CSS owns height) */
  --chart-height-hero:    220px;
  --chart-height-full:    320px;
  --chart-height-compact: 160px;

  /* ---- SPACING (4px base — balanced) ------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;  /*  4 */
  --space-2:  0.5rem;   /*  8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */
  --space-11: 12rem;    /* 192 */
  --space-12: 16rem;    /* 256 */

  /* ---- TYPOGRAPHY -------------------------------------------------------- */
  --font-family-display: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-family-body:    "Instrument Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono:    ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  --font-size-xs:   0.75rem;   /* 12 */
  --font-size-sm:   0.875rem;  /* 14 */
  --font-size-base: 1rem;      /* 16 */
  --font-size-md:   1.125rem;  /* 18 */
  --font-size-lg:   1.25rem;   /* 20 */
  --font-size-xl:   1.5rem;    /* 24 */
  --font-size-2xl:  1.875rem;  /* 30 */
  --font-size-3xl:  2.25rem;   /* 36 */
  --font-size-4xl:  3rem;      /* 48 */
  --font-size-5xl:  3.75rem;   /* 60 — hero display */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:   1.15;
  --line-height-snug:    1.3;
  --line-height-normal:  1.55;
  --line-height-relaxed: 1.7;

  --letter-spacing-tighter: -0.03em;
  --letter-spacing-tight:   -0.015em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.04em;
  --letter-spacing-wider:   0.08em; /* all-caps labels */

  /* ---- LAYOUT ------------------------------------------------------------ */
  --max-width-content: 42rem;   /* ~65ch reading width */
  --max-width-wide:    68rem;
  --max-width-page:    80rem;    /* 1280px */
  --max-width-portal:  90rem;

  --border-radius-xs:   4px;
  --border-radius-sm:   8px;
  --border-radius-md:   12px;
  --border-radius-lg:   18px;   /* cards — Finexa-style generous rounding */
  --border-radius-xl:   28px;
  --border-radius-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(13, 13, 13, 0.05);
  --shadow-sm: 0 2px 8px -2px rgba(13, 13, 13, 0.06), 0 1px 2px rgba(13, 13, 13, 0.04);
  --shadow-md: 0 8px 20px -6px rgba(13, 13, 13, 0.10), 0 2px 6px -2px rgba(13, 13, 13, 0.06);
  --shadow-lg: 0 18px 44px -12px rgba(13, 13, 13, 0.14), 0 6px 14px -8px rgba(13, 13, 13, 0.08);
  --shadow-xl: 0 36px 70px -20px rgba(13, 13, 13, 0.20), 0 10px 24px -12px rgba(13, 13, 13, 0.10);
  --shadow-float: 0 28px 56px -18px rgba(13, 13, 13, 0.22), 0 8px 18px -10px rgba(13, 13, 13, 0.10);
  --shadow-gold: 0 12px 30px -8px rgba(196, 124, 8, 0.40);
  --shadow-focus: 0 0 0 3px rgba(233, 146, 7, 0.45);

  /* ---- MOTION ------------------------------------------------------------ */
  --duration-instant: 50ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-in:      cubic-bezier(0.4, 0, 1, 1);
  --easing-out:     cubic-bezier(0, 0, 0.2, 1);
  --easing-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- COMPONENT-LEVEL TOKENS ------------------------------------------- */
  /* Government masthead strip */
  --gov-bar-bg:   var(--ug-ink-900);
  --gov-bar-text: var(--ug-neutral-100);

  /* Primary nav */
  --nav-height: 4.5rem;
  --nav-bg:     rgba(248, 248, 248, 0.85);
  --nav-border: var(--color-border-secondary);

  /* Buttons */
  --btn-radius:        var(--border-radius-full);
  --btn-padding-y:     0.7rem;
  --btn-padding-x:     1.4rem;
  --btn-font-weight:   var(--font-weight-semibold);

  /* Cards */
  --card-bg:      var(--color-bg-secondary);
  --card-border:  var(--color-border-secondary);
  --card-radius:  var(--border-radius-lg);
  --card-shadow:  var(--shadow-sm);
  --card-padding: var(--space-5);

  /* Inputs */
  --input-bg:      var(--color-bg-secondary);
  --input-border:  var(--color-border-primary);
  --input-radius:  var(--border-radius-sm);
  --input-height:  2.75rem;

  /* Admin portal shell */
  --sidebar-width:           17rem;
  --sidebar-width-collapsed: 4.5rem;
  --sidebar-bg:              var(--ug-ink-900);
  --sidebar-text:           var(--ug-neutral-300);
  --sidebar-text-active:    var(--ug-gold-400);
  --sidebar-item-active-bg: rgba(249, 162, 29, 0.12);
  --topbar-height:          4rem;

  /* Focus ring (shared) */
  --focus-ring: var(--shadow-focus);

  /* ---- BREAKPOINTS (reference; use in @media literally) ------------------ */
  --breakpoint-sm:  375px;
  --breakpoint-md:  768px;
  --breakpoint-lg:  1024px;
  --breakpoint-xl:  1280px;
  --breakpoint-2xl: 1536px;

  color-scheme: light;
}

/* Light-only theme — dark mode intentionally removed. The site uses a single
   light canvas with a dark hero/footer and dark admin sidebar as design choices,
   not theme switches. */

/* Reduced motion: neutralize durations */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast:    0ms;
    --duration-normal:  0ms;
    --duration-slow:    0ms;
    --duration-slower:  0ms;
  }
}