/* ==========================================================================
   CFC WATCHDOG DESIGN TOKENS — SINGLE SOURCE OF TRUTH
   v10.90 — extracted from style.css per DESIGN_AUDIT_2026_04_08.md Sprint 1.1
   v11.11 — 2026 identity refresh: Avenir Next + Garamond self-hosted

   IMPORTANT: This file must be loaded BEFORE style.css, public.css, and
   mobile-base.css in every base template. It owns every design variable.

   NEVER add raw hex codes or ad-hoc spacing values to any other CSS file.
   Always reference a token from this file. Need a new variant? Add it here.

   Palette source: branding.py (Official CFC Brand Palette, 2016 Web Spec).
   ========================================================================== */

/* ── @font-face — 2026 identity (v11.11) ──────────────────────────────────
   Self-hosted Avenir Next (12 cuts) + Garamond (4 cuts). Replaces pre-2026
   Inter + Source Serif 4 identity. url() is relative to this file's location
   (watchdog/static/css/variables.css), so "../fonts/..." resolves to
   watchdog/static/fonts/. font-display: swap keeps text visible during
   font load, preventing FOIT.
   ========================================================================== */
@font-face {
  font-family: 'Avenir Next';
  src: url('../fonts/AvenirNext-UltraLight.ttf') format('truetype');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next';
  src: url('../fonts/AvenirNext-UltraLightItalic.ttf') format('truetype');
  font-weight: 200; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next';
  src: url('../fonts/AvenirNext-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next';
  src: url('../fonts/AvenirNext-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next';
  src: url('../fonts/AvenirNext-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next';
  src: url('../fonts/AvenirNext-MediumItalic.ttf') format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next';
  src: url('../fonts/AvenirNext-DemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next';
  src: url('../fonts/AvenirNext-DemiBoldItalic.ttf') format('truetype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next';
  src: url('../fonts/AvenirNext-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next';
  src: url('../fonts/AvenirNext-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next';
  src: url('../fonts/AvenirNext-Heavy.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next';
  src: url('../fonts/AvenirNext-HeavyItalic.ttf') format('truetype');
  font-weight: 900; font-style: italic; font-display: swap;
}

@font-face {
  font-family: 'Garamond';
  src: url('../fonts/Garamond-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Garamond';
  src: url('../fonts/Garamond-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Garamond';
  src: url('../fonts/Garamond-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Garamond';
  src: url('../fonts/Garamond-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}

:root {

    /* ── Brand Colors ─────────────────────────────────────────────────── */
    --cfc-blue: #27588D;       /* Patriot Blue (PMS 2945 U) — links, primary buttons */
    --cfc-gold: #F4B824;       /* California Gold (PMS 7406 U) — accents, CTAs, gold bar */
    --cfc-navy: #002D5C;       /* Nightsky Blue (PMS 648) — dark backgrounds, primary text */
    --cfc-red: #CF0A2C;        /* Patriot Red (PMS 186) — donate, urgent alerts */
    --cfc-aqua: #00BEAC;       /* Pacific Aqua (PMS 3265) — decorative accents */

    /* Legacy aliases — use the brand names above in new code */
    --dark-navy: var(--cfc-navy);
    --alert-red: var(--cfc-red);

    /* ── Semantic Status Colors ────────────────────────────────────────── */
    --success-green: #0D7C3E;
    --warning-amber: #D97706;
    --error-red: #CF0A2C;
    --info-blue: #1e40af;

    /* ── Tinted Backgrounds (badges, alerts, status chips) ────────────── */
    --tint-success-bg: #d1fae5;
    --tint-success-border: #a7f3d0;
    --tint-success-text: #065f46;
    --tint-error-bg: #fde8e8;
    --tint-error-border: #fca5a5;
    --tint-error-text: #991b1b;
    --tint-warning-bg: #fef3c7;
    --tint-warning-border: #fcd34d;
    --tint-warning-text: #92400e;
    --tint-info-bg: #dbeafe;
    --tint-info-border: #93c5fd;
    --tint-info-text: #1e40af;
    --tint-purple-bg: #f5f3ff;
    --tint-purple-border: #c4b5fd;
    --tint-purple-text: #5b21b6;
    --tint-neutral-bg: #f3f4f6;
    --tint-neutral-border: #d1d5db;
    --tint-neutral-text: #6b7280;

    /* ── Party Colors ─────────────────────────────────────────────────── */
    --party-dem-bg: #dbeafe;
    --party-dem-text: #1e40af;
    --party-dem-dot: #2563eb;
    --party-rep-bg: #fde8e8;
    --party-rep-text: #991b1b;
    --party-rep-dot: #dc2626;
    --party-ind-bg: #f3e8ff;
    --party-ind-text: #6b21a8;
    --party-ind-dot: #7c3aed;

    /* ── Neutral / Gray Scale ─────────────────────────────────────────── */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* ── Background Colors ────────────────────────────────────────────── */
    --bg-white: #FFFFFF;
    --bg-warm: #FAF8F5;
    --bg-card: #FFFFFF;
    --bg-hover: #F0F5FF;
    --bg-subtle: #f8f9fa;

    /* ── Text Colors ──────────────────────────────────────────────────── */
    --text-primary: #002D5C;
    --text-secondary: #4A5568;
    /* v10.90 Sprint 3.3: darkened from #767676 (4.28:1) to #6B6B6B (5.03:1)
       so it meets WCAG AA on the warm --bg-warm (#FAF8F5). Old value
       only met AA on pure white; body background is warm, so it failed. */
    --muted-gray: #6B6B6B;
    --text-on-dark: #FFFFFF;
    --text-link-hover: #1d4a73;

    /* ── Borders & Shadows ────────────────────────────────────────────── */
    --light-border: #E5E5E5;
    --card-border: var(--light-border);
    --border-color: var(--light-border);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);

    /* ── Border Radius ────────────────────────────────────────────────── */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;

    /* ── Typography Scale ─────────────────────────────────────────────── */
    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-2xl: 28px;
    --text-3xl: 36px;
    --text-4xl: 48px;

    /* Font weights (v10.90 Sprint 5.2) */
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* Line heights (v10.90 Sprint 5.2) */
    --lh-tight: 1.2;    /* Headings */
    --lh-snug: 1.35;    /* Subheadings, dense UI */
    --lh-normal: 1.5;   /* Default body */
    --lh-relaxed: 1.6;  /* Long-form body (current body line-height) */
    --lh-loose: 1.75;   /* Articles, content pages */

    /* Font family stacks (v11.11 — 2026 identity refresh)
       --font-sans / --font-display: Avenir Next for all UI + headlines.
       --font-serif: Garamond for scripture citations + editorial pull-quotes.
       Open-source fallbacks (Nunito Sans / EB Garamond) are included purely
       as font-load failure safety nets — licensed faces are always first. */
    --font-sans: 'Avenir Next', 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: var(--font-sans);
    --font-serif: 'Garamond', 'EB Garamond', 'Adobe Garamond Pro', Georgia, 'Times New Roman', serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

    /* ── Responsive Breakpoints (v10.90 Sprint 5.1) ──────────────────
       NOTE: CSS @media queries cannot use var() for the breakpoint
       value itself (browser spec limitation). These tokens exist for:
         1. JavaScript consumers: getComputedStyle(document.documentElement)
            .getPropertyValue('--bp-md')
         2. Documentation + design-system living style guide
         3. Container queries that CAN use var()

       Mirror the breakpoints that @media queries already use throughout
       style.css so there's a single canonical list. Actual @media rules
       still need literal px values — but every developer should reference
       these tokens as the source of truth when picking a breakpoint.     */
    --bp-xs: 480px;    /* Phones                                    */
    --bp-sm: 640px;    /* Large phones / small tablets              */
    --bp-md: 768px;    /* Tablet portrait                           */
    --bp-lg: 900px;    /* Tablet landscape                          */
    --bp-xl: 1024px;   /* Desktop                                   */
    --bp-2xl: 1280px;  /* Large desktop                             */
    --bp-3xl: 1440px;  /* Widescreen                                */
    --bp-4xl: 1920px;  /* Ultrawide                                 */

    /* ── Transition Timing ────────────────────────────────────────────── */
    --ease-fast: 0.15s ease;
    --ease-default: 0.2s ease;
    --ease-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Spacing Scale (8px grid) ─────────────────────────────────────── */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;

    /* ── Touch Target (WCAG 2.5.5) ────────────────────────────────────── */
    --touch-min: 44px;

    /* ── Button System (v10.90 Sprint 4.1) ───────────────────────────
       One canonical set of per-variant tokens so button colors aren't
       hardcoded inside individual .btn-* rules. Refactored consumers
       live in style.css — new button variants should be added here
       first, then referenced from the CSS rule.                       */
    --btn-primary-bg:         var(--cfc-blue);
    --btn-primary-bg-hover:   var(--cfc-navy);
    --btn-primary-text:       var(--text-on-dark);
    --btn-primary-border:     transparent;

    --btn-gold-bg:            var(--cfc-gold);
    --btn-gold-bg-hover:      #E0A51E;              /* ~8% darker than base gold */
    --btn-gold-text:          var(--cfc-navy);
    --btn-gold-border:        transparent;

    --btn-outline-bg:         transparent;
    --btn-outline-bg-hover:   var(--cfc-blue);
    --btn-outline-text:       var(--cfc-blue);
    --btn-outline-text-hover: var(--text-on-dark);
    --btn-outline-border:     var(--cfc-blue);

    --btn-danger-bg:          var(--cfc-red);
    --btn-danger-bg-hover:    #A50821;              /* ~15% darker than base red */
    --btn-danger-text:        var(--text-on-dark);
    --btn-danger-border:      transparent;

    --btn-warning-bg:         var(--warning-amber);
    --btn-warning-bg-hover:   #B56200;              /* ~15% darker */
    --btn-warning-text:       var(--text-on-dark);
    --btn-warning-border:     transparent;

    --btn-success-bg:         var(--success-green);
    --btn-success-bg-hover:   #0A6330;
    --btn-success-text:       var(--text-on-dark);
    --btn-success-border:     transparent;

    --btn-secondary-bg:       var(--gray-100);
    --btn-secondary-bg-hover: var(--gray-200);
    --btn-secondary-text:     var(--text-primary);
    --btn-secondary-border:   var(--light-border);

    /* ── Button sizes (v10.90 audit item #10) ─────────────────────────
       Four size tiers used by .btn-xs/.btn-sm/.btn/.btn-md/.btn-lg.
       Note: --btn-xs-h and --btn-sm-h are below --touch-min (44px) —
       use only inside dense admin UIs where a larger touch target
       wrapper exists. Default .btn honors --touch-min.                */
    --btn-xs-h:   28px;     /* Micro button (inline table actions)     */
    --btn-sm-h:   34px;     /* Small dense UI button                   */
    --btn-md-h:   40px;     /* Standard .btn (roughly touch-min)       */
    --btn-lg-h:   48px;     /* Large hero CTA                          */

    /* Padding pairs — vertical then horizontal */
    --btn-xs-py:  2px;
    --btn-xs-px:  8px;
    --btn-sm-py:  4px;
    --btn-sm-px:  12px;
    --btn-md-py:  8px;
    --btn-md-px:  16px;
    --btn-lg-py:  12px;
    --btn-lg-px:  24px;

    /* ── Form input focus (v10.90 audit item #6) ──────────────────────
       Single source of truth for .form-control focus styling. Both
       mouse and keyboard focus change border color; only keyboard focus
       (:focus-visible) draws the outline ring so mouse users don't get
       a disruptive halo every time they click a field.                 */
    --input-focus-border:      var(--cfc-blue);
    --input-focus-ring-color:  var(--cfc-blue);
    --input-focus-ring-width:  2px;
    --input-focus-ring-offset: 2px;

    /* ── Hearing Urgency ──────────────────────────────────────────────── */
    --hearing-urgent: #dc2626;
    --hearing-soon: #d97706;
    --hearing-week: #2563eb;
    --hearing-later: #6b7280;
    --hearing-removed: #9333ea;

    /* ── Platform Colors ──────────────────────────────────────────────── */
    --platform-twitter: #000000;
    --platform-facebook: #1877F2;

    /* ── Absence Type Colors (Assembly/Senate journal parser) ─────────── */
    --absence-legislative-bg: #E8F4FD;
    --absence-legislative-text: #1565C0;
    --absence-personal-bg: #FFF3E0;
    --absence-personal-text: #E65100;
    --absence-illness-bg: #FFEBEE;
    --absence-illness-text: #C62828;
    --absence-leave-bg: #F3E5F5;
    --absence-leave-text: #6A1B9A;
    --absence-bereavement-bg: #ECEFF1;
    --absence-bereavement-text: #37474F;
}