/* ═══════════════════════════════════════════════════════════════════
   JUSTICEPATH DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════
   Import this file at the root of any web project to get the full
   JusticePath token system. Works with any framework (React, Vue,
   Svelte, plain HTML) — just reference var(--jp-*) in your CSS.

   Usage:
     @import url('./justicepath-tokens.css');
     — or —
     <link rel="stylesheet" href="./justicepath-tokens.css">

   Dark mode activates via [data-theme="dark"] on <html> or <body>.
   Only semantic tokens change — raw palette stays the same.
   ═══════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
   0. BRAND FONTS (self-hosted)
   DIN — UI / headers. Minion Pro — marketing/serif accents only.
   font-display: swap → fall back to system font until WOFF2 loads.
   ───────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'DIN';
  src: url('./fonts/DIN-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DIN';
  src: url('./fonts/DIN-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Minion Pro';
  src: url('./fonts/MinionPro-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ─────────────────────────────────────────────────────────────────
   1. RAW BRAND PALETTE
   These are the canonical brand colors. Never reference these
   directly in components — use the semantic tokens below instead.
   ───────────────────────────────────────────────────────────────── */
:root {
  /* Primary — the deep navy that anchors the entire brand */
  --jp-color-navy-900: #000B1F;   /* Deepest navy — footer, overlays (darker than 800 per brand kit) */
  --jp-color-navy-800: #001736;   /* PRIMARY BRAND COLOR — Justice Blue (Brand Toolkit, p.8) */
  --jp-color-navy-700: #002B5E;   /* Subtle hover/active state for navy-800 */
  --jp-color-navy-600: #1A3A5C;   /* Secondary navy — hover states, secondary sections */
  --jp-color-navy-500: #254B73;   /* Lighter navy — active sidebar items */
  --jp-color-navy-400: #3B6898;   /* Mid-navy — links on light backgrounds */
  --jp-color-navy-300: #5A89B5;   /* Light navy — decorative, disabled navy text */
  --jp-color-navy-200: #8FB1D4;   /* Very light — tag backgrounds, subtle indicators */
  --jp-color-navy-100: #C4D6E8;   /* Pale navy — selected row highlights */
  --jp-color-navy-50:  #E8EFF6;   /* Near-white navy tint — subtle backgrounds */

  /* Brand-kit blues (from JusticePath Brand Toolkit) — paired with navy family */
  --jp-color-blue-500: #3391D1;   /* Accent blue — inline links, info badges */
  --jp-color-blue-200: #A3C7E8;   /* Light blue — secondary accent, sidebar inactive text */
  --jp-color-blue-50:  #DEEDFA;   /* Pale blue — info banner backgrounds */

  /* Neutrals — carefully blue-tinted grays that harmonize with navy */
  --jp-color-gray-950: #1A1A2E;   /* Near-black with blue undertone */
  --jp-color-gray-900: #1E2433;   /* Darkest readable text */
  --jp-color-gray-800: #2D3748;   /* Primary body text */
  --jp-color-gray-700: #3D4A5C;   /* Secondary headings on light bg */
  --jp-color-gray-600: #4A5568;   /* Muted text */
  --jp-color-gray-500: #6B7A8D;   /* Placeholder text, captions, metadata */
  --jp-color-gray-400: #8C99A9;   /* Disabled text */
  --jp-color-gray-300: #B0BAC6;   /* Subtle borders, dividers */
  --jp-color-gray-200: #D1D8E0;   /* Card borders, input borders */
  --jp-color-gray-100: #E8EBF0;   /* Dividers, table borders */
  --jp-color-gray-50:  #F7F8FA;   /* Page background, card surfaces */
  --jp-color-white:    #FFFFFF;

  /* Accent — gold used sparingly for emphasis and premium feel */
  --jp-color-gold-700: #A07300;   /* Dark gold — text on light backgrounds */
  --jp-color-gold-600: #E0A300;   /* Gold hover */
  --jp-color-gold-500: #FCBA00;   /* PRIMARY ACCENT — Accent Yellow (Brand Toolkit, p.8) */
  --jp-color-gold-400: #FFD24D;   /* Light gold — secondary accent */
  --jp-color-gold-300: #FFE08A;   /* Pale gold — badge backgrounds */
  --jp-color-gold-200: #FFEDB3;   /* Very light gold — subtle highlight backgrounds */
  --jp-color-gold-100: #FFF7DB;   /* Near-white gold tint */
  --jp-color-gold-50:  #FFFBEC;   /* Faintest gold wash */

  /* Status colors */
  --jp-color-success-700: #1E6B38;
  --jp-color-success-600: #258A47;
  --jp-color-success-500: #2D8B4E;   /* Success green */
  --jp-color-success-100: #D4EDDA;
  --jp-color-success-50:  #F0FAF3;

  --jp-color-warning-700: #A67508;
  --jp-color-warning-600: #BF870B;
  --jp-color-warning-500: #D4930D;   /* Warning amber */
  --jp-color-warning-100: #FFF3CD;
  --jp-color-warning-50:  #FFFCF0;

  --jp-color-error-700: #9B2525;
  --jp-color-error-600: #B42D2D;
  --jp-color-error-500: #C53030;     /* Error/destructive red */
  --jp-color-error-100: #FED7D7;
  --jp-color-error-50:  #FFF5F5;

  --jp-color-info-700: #2667A8;
  --jp-color-info-600: #2D78BA;
  --jp-color-info-500: #3182CE;      /* Informational blue */
  --jp-color-info-100: #BEE3F8;
  --jp-color-info-50:  #EBF8FF;
}


/* ─────────────────────────────────────────────────────────────────
   2. SEMANTIC TOKENS — LIGHT MODE (default)
   These map brand colors to UI roles. Always use these in components.
   ───────────────────────────────────────────────────────────────── */
:root {
  /* ── Page scaffolding ── */
  --jp-bg-app:              var(--jp-color-gray-50);    /* Full-page background */
  --jp-bg-surface:          var(--jp-color-white);      /* Cards, modals, dropdowns */
  --jp-bg-surface-raised:   var(--jp-color-white);      /* Elevated cards, popovers */
  --jp-bg-surface-sunken:   var(--jp-color-gray-50);    /* Inset areas, code blocks */
  --jp-bg-muted:            var(--jp-color-gray-100);   /* Subtle background sections */
  --jp-bg-overlay:          rgba(9, 24, 41, 0.6);       /* Modal/drawer backdrop */

  /* ── Brand surfaces ── */
  --jp-bg-brand-primary:    var(--jp-color-navy-800);   /* Primary brand backgrounds */
  --jp-bg-brand-secondary:  var(--jp-color-navy-900);   /* Footer, dark brand sections */
  --jp-bg-brand-accent:     var(--jp-color-gold-500);   /* Accent bar, premium badges */
  --jp-bg-brand-subtle:     var(--jp-color-navy-50);    /* Selected states, active sidebar */

  /* ── Text ── */
  --jp-text-primary:        var(--jp-color-gray-800);   /* Body text */
  --jp-text-secondary:      var(--jp-color-gray-500);   /* Captions, metadata, timestamps */
  --jp-text-muted:          var(--jp-color-gray-400);   /* Placeholder, disabled labels */
  --jp-text-heading:        var(--jp-color-navy-800);   /* All headings */
  --jp-text-on-brand:       var(--jp-color-white);      /* Text on navy/dark backgrounds */
  --jp-text-on-accent:      var(--jp-color-navy-900);   /* Text on gold backgrounds */
  --jp-text-link:           var(--jp-color-info-500);   /* Inline body links */
  --jp-text-link-hover:     var(--jp-color-navy-800);   /* Link hover */

  /* ── Borders ── */
  --jp-border-default:      var(--jp-color-gray-200);   /* Card borders, input borders */
  --jp-border-subtle:       var(--jp-color-gray-100);   /* Dividers, table lines */
  --jp-border-strong:       var(--jp-color-gray-300);   /* Input focus ring outer */
  --jp-border-brand:        var(--jp-color-navy-800);   /* Active input, selected tab */
  --jp-border-accent:       var(--jp-color-gold-500);   /* Accent dividers, H1 underlines */

  /* ── Interactive — Primary (navy) ── */
  --jp-interactive-primary:         var(--jp-color-navy-800);
  --jp-interactive-primary-hover:   var(--jp-color-navy-700);
  --jp-interactive-primary-active:  var(--jp-color-navy-600);
  --jp-interactive-primary-text:    var(--jp-color-white);

  /* ── Interactive — Secondary (outline) ── */
  --jp-interactive-secondary:         transparent;
  --jp-interactive-secondary-border:  var(--jp-color-navy-800);
  --jp-interactive-secondary-hover:   var(--jp-color-navy-50);
  --jp-interactive-secondary-active:  var(--jp-color-navy-100);
  --jp-interactive-secondary-text:    var(--jp-color-navy-800);

  /* ── Interactive — Ghost (minimal) ── */
  --jp-interactive-ghost:         transparent;
  --jp-interactive-ghost-hover:   var(--jp-color-gray-100);
  --jp-interactive-ghost-active:  var(--jp-color-gray-200);
  --jp-interactive-ghost-text:    var(--jp-color-gray-800);

  /* ── Interactive — Accent (gold, sparingly) ── */
  --jp-interactive-accent:        var(--jp-color-gold-500);
  --jp-interactive-accent-hover:  var(--jp-color-gold-600);
  --jp-interactive-accent-active: var(--jp-color-gold-700);
  --jp-interactive-accent-text:   var(--jp-color-navy-900);

  /* ── Interactive — Destructive (red) ── */
  --jp-interactive-destructive:         var(--jp-color-error-500);
  --jp-interactive-destructive-hover:   var(--jp-color-error-600);
  --jp-interactive-destructive-active:  var(--jp-color-error-700);
  --jp-interactive-destructive-text:    var(--jp-color-white);

  /* ── Interactive — Disabled ── */
  --jp-interactive-disabled-bg:     var(--jp-color-gray-100);
  --jp-interactive-disabled-text:   var(--jp-color-gray-400);
  --jp-interactive-disabled-border: var(--jp-color-gray-200);

  /* ── Status colors (backgrounds + text for alerts/badges) ── */
  --jp-status-success-bg:     var(--jp-color-success-50);
  --jp-status-success-border: var(--jp-color-success-500);
  --jp-status-success-text:   var(--jp-color-success-700);

  --jp-status-warning-bg:     var(--jp-color-warning-50);
  --jp-status-warning-border: var(--jp-color-warning-500);
  --jp-status-warning-text:   var(--jp-color-warning-700);

  --jp-status-error-bg:       var(--jp-color-error-50);
  --jp-status-error-border:   var(--jp-color-error-500);
  --jp-status-error-text:     var(--jp-color-error-700);

  --jp-status-info-bg:        var(--jp-color-info-50);
  --jp-status-info-border:    var(--jp-color-info-500);
  --jp-status-info-text:      var(--jp-color-info-700);

  /* ── Focus ring ── */
  --jp-focus-ring:       0 0 0 2px var(--jp-color-white), 0 0 0 4px var(--jp-color-navy-400);
  --jp-focus-ring-inset: inset 0 0 0 2px var(--jp-color-navy-400);
}


/* ─────────────────────────────────────────────────────────────────
   3. TYPOGRAPHY
   ───────────────────────────────────────────────────────────────── */
:root {
  /* Font stacks */
  --jp-font-sans:   'DIN', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --jp-font-serif:  'Minion Pro', 'Source Serif 4', Georgia, serif;
  --jp-font-mono:   'JetBrains Mono', 'Fira Code', 'SF Mono', 'Cascadia Code', 'Consolas', monospace;

  /* Weight scale */
  --jp-font-weight-regular:  400;
  --jp-font-weight-medium:   500;
  --jp-font-weight-semibold: 600;
  --jp-font-weight-bold:     700;

  /* Type size scale (px / rem) */
  --jp-text-2xs:   0.625rem;    /* 10px — fine print */
  --jp-text-xs:    0.75rem;     /* 12px — captions, badges */
  --jp-text-sm:    0.875rem;    /* 14px — secondary text, table cells */
  --jp-text-base:  1rem;        /* 16px — body text */
  --jp-text-lg:    1.125rem;    /* 18px — lead paragraphs */
  --jp-text-xl:    1.25rem;     /* 20px — card titles, section headers */
  --jp-text-2xl:   1.5rem;      /* 24px — H4 / subsection */
  --jp-text-3xl:   1.875rem;    /* 30px — H3 */
  --jp-text-4xl:   2.25rem;     /* 36px — H2 */
  --jp-text-5xl:   3rem;        /* 48px — H1 / page title */
  --jp-text-6xl:   3.75rem;     /* 60px — hero / display */

  /* Line heights */
  --jp-leading-none:    1;
  --jp-leading-tight:   1.15;
  --jp-leading-snug:    1.3;
  --jp-leading-normal:  1.5;
  --jp-leading-relaxed: 1.7;
  --jp-leading-loose:   2;

  /* Letter spacing — wide tracking is a SIGNATURE brand trait */
  --jp-tracking-tighter:  -0.03em;
  --jp-tracking-tight:    -0.015em;
  --jp-tracking-normal:   0;
  --jp-tracking-wide:     0.025em;
  --jp-tracking-wider:    0.05em;
  --jp-tracking-widest:   0.1em;
  --jp-tracking-brand:    0.15em;   /* For the JUSTICEPATH wordmark only */

  /* Heading letter-spacing presets */
  --jp-tracking-h1: -0.02em;
  --jp-tracking-h2: -0.01em;
  --jp-tracking-h3: 0;
  --jp-tracking-button: 0.06em;
  --jp-tracking-nav:    0.05em;
  --jp-tracking-label:  0.04em;
  --jp-tracking-badge:  0.03em;
}


/* ─────────────────────────────────────────────────────────────────
   4. SPACING SCALE (4px base unit)
   ───────────────────────────────────────────────────────────────── */
:root {
  --jp-space-0:    0;
  --jp-space-px:   1px;
  --jp-space-0-5:  0.125rem;   /*  2px */
  --jp-space-1:    0.25rem;    /*  4px */
  --jp-space-1-5:  0.375rem;   /*  6px */
  --jp-space-2:    0.5rem;     /*  8px */
  --jp-space-2-5:  0.625rem;   /* 10px */
  --jp-space-3:    0.75rem;    /* 12px */
  --jp-space-4:    1rem;       /* 16px */
  --jp-space-5:    1.25rem;    /* 20px */
  --jp-space-6:    1.5rem;     /* 24px */
  --jp-space-8:    2rem;       /* 32px */
  --jp-space-10:   2.5rem;     /* 40px */
  --jp-space-12:   3rem;       /* 48px */
  --jp-space-16:   4rem;       /* 64px */
  --jp-space-20:   5rem;       /* 80px */
  --jp-space-24:   6rem;       /* 96px */
  --jp-space-32:   8rem;       /* 128px */
}


/* ─────────────────────────────────────────────────────────────────
   5. BORDER RADII, SHADOWS, TRANSITIONS, Z-INDEX
   ───────────────────────────────────────────────────────────────── */
:root {
  /* Border radii */
  --jp-radius-none: 0;
  --jp-radius-sm:   0.25rem;   /* 4px — buttons, inputs */
  --jp-radius-md:   0.5rem;    /* 8px — cards, dropdowns */
  --jp-radius-lg:   0.75rem;   /* 12px — modals, large cards */
  --jp-radius-xl:   1rem;      /* 16px — feature cards, hero areas */
  --jp-radius-2xl:  1.5rem;    /* 24px — large containers */
  --jp-radius-full: 9999px;    /* Pill buttons, avatars, badges */

  /* Shadows (navy-tinted for brand cohesion) */
  --jp-shadow-xs:   0 1px 2px rgba(13, 34, 64, 0.05);
  --jp-shadow-sm:   0 1px 3px rgba(13, 34, 64, 0.08), 0 1px 2px rgba(13, 34, 64, 0.04);
  --jp-shadow-md:   0 4px 6px -1px rgba(13, 34, 64, 0.08), 0 2px 4px -2px rgba(13, 34, 64, 0.05);
  --jp-shadow-lg:   0 10px 15px -3px rgba(13, 34, 64, 0.08), 0 4px 6px -4px rgba(13, 34, 64, 0.04);
  --jp-shadow-xl:   0 20px 25px -5px rgba(13, 34, 64, 0.10), 0 8px 10px -6px rgba(13, 34, 64, 0.05);
  --jp-shadow-2xl:  0 25px 50px -12px rgba(13, 34, 64, 0.20);
  --jp-shadow-inner: inset 0 2px 4px rgba(13, 34, 64, 0.06);

  /* Transitions */
  --jp-duration-instant:  75ms;
  --jp-duration-fast:     150ms;
  --jp-duration-base:     200ms;
  --jp-duration-moderate: 300ms;
  --jp-duration-slow:     500ms;
  --jp-ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --jp-ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --jp-ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --jp-ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --jp-ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index scale */
  --jp-z-behind:    -1;
  --jp-z-base:       0;
  --jp-z-raised:     1;
  --jp-z-dropdown:   10;
  --jp-z-sticky:     20;
  --jp-z-overlay:    30;
  --jp-z-modal:      40;
  --jp-z-popover:    50;
  --jp-z-toast:      60;
  --jp-z-tooltip:    70;
  --jp-z-max:        9999;
}


/* ─────────────────────────────────────────────────────────────────
   6. LAYOUT TOKENS
   ───────────────────────────────────────────────────────────────── */
:root {
  --jp-width-sidebar:           220px;
  --jp-width-sidebar-collapsed: 64px;
  --jp-width-content-max:       1200px;
  --jp-width-prose-max:         70ch;
  --jp-height-header:           64px;
  --jp-height-header-sm:        48px;
}


/* ═══════════════════════════════════════════════════════════════════
   7. DARK MODE OVERRIDES
   Activate by setting data-theme="dark" on <html> or <body>.
   Only semantic tokens change — raw palette stays the same.
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* ── Page scaffolding ── */
  --jp-bg-app:              #0B1929;
  --jp-bg-surface:          #112236;
  --jp-bg-surface-raised:   #162B45;
  --jp-bg-surface-sunken:   #081420;
  --jp-bg-muted:            #0F1D30;
  --jp-bg-overlay:          rgba(4, 10, 20, 0.75);

  /* ── Brand surfaces ── */
  --jp-bg-brand-primary:    var(--jp-color-navy-800);
  --jp-bg-brand-secondary:  #060E18;
  --jp-bg-brand-accent:     var(--jp-color-gold-500);
  --jp-bg-brand-subtle:     rgba(13, 34, 64, 0.4);

  /* ── Text ── */
  --jp-text-primary:        #E2E8F0;
  --jp-text-secondary:      #8B9BB5;
  --jp-text-muted:          #5A6A80;
  --jp-text-heading:        #F0F4F8;
  --jp-text-on-brand:       var(--jp-color-white);
  --jp-text-on-accent:      var(--jp-color-navy-900);
  --jp-text-link:           #63B3ED;
  --jp-text-link-hover:     #90CDF4;

  /* ── Borders ── */
  --jp-border-default:      #1E3450;
  --jp-border-subtle:       #162B42;
  --jp-border-strong:       #2A4565;
  --jp-border-brand:        var(--jp-color-navy-500);
  --jp-border-accent:       var(--jp-color-gold-600);

  /* ── Interactive — Primary ── */
  --jp-interactive-primary:         #1A3A5C;
  --jp-interactive-primary-hover:   #254B73;
  --jp-interactive-primary-active:  #0D2240;
  --jp-interactive-primary-text:    var(--jp-color-white);

  /* ── Interactive — Secondary ── */
  --jp-interactive-secondary:         transparent;
  --jp-interactive-secondary-border:  #3B6898;
  --jp-interactive-secondary-hover:   rgba(37, 75, 115, 0.2);
  --jp-interactive-secondary-active:  rgba(37, 75, 115, 0.3);
  --jp-interactive-secondary-text:    #8FB1D4;

  /* ── Interactive — Ghost ── */
  --jp-interactive-ghost:         transparent;
  --jp-interactive-ghost-hover:   rgba(255, 255, 255, 0.06);
  --jp-interactive-ghost-active:  rgba(255, 255, 255, 0.1);
  --jp-interactive-ghost-text:    #C4D6E8;

  /* ── Interactive — Destructive ── */
  --jp-interactive-destructive:         #E53E3E;
  --jp-interactive-destructive-hover:   #FC4848;
  --jp-interactive-destructive-active:  #C53030;
  --jp-interactive-destructive-text:    var(--jp-color-white);

  /* ── Interactive — Disabled ── */
  --jp-interactive-disabled-bg:     #162B42;
  --jp-interactive-disabled-text:   #3D5570;
  --jp-interactive-disabled-border: #1E3450;

  /* ── Status colors ── */
  --jp-status-success-bg:     rgba(45, 139, 78, 0.12);
  --jp-status-success-border: #2D8B4E;
  --jp-status-success-text:   #68D391;

  --jp-status-warning-bg:     rgba(212, 147, 13, 0.12);
  --jp-status-warning-border: #D4930D;
  --jp-status-warning-text:   #F6C547;

  --jp-status-error-bg:       rgba(197, 48, 48, 0.12);
  --jp-status-error-border:   #E53E3E;
  --jp-status-error-text:     #FEB2B2;

  --jp-status-info-bg:        rgba(49, 130, 206, 0.12);
  --jp-status-info-border:    #4299E1;
  --jp-status-info-text:      #90CDF4;

  /* ── Focus ring ── */
  --jp-focus-ring: 0 0 0 2px #112236, 0 0 0 4px #5A89B5;

  /* ── Shadows ── */
  --jp-shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --jp-shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  --jp-shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
  --jp-shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
}