/* ==========================================================================
   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 — theme-aware ink set (the canonical app-shell reads
       these). LIGHT-mode defaults live here; the DARK-mode rail overrides live
       in theme.css §4, mirroring how --pt-surface-* / --pt-nav-bg are handled.
       Light mode = a soft slate panel with dark ink; dark mode = the HRIS rail. */
    --pt-sidebar-bg: linear-gradient(180deg, var(--pt-slate-50) 0%, var(--pt-slate-100) 100%);
    --pt-sidebar-ink: var(--pt-slate-600);          /* nav links / base text            */
    --pt-sidebar-ink-muted: var(--pt-slate-500);    /* section labels, chevrons, heads  */
    --pt-sidebar-ink-strong: var(--pt-slate-900);   /* brand + hover / section-active   */
    --pt-sidebar-border: var(--pt-slate-200);       /* dividers, borders, scrollbar     */
    --pt-sidebar-hover-bg: var(--pt-slate-200);     /* nav-link hover surface           */
    --pt-sidebar-header-bg: rgba(15, 23, 42, 0.03); /* brand header strip tint          */

    /* ── 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 */

    /* Display steps — sizes above the house scale, for type that is deliberately
       large rather than merely emphatic.

       Mostly the public portal's client-mandated "Civic Editorial" lockup (CLAUDE.md):
       the hero numeral, the section numbers repeated down the home page, the headline
       sizes. These are real steps rather than rounded to the nearest existing one
       because rounding would visibly alter a client-signed design
       (CSS_ARCHITECTURE.md rule 4).

       Back-office may use them for large DECORATIVE glyphs only (an empty-state icon,
       a status symbol) — never for text. Back-office text stays on the house scale,
       which tops out at --fs-36. */
    --fs-28: 1.75rem;    /* 28px — editorial section number */
    --fs-32: 2rem;       /* 32px — editorial headline */
    --fs-40: 2.5rem;     /* 40px — editorial display */
    --fs-64: 4rem;       /* 64px — editorial display, large */
    --fs-96: 6rem;       /* 96px — hero numeral */
    --fs-hero-fluid: clamp(1.875rem, 1.2rem + 2.5vw, 2.75rem); /* fluid hero lockup */

    /* Off-scale steps kept for back-office chrome that snapped to the nearest
       existing value; 17px is the one genuine in-between the house scale needs. */
    --fs-17: 1.0625rem;  /* 17px — editorial body lead */

    /* Z-index layering. These four values were already in use across the views as
       bare numbers in inline styles; naming them is the point - the app had a
       layering system nobody had written down. Aligned to Bootstrap's own scale:
       modal-backdrop 1050, modal 1055, tooltip 1080. --z-max is the deliberate
       'above everything' escape hatch; if a second thing needs it, they collide,
       so add a named step instead of reaching for it twice. */
    --z-backdrop: 1050;
    --z-modal: 1055;
    --z-tooltip: 1080;
    --z-max: 9999;

    /* 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) */
    /* Officers legend accents. These two values are named in CSS_ARCHITECTURE.md
       s4 as accepted bespoke decorative hex; tokenising them keeps rule 5 (one
       token home) while leaving the rendered colour identical. */
    --pt-officer-member: #16a34a;      /* Sanggunian Members legend dot */
    --pt-officer-appointed: #0891b2;   /* Appointed Officers legend dot */

    --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;
}