/* ==================================================================
   Minister Dashboard — Design Tokens
   ==================================================================

   Source of truth : DESIGN_SYSTEM.md (same directory)
   Visual reference: Figma node 5401:45448 (dark dashboard mockup)
   Verified against: Macro-Dashboard-Handover/03_Source_Code/
                     HTML_CSS_JS/dashboard-v3.html
   Production commit: 75550002f50a6f976484c5276a923b71e163c0b5
   Reconstructed    : 2026-08-14

   ------------------------------------------------------------------
   STATUS — READ BEFORE USING
   ------------------------------------------------------------------

   1. This file was RECONSTRUCTED from DESIGN_SYSTEM.md. The original
      design-tokens.css was not present in the transfer package. Every
      value here is either quoted verbatim from DESIGN_SYSTEM.md or
      verified in the production source at the commit above. Nothing
      was invented.

   2. THE DARK THEME CONSUMES THESE TOKENS: dashboard-v3.html loads
      this file before its component styles and maps the legacy local
      variables onto the semantic --ds-* layer. Component behavior and
      route-specific data contracts remain in dashboard-v3.html.

   3. Changing a token here REQUIRES updating DESIGN_SYSTEM.md in the
      same change (DESIGN_SYSTEM.md §25, Governance). Tokens without a
      real consumer must not be added; removing a token requires a
      project-wide CSS/JS search plus regression.

   4. This file declares TOKENS ONLY. It must never contain a
      production component rule or reset. Selectors are limited to the
      default :root token set and explicit :root[data-theme] modes.

   ------------------------------------------------------------------
   DELIBERATE OMISSIONS
   ------------------------------------------------------------------

   - Chart geometry (line width 2.2, tension 0.35, bar radii, cutout
     68%) stays in JS. It is documented in DESIGN_SYSTEM.md §9.2-9.6
     and belongs to the Phase 2 shared series registry, not to CSS.
   - `--blue-d` and `--primary` are referenced but never defined in
     production (DESIGN_SYSTEM.md §21, debt #3). Defining them here
     would silently change rendering, so they are left unresolved.
   ================================================================== */

:root {
  /* ================================================================
     FIGMA DARK ADMIN FOUNDATION

     The supplied Figma node exposes the dashboard as a raster mockup,
     not editable variables/components. The values below are exact
     high-frequency pixels sampled from node 5401:45448. Auto-layout
     measurements are translated responsively in dashboard-v3.html.
     ================================================================ */

  --ds-color-sidebar: #080f26;
  --ds-color-accent: #cb3cff;
  --ds-color-accent-cyan: #00c2ff;
  --ds-color-focus-ring: rgba(203, 60, 255, 0.42);
  --ds-sidebar-width: 276px;
  --ds-sidebar-width-compact: 260px;
  /* ================================================================
     COLORS — BRAND
     DESIGN_SYSTEM.md §3.1
     ================================================================ */

  --ds-color-primary: #cb3cff;
  --ds-color-secondary: #00c2ff;

  /* ================================================================
     COLORS — TEXT
     DESIGN_SYSTEM.md §3.1
     ================================================================ */

  --ds-color-text-primary: #ffffff;
  --ds-color-text-secondary: #a4afd6;
  --ds-color-text-tertiary: #667297;

  /* ================================================================
     COLORS — SURFACE AND BACKGROUND
     DESIGN_SYSTEM.md §3.1
     ================================================================ */

  --ds-color-background: #081028;
  --ds-color-background-soft: #0a1330;
  --ds-color-background-alt: #091c61;
  --ds-color-surface: #0b1739;

  /* ================================================================
     COLORS — BORDER AND GRID
     DESIGN_SYSTEM.md §3.1
     ================================================================ */

  --ds-color-border: #18235b;
  --ds-color-border-soft: #132046;
  --ds-color-grid: rgba(164, 175, 214, 0.12);

  /* ================================================================
     COLORS — SEMANTIC
     DESIGN_SYSTEM.md §3.2

     Export is always green and Import is always red. Positive and
     negative take green/red ONLY when the indicator's meaning agrees
     with that direction (§3.4).
     ================================================================ */

  --ds-color-export: #14ca74;
  --ds-color-import: #ff5c7c;
  --ds-color-success: #14ca74;
  --ds-color-warning: #f4b400;
  --ds-color-danger: #ff5c7c;
  --ds-color-neutral: #667297;
  --ds-color-info: #00c2ff;
  --ds-color-purple: #cb3cff;
  --ds-color-orange: #f59e0b;               /* operational attention */
  --ds-color-teal: #15b8a6;                 /* complementary series */

  /* ================================================================
     COLORS — TINTS
     DESIGN_SYSTEM.md §3.3

     Tints are for surfaces only. They must not replace a foreground
     colour that needs real contrast (§3.4).
     ================================================================ */

  --ds-color-tint-danger: #3a182a;
  --ds-color-tint-success: #0a3942;
  --ds-color-tint-warning: #3a2e18;
  --ds-color-tint-info: #0d2a4b;
  --ds-color-tint-purple: #2a1742;
  --ds-color-tint-neutral: #101c3b;
  --ds-color-tint-teal: #0b3340;

  /* ================================================================
     COLORS — CHART SURFACES
     DESIGN_SYSTEM.md §9.1
     Verified: dashboard-v3.html:6979, 6987-6991, 6689, 7297
     ================================================================ */

  --ds-chart-text: #ffffff;
  --ds-chart-tooltip-background: rgba(8, 16, 40, 0.97);
  --ds-chart-tooltip-text: #ffffff;
  --ds-chart-crosshair: rgba(164, 175, 214, 0.52);
  --ds-chart-zero-line: #667297;

  /* ================================================================
     CHART SIZING & DENSITY
     DESIGN_SYSTEM.md §9.8

     Chart height is driven by information density, never by available
     space. Each token is the canonical mid-range pick of a documented
     band; a chart may deviate only for a real content reason.
     ================================================================ */

  --ds-chart-body-xs: 240px;                /* horizontal bar, 1-5 categories  (band 220-260) */
  --ds-chart-body-sm: 280px;                /* horizontal bar, 6-10 categories (band 260-320) */
  --ds-chart-body-md: 360px;                /* horizontal bar, 11-15 categories (band 320-400) */
  --ds-chart-body-standard: 288px;          /* line / vertical bar (band 260-320) */
  --ds-chart-body-primary: 348px;           /* primary analytical chart (band 320-380) */

  /* ================================================================
     TYPOGRAPHY — FOUNDATION
     DESIGN_SYSTEM.md §4
     Verified: dashboard-v3.html:76-78
     ================================================================ */

  --ds-font-family: Vazirmatn, Tahoma, sans-serif;
  --ds-font-size-base: 13.5px;
  --ds-line-height-base: 1.55;
  --ds-line-height-tight: 1.4;
  --ds-line-height-value: 1.05;
  --ds-line-height-loose: 1.9;

  /* Canonical weights. 750 / 850 / 950 exist in the current source but
     are scattered variants and must not be used in new work (§4). */
  --ds-font-weight-regular: 400;
  --ds-font-weight-medium: 500;
  --ds-font-weight-semibold: 600;
  --ds-font-weight-bold: 700;
  --ds-font-weight-extrabold: 800;
  --ds-font-weight-black: 900;

  /* ================================================================
     TYPOGRAPHY — ROLES
     DESIGN_SYSTEM.md §4
     ================================================================ */

  /* Page header */
  --ds-font-size-page-title: 19px;
  --ds-font-weight-page-title: 800;
  --ds-font-size-page-subtitle: 12px;
  --ds-font-weight-page-subtitle: 400;

  /* Card and chart headers. DESIGN_SYSTEM.md §4 defines the chart
     title as identical to the card title, so it aliases rather than
     duplicating the value. */
  --ds-font-size-card-title: 13.5px;
  --ds-font-weight-card-title: 700;
  --ds-font-size-card-title-unit: 11px;
  --ds-font-weight-card-title-unit: 500;
  --ds-font-size-chart-title: var(--ds-font-size-card-title);
  --ds-font-weight-chart-title: var(--ds-font-weight-card-title);

  /* KPI */
  --ds-font-size-kpi-label: 12px;
  --ds-font-weight-kpi-label: 700;
  --ds-font-size-kpi-value: 24px;
  --ds-font-weight-kpi-value: 800;
  --ds-font-size-kpi-unit: 10.5px;
  --ds-font-size-kpi-unit-inline: 12px;     /* unit rendered inside the value */
  --ds-font-weight-kpi-unit: 500;

  /* Chart axis and tooltip.
     applySharedChartTypography() adds 2px to the Chart.js fallback of
     12px, so an axis tick resolves to 14px.
     Verified: dashboard-v3.html:6888-6889, 6893 */
  --ds-font-size-axis-label: 14px;
  --ds-font-weight-axis-label: 400;
  --ds-font-size-tooltip: 12px;
  --ds-font-weight-tooltip: 400;

  /* Table */
  --ds-font-size-table-header: 12px;
  --ds-font-weight-table-header: 600;
  --ds-font-size-table-cell: 12px;
  --ds-font-weight-table-cell: 400;
  --ds-font-weight-table-cell-name: 600;    /* right-aligned name column */

  /* Status summary */
  --ds-font-size-summary-title: 14px;
  --ds-font-weight-summary-title: 700;
  --ds-font-size-summary-body: 11.5px;
  --ds-font-weight-summary-body: 400;

  /* Controls */
  --ds-font-size-button: 12px;
  --ds-font-weight-button: 600;
  --ds-font-size-filter-label: 12px;
  --ds-font-weight-filter-label: 400;
  --ds-font-size-filter-value: 13px;
  --ds-font-weight-filter-value: 700;

  /* Modal titles */
  --ds-font-size-modal-title: 17px;
  --ds-font-weight-modal-title: 800;
  --ds-font-size-modal-status-title: 18px;
  --ds-font-weight-modal-status-title: 900;

  /* ================================================================
     SPACING
     DESIGN_SYSTEM.md §5

     Sibling layouts default to --ds-space-layout. A new value may be
     added only when no existing step answers a real need, and it must
     be recorded in DESIGN_SYSTEM.md at the same time.
     ================================================================ */

  --ds-space-0: 0;
  --ds-space-1: 3px;                        /* segmented control inner gap */
  --ds-space-2: 4px;                        /* micro / badge */
  --ds-space-3: 6px;                        /* button gap, compact table */
  --ds-space-4: 8px;                        /* common inner spacing */
  --ds-space-5: 10px;                       /* section / modal inner gap */
  --ds-space-layout: 11px;                  /* primary grid and page gap */
  --ds-space-6: 12px;                       /* small card / control padding */
  --ds-space-7: 14px;                       /* stage block padding, header gap */
  --ds-space-8: 18px;                       /* summary / list spacing */
  --ds-space-9: 22px;                       /* modal large inset */

  /* ================================================================
     RADIUS
     DESIGN_SYSTEM.md §6
     ================================================================ */

  --ds-radius-card: 10px;
  --ds-radius-modal: 14px;
  --ds-radius-modal-status: 14px;
  --ds-radius-panel: 9px;
  --ds-radius-control: 8px;
  --ds-radius-button: 7px;
  --ds-radius-segment: 6px;
  --ds-radius-item: 6px;
  --ds-radius-pill: 999px;
  --ds-radius-pill-compact: 20px;

  /* ================================================================
     BORDER
     DESIGN_SYSTEM.md §6
     Verified: dashboard-v3.html:340, 445, 3597, 1545, 4040
     ================================================================ */

  --ds-border-width: 1px;
  --ds-border-standard: 1px solid #18235b;
  --ds-border-soft: 1px solid #132046;
  --ds-border-card: 1px solid #18235b;
  --ds-border-modal: 1px solid #273365;
  --ds-border-modal-status: 1px solid #273365;
  --ds-border-print: 1px solid #d8dde8;

  /* ================================================================
     ELEVATION
     DESIGN_SYSTEM.md §6
     Verified: dashboard-v3.html:60-63 (--sh-sm / --sh / --sh-lg),
               451, 461, 3656, 1413-1415, 3602, 1547
     Shadows are removed in print (§19).
     ================================================================ */

  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18);
  --ds-shadow-card: none;
  --ds-shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.24);
  --ds-shadow-chart-hover: 0 12px 30px rgba(0, 0, 0, 0.24);
  --ds-shadow-summary-hover: 0 12px 30px rgba(0, 0, 0, 0.24);
  --ds-shadow-modal: 0 32px 80px rgba(0, 0, 0, 0.48);
  --ds-shadow-modal-status: 0 32px 80px rgba(0, 0, 0, 0.48);

  /* ================================================================
     MOTION
     DESIGN_SYSTEM.md §9.7
     Verified: dashboard-v3.html:215, 454-456, 313

     No new animation should be introduced. Everything declared here
     must yield to prefers-reduced-motion: reduce (§9.7, §20).
     ================================================================ */

  --ds-motion-page-fade: 0.22s;
  --ds-motion-modal-fade: 0.2s;             /* chart detail modal  */
  --ds-motion-modal-status-fade: 0.18s;     /* status analysis modal */
  --ds-motion-card-hover: 0.16s;
  --ds-motion-control: 0.15s;
  --ds-motion-easing: ease;

  /* ================================================================
     LAYOUT AND SHELL
     DESIGN_SYSTEM.md §2.1
     Verified: dashboard-v3.html:105, 4094, 197
     ================================================================ */

  --ds-topbar-height: 64px;
  --ds-topbar-height-compact: 50px;         /* short viewport */
  --ds-stage-padding: 28px 32px;

  /* ================================================================
     COMPONENT — CARD
     DESIGN_SYSTEM.md §8.1, §8.2
     Verified: dashboard-v3.html:342, 447, 460, 3655
     ================================================================ */

  --ds-card-padding: 16px 18px;
  --ds-kpi-card-padding: 15px 18px;
  --ds-kpi-icon-size: 34px;
  --ds-kpi-icon-radius: 11px;
  --ds-kpi-card-hover-lift: -1px;
  --ds-chart-card-hover-lift: -1px;

  /* ================================================================
     COMPONENT — SUMMARY BOX
     DESIGN_SYSTEM.md §8.3
     Verified: dashboard-v3.html:1342

     Collapses to 100% width below 1180px.
     ================================================================ */

  --ds-summary-width: 280px;
  --ds-summary-hover-lift: -2px;

  /* ================================================================
     COMPONENT — FILTER SHELL
     DESIGN_SYSTEM.md §12.1
     Verified: dashboard-v3.html:278, 1750
     ================================================================ */

  --ds-filter-padding: 5px 11px;
  --ds-filter-min-height: 35px;

  /* ================================================================
     COMPONENT — SEARCHABLE DROPDOWN
     DESIGN_SYSTEM.md §12.3
     Verified: dashboard-v3.html:1802, 1814, 1830
     ================================================================ */

  --ds-dropdown-menu-width: min(310px, calc(100vw - 32px));
  --ds-dropdown-menu-max-height: 260px;
  --ds-dropdown-search-min-height: 38px;

  /* ================================================================
     COMPONENT — BUTTON
     DESIGN_SYSTEM.md §13.1
     Verified: dashboard-v3.html:3683, 3693-3694, 3619-3620
     ================================================================ */

  --ds-button-padding: 6px 12px;
  --ds-button-hover-background: #132046;
  --ds-button-hover-border-color: #273365;
  --ds-button-disabled-opacity: 0.45;
  --ds-button-close-size: 32px;             /* minimum icon target */

  /* ================================================================
     COMPONENT — SEGMENTED CONTROL
     DESIGN_SYSTEM.md §13.2
     Verified: dashboard-v3.html:299-300, 310, 321
     ================================================================ */

  --ds-segment-shell-padding: 3px;
  --ds-segment-gap: 3px;
  --ds-segment-padding: 5px 13px;
  --ds-segment-disabled-opacity: 0.45;

  /* ================================================================
     COMPONENT — MODALS
     DESIGN_SYSTEM.md §14.1, §14.2
     Verified: dashboard-v3.html:3585-3586, 3599-3601, 3631,
               1529-1530, 1538, 1540
     ================================================================ */

  --ds-modal-width: min(980px, 94vw);
  --ds-modal-max-height: calc(100vh - 44px);
  --ds-modal-padding: 20px 22px;
  --ds-modal-canvas-height: min(560px, 66vh);
  --ds-modal-overlay: rgba(3, 8, 23, 0.76);
  --ds-modal-overlay-blur: 2px;

  --ds-modal-status-width: min(560px, calc(100vw - 40px));
  --ds-modal-status-height: min(672px, calc(100vh - 48px));
  --ds-modal-status-overlay: rgba(3, 8, 23, 0.8);
  --ds-modal-status-overlay-blur: 3px;

  /* ================================================================
     COMPONENT — TABLE
     DESIGN_SYSTEM.md §11
     Verified: dashboard-v3.html:716, 730, 740, 743

     A missing value renders as an em dash, never as zero (§11).
     ================================================================ */

  --ds-table-header-padding: 7px 9px;
  --ds-table-cell-padding: 6px 9px;
  --ds-table-row-alt-background: #0a1330;
  --ds-table-row-hover-background: #132046;

  /* ================================================================
     PRINT
     DESIGN_SYSTEM.md §19
     Verified: dashboard-v3.html:3707-3708, 18816-18817

     Printed output preserves the on-screen layout. Only .page.active
     prints; shadows are dropped and --ds-border-print applies.
     ================================================================ */

  --ds-print-page-size: A4 landscape;
  --ds-print-page-margin: 6mm;
  --ds-print-canvas-width: 1040px;
  --ds-print-canvas-height: 700px;
}

/* ==================================================================
   LIGHT THEME

   The default token set above remains the Figma-derived Dark Admin
   theme. This alternate semantic mapping is activated only by the
   persisted drawer control in dashboard-v3.html. Component selectors
   continue to consume the same --ds-* roles in both modes.
   ================================================================== */
:root[data-theme="light"] {
  color-scheme: light;

  --ds-color-sidebar: #ffffff;
  --ds-color-accent: #7c3aed;
  --ds-color-accent-cyan: #2563eb;
  --ds-color-focus-ring: rgba(124, 58, 237, 0.28);

  --ds-color-primary: #1f2c57;
  --ds-color-secondary: #33458a;

  --ds-color-text-primary: #1e2a47;
  --ds-color-text-secondary: #667085;
  --ds-color-text-tertiary: #8a94aa;

  --ds-color-background: #f8f9fa;
  --ds-color-background-soft: #f5f7fc;
  --ds-color-background-alt: #eaeef7;
  --ds-color-surface: #ffffff;

  --ds-color-border: #e1e6f0;
  --ds-color-border-soft: #edf0f6;
  --ds-color-grid: rgba(100, 116, 139, 0.18);

  --ds-color-export: #2e9d68;
  --ds-color-import: #d64545;
  --ds-color-success: #2e9d68;
  --ds-color-danger: #d64545;
  --ds-color-neutral: #94a3b8;
  --ds-color-info: #2563eb;
  --ds-color-purple: #7c3aed;
  --ds-color-orange: #f97316;
  --ds-color-teal: #0d9488;

  --ds-color-tint-danger: #fdeceb;
  --ds-color-tint-success: #e8f7ee;
  --ds-color-tint-warning: #fdf4e3;
  --ds-color-tint-info: #e9f1fe;
  --ds-color-tint-purple: #f2ecfc;
  --ds-color-tint-neutral: #eef1f8;
  --ds-color-tint-teal: #e4f5f2;

  --ds-chart-text: #667085;
  --ds-chart-tooltip-background: rgba(15, 23, 42, 0.96);
  --ds-chart-tooltip-text: #ffffff;
  --ds-chart-crosshair: rgba(100, 116, 139, 0.48);
  --ds-chart-zero-line: #94a3b8;

  --ds-button-hover-background: #eef3fc;
  --ds-button-hover-border-color: #cbd5e1;
  --ds-table-row-alt-background: #f7f9fd;
  --ds-table-row-hover-background: #eef3fc;
}