/* ==================================================================
   JUSTPIXEL
   GLOBAL DESIGN TOKENS

   This file contains design variables only.

   Do not put page-specific component styling in here.
   Components belong in shared.css or their relevant page stylesheet.
   ================================================================== */

:root {
  /* ==============================================================
       BRAND COLOURS
       ============================================================== */

  --jp-navy-950: #001233;
  --jp-navy-900: #00245f;
  --jp-navy-800: #003580;

  --jp-blue-700: #0047d9;
  --jp-blue-600: #0055ff;
  --jp-blue-500: #1769ff;

  --jp-blue-200: #c9d8ff;
  --jp-blue-100: #e6eeff;
  --jp-blue-50: #f4f7ff;

  /* ==============================================================
       SEMANTIC BRAND ALIASES
       ============================================================== */

  --jp-primary: var(--jp-blue-600);
  --jp-primary-hover: var(--jp-blue-700);

  --jp-accent: var(--jp-navy-950);
  --jp-accent-hover: var(--jp-navy-900);

  --jp-accent-light: var(--jp-blue-100);

  /* ==============================================================
       PAGE / SURFACE COLOURS
       ============================================================== */

  --jp-bg: #ffffff;

  --jp-surface: #ffffff;
  --jp-surface-soft: #f7f9fc;
  --jp-surface-muted: #f1f4f8;
  --jp-surface-accent: var(--jp-blue-50);

  --jp-surface-hover: color-mix(in srgb, var(--jp-blue-100) 45%, white);

  /* ==============================================================
       TEXT
       ============================================================== */

  --jp-text: var(--jp-navy-950);

  --jp-text-muted: #536079;
  --jp-text-soft: #738097;

  --jp-text-inverse: #ffffff;

  /* Existing compatibility alias */
  --jp-muted: var(--jp-text-muted);

  /* ==============================================================
       BORDERS
       ============================================================== */

  --jp-border: #dce3ee;
  --jp-border-strong: #c7d1df;

  --jp-border-focus: var(--jp-primary);

  /* ==============================================================
       STATUS / FEEDBACK
       ============================================================== */

  --jp-success: #15803d;
  --jp-success-soft: #ecfdf3;
  --jp-success-border: #bbf7d0;

  --jp-warning: #b45309;
  --jp-warning-soft: #fff7ed;
  --jp-warning-border: #fed7aa;

  --jp-danger: #b42318;
  --jp-danger-soft: #fff1f0;
  --jp-danger-border: #fecaca;

  --jp-info: var(--jp-primary);
  --jp-info-soft: var(--jp-blue-50);
  --jp-info-border: var(--jp-blue-200);

  /* ==============================================================
       HEADER
       ============================================================== */

  --jp-header-bg: color-mix(in srgb, var(--jp-blue-100) 55%, white);

  --jp-header-border: var(--jp-border);

  /* ==============================================================
       FOOTER
       ============================================================== */

  --jp-footer-bg: var(--jp-navy-950);

  --jp-footer-text: rgba(255, 255, 255, 0.88);

  --jp-footer-muted: rgba(255, 255, 255, 0.65);

  --jp-footer-border: rgba(255, 255, 255, 0.15);

  /* ==============================================================
       TYPOGRAPHY
       ============================================================== */

  --jp-font-sans:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;

  --jp-font-mono: "Cascadia Code", Consolas, Monaco, "Courier New", monospace;

  /* Font sizes */

  --jp-text-xs: 0.75rem;
  --jp-text-sm: 0.875rem;
  --jp-text-base: 1rem;
  --jp-text-lg: 1.125rem;
  --jp-text-xl: 1.25rem;
  --jp-text-2xl: 1.5rem;
  --jp-text-3xl: 2rem;
  --jp-text-4xl: 2.5rem;

  /* ==============================================================
       FONT WEIGHTS
       ============================================================== */

  --jp-weight-normal: 400;
  --jp-weight-medium: 500;
  --jp-weight-semibold: 600;
  --jp-weight-bold: 700;
  --jp-weight-heavy: 800;

  /* ==============================================================
       LINE HEIGHTS
       ============================================================== */

  --jp-leading-tight: 1.2;
  --jp-leading-normal: 1.5;
  --jp-leading-relaxed: 1.65;

  /* ==============================================================
       SPACING SCALE
       ============================================================== */

  --jp-space-1: 0.25rem;
  --jp-space-2: 0.5rem;
  --jp-space-3: 0.75rem;
  --jp-space-4: 1rem;
  --jp-space-5: 1.25rem;
  --jp-space-6: 1.5rem;
  --jp-space-8: 2rem;
  --jp-space-10: 2.5rem;
  --jp-space-12: 3rem;
  --jp-space-16: 4rem;

  /* ==============================================================
       BORDER RADII
       ============================================================== */

  --jp-radius-xs: 6px;
  --jp-radius-sm: 8px;
  --jp-radius-md: 12px;
  --jp-radius-lg: 16px;
  --jp-radius-xl: 22px;
  --jp-radius-pill: 999px;

  /*
     * Compatibility alias for the existing site.
     * Older CSS can continue using --jp-radius while we migrate.
     */
  --jp-radius: var(--jp-radius-lg);

  /* ==============================================================
       SHADOWS
       ============================================================== */

  --jp-shadow-xs: 0 1px 3px rgba(0, 18, 51, 0.05);

  --jp-shadow-sm: 0 3px 10px rgba(0, 18, 51, 0.07);

  --jp-shadow: 0 10px 28px rgba(0, 18, 51, 0.1);

  --jp-shadow-hover: 0 16px 38px rgba(0, 18, 51, 0.14);

  /* ==============================================================
       FOCUS
       ============================================================== */

  --jp-focus-ring: 0 0 0 3px
    color-mix(in srgb, var(--jp-primary) 18%, transparent);

  /* ==============================================================
       TRANSITIONS
       ============================================================== */

  --jp-transition-fast: 120ms ease;
  --jp-transition: 180ms ease;
  --jp-transition-slow: 280ms ease;

  /* ==============================================================
       LAYOUT
       ============================================================== */

  --jp-content-width: 1200px;

  --jp-page-padding: 3rem;

  --jp-section-gap: 2rem;
}