/* ==========================================================================
   Pax Protect — Design Tokens
   Colors, Typography, Spacing, Radii, Shadows, Motion
   ========================================================================== */

/* Inter — self-hosted from fonts/ (18pt optical size for body & UI) */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter_18pt-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter_18pt-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter_18pt-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter_18pt-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter_18pt-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter_18pt-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}
/* Inter Display — 24pt optical size for headings (H1/H2) */
@font-face {
  font-family: 'Inter Display';
  src: url('/fonts/Inter_24pt-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter Display';
  src: url('/fonts/Inter_24pt-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter Display';
  src: url('/fonts/Inter_28pt-Bold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  /* ------------------------------------------------------------------------
     CORE PALETTE
     ------------------------------------------------------------------------ */
  --pp-deep-space-blue: #1E293B;   /* Structure, navigation, primary text */
  --pp-brand-blue:      #0156A1;   /* Logo, key accents, links, selected states */
  --pp-hover-blue:      #01427C;   /* Hover / active interactions */
  --pp-light-brand:     #3A7FC4;   /* Supporting UI (charts, borders) */
  --pp-sky-aqua:        #5ADBFF;   /* Interactive highlights, focus states */
  --pp-lemon-lime:      #DDF45B;   /* CTAs, positive alerts */
  --pp-white:           #FFFFFF;
  --pp-light-gray:      #F3F4F6;

  /* ------------------------------------------------------------------------
     BLUE SCALE (from blue-scale-reference)
     ------------------------------------------------------------------------ */
  --pp-blue-50:  #ECF3FB;
  --pp-blue-100: #D6E6F7;
  --pp-blue-200: #AECBEC;
  --pp-blue-300: #85AFE0;
  --pp-blue-400: #5D95D4;
  --pp-blue-500: #3A7FC4;
  --pp-blue-600: #186BB8;
  --pp-blue-700: #0156A1;  /* = brand blue */
  --pp-blue-800: #015699;
  --pp-blue-900: #01427C;  /* = hover blue */

  /* ------------------------------------------------------------------------
     NEUTRAL SCALE (warm-cool gray for surfaces & text)
     ------------------------------------------------------------------------ */
  --pp-gray-50:  #F8FAFC;
  --pp-gray-100: #F3F4F6;
  --pp-gray-200: #E5E7EB;
  --pp-gray-300: #D1D5DB;
  --pp-gray-400: #9CA3AF;
  --pp-gray-500: #6B7280;
  --pp-gray-600: #4B5563;
  --pp-gray-700: #374151;
  --pp-gray-800: #1F2937;
  --pp-gray-900: #1E293B;  /* = deep space blue */

  /* ------------------------------------------------------------------------
     SEMANTIC COLORS
     ------------------------------------------------------------------------ */
  /* Tuned to sit calmly next to brand blues — muted, grown-up, never traffic-light */
  --pp-success: #10B5A6;   /* deep teal-green — confident "all clear" */
  --pp-warning: #E8A33D;   /* honey amber — warm parental "heads up" */
  --pp-danger:  #E2574C;   /* deep coral — handled, not panicked */

  --pp-success-bg: #E6F7F4;
  --pp-success-border: #BDE9E2;
  --pp-success-fg: #0E6F66;
  --pp-warning-bg: #FBF1DF;
  --pp-warning-border: #F2DDB1;
  --pp-warning-fg: #8A5A12;
  --pp-danger-bg:  #FBECEA;
  --pp-danger-border: #F4C9C5;
  --pp-danger-fg:  #8E2A23;

  /* ------------------------------------------------------------------------
     ROLES — semantic abstractions of color
     ------------------------------------------------------------------------ */
  /* Surfaces */
  --pp-bg:           var(--pp-white);
  --pp-bg-subtle:    var(--pp-gray-100);
  --pp-bg-muted:     var(--pp-blue-50);
  --pp-surface:      var(--pp-white);
  --pp-surface-alt:  var(--pp-gray-50);

  /* Text */
  --pp-fg:           var(--pp-deep-space-blue);  /* primary text */
  --pp-fg-2:         var(--pp-gray-700);          /* secondary text */
  --pp-fg-3:         var(--pp-gray-500);          /* tertiary / captions */
  --pp-fg-on-blue:   var(--pp-white);
  --pp-fg-on-lime:   var(--pp-deep-space-blue);

  /* Borders */
  --pp-border:        var(--pp-gray-200);
  --pp-border-strong: var(--pp-gray-300);
  --pp-border-focus:  var(--pp-sky-aqua);

  /* Brand / interaction */
  --pp-link:          var(--pp-brand-blue);
  --pp-link-hover:    var(--pp-hover-blue);
  --pp-accent:        var(--pp-sky-aqua);
  --pp-action:        var(--pp-lemon-lime);

  /* ------------------------------------------------------------------------
     GRADIENTS
     ------------------------------------------------------------------------ */
  --pp-gradient-primary: linear-gradient(135deg, #1E293B 0%, #0156A1 100%);
  --pp-gradient-accent:  linear-gradient(135deg, #0156A1 0%, #5ADBFF 100%);
  --pp-gradient-brand-light: linear-gradient(135deg, #0156A1 0%, #3A7FC4 100%);
  --pp-gradient-app-icon: linear-gradient(135deg, #0156A1 0%, #5ADBFF 100%);

  /* ------------------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------------------ */
  --pp-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --pp-font-display: 'Inter Display', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pp-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Font weights */
  --pp-fw-regular:  400;
  --pp-fw-medium:   500;
  --pp-fw-semibold: 600;
  --pp-fw-bold:     700;
  --pp-fw-extra:    800;

  /* Type scale (mobile-first; large for desktop) */
  --pp-text-h1:       36px;
  --pp-text-h1-min:   32px;
  --pp-text-h2:       28px;
  --pp-text-h2-min:   24px;
  --pp-text-h3:       20px;
  --pp-text-body:     16px;
  --pp-text-small:    14px;
  --pp-text-caption:  12px;

  /* Line heights */
  --pp-lh-tight:   1.2;   /* large display */
  --pp-lh-snug:    1.3;   /* headings */
  --pp-lh-normal:  1.5;   /* body */
  --pp-lh-relaxed: 1.6;   /* long form */

  /* Letter spacing */
  --pp-ls-heading: -0.01em;  /* tighter for headings */
  --pp-ls-body:    0;
  --pp-ls-eyebrow: 0.04em;

  /* ------------------------------------------------------------------------
     SPACING (8px base; 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64)
     ------------------------------------------------------------------------ */
  --pp-space-1:  4px;
  --pp-space-2:  8px;
  --pp-space-3:  12px;
  --pp-space-4:  16px;
  --pp-space-6:  24px;
  --pp-space-8:  32px;
  --pp-space-12: 48px;
  --pp-space-16: 64px;

  /* ------------------------------------------------------------------------
     RADII
     ------------------------------------------------------------------------ */
  --pp-radius-sm:   6px;
  --pp-radius-md:   8px;   /* inputs */
  --pp-radius-lg:   12px;  /* cards (small) */
  --pp-radius-xl:   16px;  /* cards (default) */
  --pp-radius-2xl:  20px;
  --pp-radius-pill: 999px;

  /* ------------------------------------------------------------------------
     SHADOWS — soft, calm
     ------------------------------------------------------------------------ */
  --pp-shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.04);
  --pp-shadow-sm:  0 2px 6px rgba(15, 23, 42, 0.05);
  --pp-shadow-md:  0 4px 12px rgba(15, 23, 42, 0.06);   /* card default */
  --pp-shadow-lg:  0 8px 24px rgba(15, 23, 42, 0.08);
  --pp-shadow-xl:  0 16px 40px rgba(15, 23, 42, 0.12);
  --pp-shadow-focus: 0 0 0 3px rgba(90, 219, 255, 0.45);

  /* ------------------------------------------------------------------------
     MOTION
     ------------------------------------------------------------------------ */
  --pp-dur-fast:   150ms;
  --pp-dur-base:   200ms;
  --pp-dur-slow:   250ms;
  --pp-ease:       cubic-bezier(0.2, 0.7, 0.2, 1); /* smooth, calm */
  --pp-ease-out:   cubic-bezier(0, 0, 0.2, 1);

  /* ------------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------------ */
  --pp-container-max: 1200px;
  --pp-container-pad-desktop: 24px;
  --pp-container-pad-mobile:  16px;
}

/* ==========================================================================
   BASE TYPOGRAPHY — semantic element styles
   ========================================================================== */
.pp-root,
.pp-typography {
  font-family: var(--pp-font-sans);
  color: var(--pp-fg);
  font-size: var(--pp-text-body);
  line-height: var(--pp-lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}

.pp-h1, h1.pp {
  font-family: var(--pp-font-display);
  font-size: var(--pp-text-h1);
  line-height: var(--pp-lh-tight);
  font-weight: var(--pp-fw-bold);
  letter-spacing: var(--pp-ls-heading);
  color: var(--pp-fg);
  margin: 0;
}

.pp-h2, h2.pp {
  font-family: var(--pp-font-display);
  font-size: var(--pp-text-h2);
  line-height: var(--pp-lh-snug);
  font-weight: var(--pp-fw-semibold);
  letter-spacing: var(--pp-ls-heading);
  color: var(--pp-fg);
  margin: 0;
}

.pp-h3, h3.pp {
  font-size: var(--pp-text-h3);
  line-height: var(--pp-lh-snug);
  font-weight: var(--pp-fw-semibold);
  color: var(--pp-fg);
  margin: 0;
}

.pp-body, p.pp {
  font-size: var(--pp-text-body);
  line-height: var(--pp-lh-normal);
  color: var(--pp-fg-2);
  margin: 0;
}

.pp-small {
  font-size: var(--pp-text-small);
  line-height: var(--pp-lh-normal);
  color: var(--pp-fg-2);
}

.pp-caption {
  font-size: var(--pp-text-caption);
  line-height: var(--pp-lh-normal);
  color: var(--pp-fg-3);
}

.pp-eyebrow {
  font-size: var(--pp-text-caption);
  font-weight: var(--pp-fw-semibold);
  letter-spacing: var(--pp-ls-eyebrow);
  color: var(--pp-light-brand);
  text-transform: uppercase;
}

.pp-mono {
  font-family: var(--pp-font-mono);
  font-size: 13px;
}

/* Links */
.pp-link, a.pp {
  color: var(--pp-link);
  text-decoration: none;
  font-weight: var(--pp-fw-medium);
  transition: color var(--pp-dur-fast) var(--pp-ease);
}
.pp-link:hover, a.pp:hover {
  color: var(--pp-link-hover);
  text-decoration: underline;
}