/* ==========================================================================
   tokens.css — SINGLE SOURCE OF TRUTH for design tokens
   --------------------------------------------------------------------------
   Loaded FIRST in every layout (before Bootstrap), so every later sheet —
   site.css, theme.css, the area shells, component CSS, page <style> blocks —
   and the per-LGU runtime override (<style id="theme-overrides">, injected
   last) can read these custom properties.

   What lives here:
     1. The canonical --pt-* palette (primary / brand / accent / slate +
        shadows / ring / surface / nav / sidebar). Moved out of theme.css so
        there is ONE home for the palette. The DARK-mode surface and nav-tint
        overrides stay in theme.css (they are mode-specific).
     2. The --fs-* type scale — the one type scale for the whole app.
     3. Non-color scales: spacing, line-height, radius, touch targets.
     4. LEGACY ALIASES so the ~93 site.css usages of --color-* / --font-size-*
        keep working AND become brand-aware for free:
          --color-slate-N   -> identical --pt-slate-N        (pure de-dup)
          --font-size-*      -> identical --fs-*             (pure de-dup)
          --color-primary-N  -> derived from --bs-primary     (BRAND-AWARE:
                                fixes the latent bug where .btn-action /
                                .sidebar-menu / cards ignored the LGU brand)

   Custom properties resolve at USE time, so the forward reference to
   --bs-primary (defined later, in theme.css / the runtime block) is valid.

   GOVERNANCE: feature / component CSS and inline styles must consume these
   tokens — no hardcoded hex, no literal font-size, no content text < 13px.
   See Docs/CSS_ARCHITECTURE.md.
   ========================================================================== */

:root {
    /* ── Brand palette: Primary — Indigo Navy ─────────────────────────── */
    --pt-primary-50:  #eef2ff;
    --pt-primary-100: #e0e7ff;
    --pt-primary-200: #c7d2fe;
    --pt-primary-300: #a5b4fc;
    --pt-primary-400: #818cf8;
    --pt-primary-500: #6366f1;
    --pt-primary-600: #4f46e5;
    --pt-primary-700: #4338ca;
    --pt-primary-800: #3730a3;
    --pt-primary-900: #312e81;
    --pt-primary-950: #1e1b4b;

    /* Brand primary — slightly cooler, more "govtech" than pure indigo */
    --pt-brand-50:  #eff4ff;
    --pt-brand-100: #dbe6fe;
    --pt-brand-200: #bfd3fe;
    --pt-brand-300: #93b4fd;
    --pt-brand-400: #6090fa;
    --pt-brand-500: #3b6ef5;
    --pt-brand-600: #2552ea;
    --pt-brand-700: #1d40d7;
    --pt-brand-800: #1e36ae;
    --pt-brand-900: #1e3389;
    --pt-brand-950: #172153;

    /* Accent — warm amber */
    --pt-accent-50:  #fffbeb;
    --pt-accent-100: #fef3c7;
    --pt-accent-200: #fde68a;
    --pt-accent-300: #fcd34d;
    --pt-accent-400: #fbbf24;
    --pt-accent-500: #f59e0b;
    --pt-accent-600: #d97706;
    --pt-accent-700: #b45309;

    /* Neutrals — slate */
    --pt-slate-50:  #f8fafc;
    --pt-slate-100: #f1f5f9;
    --pt-slate-200: #e2e8f0;
    --pt-slate-300: #cbd5e1;
    --pt-slate-400: #94a3b8;
    --pt-slate-500: #64748b;
    --pt-slate-600: #475569;
    --pt-slate-700: #334155;
    --pt-slate-800: #1e293b;
    --pt-slate-900: #0f172a;
    --pt-slate-950: #020617;

    /* Layered shadows with subtle blue tint */
    --pt-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
    --pt-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05), 0 1px 3px 0 rgba(15, 23, 42, 0.06);
    --pt-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --pt-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.06);
    --pt-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.06);
    --pt-shadow-glow: 0 0 0 4px rgba(59, 110, 245, 0.12);

    /* Ring (focus + selected card outline) */
    --pt-ring-color: var(--pt-brand-500);
    --pt-ring-color-soft: rgba(59, 110, 245, 0.35);

    /* Surface elevations (DARK overrides live in theme.css §4) */
    --pt-surface-0: #ffffff;
    --pt-surface-1: #f8fafc;
    --pt-surface-2: #f1f5f9;
    --pt-surface-3: #e2e8f0;

    /* Glass navbar tint (DARK override lives in theme.css §4) */
    --pt-nav-bg: rgba(30, 51, 137, 0.92);

    /* Dashboard sidebar gradient (the canonical shell reads this) */
    --pt-sidebar-bg: linear-gradient(180deg, var(--pt-slate-900) 0%, var(--pt-slate-950) 100%);

    /* ── Type scale — the ONE scale (px noted; values in rem) ──────────── */
    --fs-12: 0.75rem;    /* 12px — micro-labels, decorative only */
    --fs-13: 0.8125rem;  /* 13px — content floor */
    --fs-14: 0.875rem;   /* 14px */
    --fs-15: 0.9375rem;  /* 15px */
    --fs-16: 1rem;       /* 16px — base */
    --fs-18: 1.125rem;   /* 18px */
    --fs-20: 1.25rem;    /* 20px */
    --fs-24: 1.5rem;     /* 24px */
    --fs-30: 1.875rem;   /* 30px */
    --fs-36: 2.25rem;    /* 36px */

    /* Line heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Spacing scale (8px base) */
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.5rem;   /* 24px */
    --space-6: 2rem;     /* 32px */
    --space-7: 2.5rem;   /* 40px */
    --space-8: 3rem;     /* 48px */

    /* Touch targets */
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;

    /* ══════════════════════════════════════════════════════════════════
       LEGACY ALIASES — keep site.css's existing token names working.
       ══════════════════════════════════════════════════════════════════ */

    /* Type scale aliases (identical values — pure de-dup) */
    --font-size-xs:   var(--fs-12);
    --font-size-sm:   var(--fs-14);
    --font-size-base: var(--fs-16);
    --font-size-lg:   var(--fs-18);
    --font-size-xl:   var(--fs-20);
    --font-size-2xl:  var(--fs-24);
    --font-size-3xl:  var(--fs-30);
    --font-size-4xl:  var(--fs-36);

    /* Slate aliases (identical values — pure de-dup) */
    --color-slate-50:  var(--pt-slate-50);
    --color-slate-100: var(--pt-slate-100);
    --color-slate-200: var(--pt-slate-200);
    --color-slate-300: var(--pt-slate-300);
    --color-slate-400: var(--pt-slate-400);
    --color-slate-500: var(--pt-slate-500);
    --color-slate-600: var(--pt-slate-600);
    --color-slate-700: var(--pt-slate-700);
    --color-slate-800: var(--pt-slate-800);
    --color-slate-900: var(--pt-slate-900);

    /* Primary aliases — BRAND-AWARE. Derived from --bs-primary (the only
       primary token the per-LGU runtime overrides) so the ~93 site.css
       components that used the old static blue ramp now follow the LGU brand.
       600 anchors to the brand exactly; lighter shades tint toward white,
       darker toward black, tracking the original ramp's lightness steps.
       (prefers-contrast: more in site.css still pins 600 to a fixed blue.) */
    --color-primary-50:  color-mix(in srgb, var(--bs-primary)  6%, #fff);
    --color-primary-100: color-mix(in srgb, var(--bs-primary) 12%, #fff);
    --color-primary-200: color-mix(in srgb, var(--bs-primary) 22%, #fff);
    --color-primary-300: color-mix(in srgb, var(--bs-primary) 38%, #fff);
    --color-primary-400: color-mix(in srgb, var(--bs-primary) 60%, #fff);
    --color-primary-500: color-mix(in srgb, var(--bs-primary) 82%, #fff);
    --color-primary-600: var(--bs-primary);
    --color-primary-700: color-mix(in srgb, var(--bs-primary) 88%, #000);
    --color-primary-800: color-mix(in srgb, var(--bs-primary) 72%, #000);
    --color-primary-900: color-mix(in srgb, var(--bs-primary) 58%, #000);

    /* Semantic colors (unchanged values — moved verbatim from site.css) */
    --color-success: #22c55e;
    --color-success-light: #dcfce7;
    --color-warning: #f59e0b;
    --color-warning-light: #fef3c7;
    --color-danger: #ef4444;
    --color-danger-light: #fee2e2;
    --color-info: #0ea5e9;
    --color-info-light: #e0f2fe;

    /* Status colors (Legislative) — reference the semantic tokens above */
    --color-draft: var(--color-slate-500);
    --color-pending: var(--color-warning);
    --color-approved: var(--color-success);
    --color-vetoed: var(--color-danger);
    --color-effective: #059669;

    /* Backgrounds (unchanged — moved verbatim from site.css) */
    --bg-app: #f8fafc;
    --bg-card: #ffffff;
    --bg-sidebar: linear-gradient(180deg, var(--color-slate-800) 0%, var(--color-slate-900) 100%);

    /* Borders + radius (unchanged — moved verbatim from site.css) */
    --border-color-light: #e2e8f0;
    --border-color-medium: #cbd5e1;
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.375rem;
    --border-radius-lg: 0.5rem;

    /* Focus states — ring color follows the (now brand-aware) primary 500 */
    --focus-ring-color: var(--color-primary-500);
    --focus-ring-offset: 2px;
}