/* ============================================================================
   jp-design-tokens.css — JetPatient Mobile Design System v1 (Block 46.1)
   ----------------------------------------------------------------------------
   SINGLE SOURCE OF TRUTH for color, type, spacing, radius, shadow, motion,
   z-index, and brand surfaces. Loaded BEFORE every other mobile stylesheet so
   tokens are available throughout the cascade.

   Two principles:
     1. Component CSS NEVER uses raw hex / px values for branded properties —
        always consume a token. This is what ends the !important wars.
     2. Tokens are derived from production usage (Blocks 1–45) PLUS refinements
        (4-pt-anchored spacing scale gap-filled, glass surfaces codified, full
        easing palette, brand gradient and scrim tokens, z-index ladder).

   Loading order — IMPORTANT:
     <link rel="stylesheet" href="/assets/css/jp-design-tokens.css">  ← THIS, FIRST
     <link rel="stylesheet" href="/assets/css/jp-mobile.css">
     <link rel="stylesheet" href="/assets/css/jp-marketing-mobile-v2.css" media="(max-width:760px)">
     <link rel="stylesheet" href="/assets/css/jp-mobile-components.css"> ← Block 46 component layer
     <link rel="stylesheet" href="/assets/css/jp-ios.css">
     <link rel="stylesheet" href="/assets/css/jp-mobile-polish.css">    ← Will retire in Block 47

   Desktop is untouched: this file defines variables only. No selectors that
   would change rendering on >760px viewports.
   ========================================================================== */

:root {

  /* ── Brand: navy + teal core ─────────────────────────────────────────── */
  --jp-navy:           #0A2D6E;          /* Primary navy (load-bearing — used in 1,200+ places) */
  --jp-navy-lt:        #0e3b90;          /* Navy hover/active state */
  --jp-navy-dk:        #06204e;          /* Deep navy for dark heroes */
  --jp-navy-ink:       #050A1A;          /* Near-black navy for max-contrast text on light */
  --jp-blue-mid:       #1a5fd6;          /* Bridge color in brand gradient */
  --jp-teal:           #00C9C0;          /* Primary teal accent */
  --jp-teal-dk:        #00A89F;          /* Accessible teal on white (4.5:1 contrast) */
  --jp-teal-lt:        #5be0d8;          /* Soft teal for hovers / glow */

  /* ── Brand alphas (precomputed rgba) ──────────────────────────────────── */
  --jp-navy-04:        rgba(10,45,110,.04);
  --jp-navy-06:        rgba(10,45,110,.06);
  --jp-navy-08:        rgba(10,45,110,.08);
  --jp-navy-10:        rgba(10,45,110,.10);
  --jp-navy-14:        rgba(10,45,110,.14);
  --jp-navy-18:        rgba(10,45,110,.18);
  --jp-navy-22:        rgba(10,45,110,.22);
  --jp-navy-32:        rgba(10,45,110,.32);
  --jp-navy-42:        rgba(10,30,62,.42);     /* Scrim (modal/drawer overlay) */
  --jp-navy-78:        rgba(10,30,62,.78);     /* Dark glass surface */

  --jp-teal-05:        rgba(0,201,192,.05);
  --jp-teal-07:        rgba(0,201,192,.07);
  --jp-teal-10:        rgba(0,201,192,.10);
  --jp-teal-12:        rgba(0,201,192,.12);
  --jp-teal-15:        rgba(0,201,192,.15);
  --jp-teal-22:        rgba(0,201,192,.22);
  --jp-teal-32:        rgba(0,201,192,.32);

  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --jp-bg:             #ffffff;          /* Page base */
  --jp-bg-elev:        #ffffff;          /* Elevated card on white */
  --jp-bg-off:         #F6F8FC;          /* Off-white section background */
  --jp-bg-tint:        var(--jp-navy-04);/* Subtle navy-tinted background */

  /* Glass surfaces — codify the backdrop-filter pattern used across topbars,
     hero pills, proof strips, sheets. */
  --jp-glass:          rgba(255,255,255,.92);  /* Light glass (topbar, sheet) */
  --jp-glass-soft:     rgba(255,255,255,.72);  /* Soft glass (hero pills, proof strips) */
  --jp-glass-faint:    rgba(255,255,255,.62);  /* Faintest glass overlay */
  --jp-glass-dk:       var(--jp-navy-78);      /* Dark navy glass for dark surfaces */
  --jp-blur-glass:     saturate(180%) blur(18px);
  --jp-blur-soft:      saturate(180%) blur(8px);

  /* ── Ink (text colors) ────────────────────────────────────────────────── */
  --jp-text:           #111827;          /* Body text */
  --jp-text-2:         #374151;          /* Secondary text */
  --jp-muted:          #5A6B8C;          /* Muted UI text */
  --jp-faint:          #94A3B8;          /* Disabled / metadata */
  --jp-on-dark:        #FFFFFF;          /* Text on dark surfaces */
  --jp-on-dark-soft:   rgba(255,255,255,.78);

  --jp-border:         #E4E9F2;          /* Default border */
  --jp-border-strong:  #CBD5E1;          /* Strong border (inputs in focus) */
  --jp-border-navy:    var(--jp-navy-10);/* Brand-tinted border */

  /* ── Semantic colors ──────────────────────────────────────────────────── */
  --jp-success:        #047857;
  --jp-success-bg:     #ECFDF5;
  --jp-success-tint:   rgba(4,120,87,.08);
  --jp-warn:           #B45309;
  --jp-warn-bg:        #FFF7ED;
  --jp-warn-tint:      rgba(180,83,9,.08);
  --jp-danger:         #991B1B;
  --jp-danger-bg:      #FEE2E2;
  --jp-danger-tint:    rgba(153,27,27,.08);
  --jp-info:           var(--jp-blue-mid);
  --jp-info-bg:        #EFF6FF;
  --jp-info-tint:      rgba(26,95,214,.08);

  /* ── Brand gradients ──────────────────────────────────────────────────── */
  /* THE brand gradient — used on primary CTAs, marketplace search submit,
     and any high-emphasis surface. Always 135deg navy → mid-blue → teal. */
  --jp-grad-brand:     linear-gradient(135deg, #0A2D6E 0%, #1a5fd6 50%, #00C9C0 100%);
  --jp-grad-brand-rev: linear-gradient(135deg, #00C9C0 0%, #1a5fd6 50%, #0A2D6E 100%);
  --jp-grad-navy:      linear-gradient(135deg, #0A2D6E 0%, #1a5fd6 100%);
  --jp-grad-teal:      linear-gradient(135deg, #00A89F 0%, #00C9C0 100%);
  --jp-grad-hero:      linear-gradient(160deg, #f4f8ff 0%, #eaf1ff 36%, #e0f5f3 78%, #f0fbfa 100%);
  --jp-grad-hero-dark: linear-gradient(160deg, #06204e 0%, #0A2D6E 50%, #0e3b90 100%);
  --jp-blob-teal:      radial-gradient(circle, rgba(0,201,192,.22), transparent 65%);
  --jp-blob-navy:      radial-gradient(circle, rgba(10,45,110,.10), transparent 65%);

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --jp-font-sans:      'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --jp-font-mono:      'JetBrains Mono', ui-monospace, monospace;

  /* Type scale — mobile-first, conservative.
     16px base is LOAD-BEARING: iOS will auto-zoom inputs <16px, ruining UX. */
  --jp-fs-xs:          12px;
  --jp-fs-sm:          14px;
  --jp-fs-base:        16px;
  --jp-fs-md:          17px;
  --jp-fs-lg:          19px;
  --jp-fs-xl:          22px;
  --jp-fs-2xl:         26px;
  --jp-fs-3xl:         32px;
  --jp-fs-4xl:         38px;
  --jp-fs-5xl:         46px;       /* Refinement: top of scale for hero numerics */

  /* Line heights — paired with type sizes */
  --jp-lh-tight:       1.04;       /* Hero h1 */
  --jp-lh-snug:        1.18;       /* Section h2 */
  --jp-lh-normal:      1.45;       /* UI text */
  --jp-lh-relaxed:     1.55;       /* Body lede */
  --jp-lh-loose:       1.65;       /* Long-form body */

  /* Letter spacing */
  --jp-ls-tightest:    -.032em;    /* Hero h1 */
  --jp-ls-tighter:     -.02em;     /* Section h2 */
  --jp-ls-tight:       -.005em;    /* UI labels */
  --jp-ls-normal:      0;
  --jp-ls-wide:        .06em;      /* Trust chips */
  --jp-ls-wider:       .10em;      /* Eyebrow labels */

  /* Font weights */
  --jp-fw-regular:     400;
  --jp-fw-medium:      500;
  --jp-fw-semibold:    600;
  --jp-fw-bold:        700;
  --jp-fw-black:       800;        /* Brand body weight */

  /* ── Spacing — 4-pt anchored ─────────────────────────────────────────── */
  --jp-sp-0:           0;
  --jp-sp-1:           4px;
  --jp-sp-2:           8px;
  --jp-sp-3:           12px;
  --jp-sp-4:           16px;
  --jp-sp-5:           20px;
  --jp-sp-6:           24px;
  --jp-sp-7:           32px;
  --jp-sp-8:           40px;
  --jp-sp-9:           56px;
  --jp-sp-10:          64px;       /* Refinement: previous gap */
  --jp-sp-11:          80px;
  --jp-sp-12:          96px;

  /* ── Radii ────────────────────────────────────────────────────────────── */
  --jp-r-xs:           6px;        /* Refinement: filling the gap below sm */
  --jp-r-sm:           8px;
  --jp-r-md:           12px;
  --jp-r-lg:           18px;
  --jp-r-xl:           24px;
  --jp-r-2xl:          32px;       /* Refinement: large sheets */
  --jp-r-pill:         999px;

  /* ── Elevation (all navy-tinted — brand signature) ────────────────────── */
  --jp-shadow-xs:      0 1px 2px rgba(10,45,110,.04);
  --jp-shadow-sm:      0 1px 2px rgba(10,45,110,.06);
  --jp-shadow-md:      0 4px 14px rgba(10,45,110,.08);
  --jp-shadow-lg:      0 12px 32px rgba(10,45,110,.14);
  --jp-shadow-xl:      0 24px 48px rgba(10,45,110,.18);
  --jp-shadow-topbar:  0 1px 0 rgba(10,45,110,.04), 0 4px 16px rgba(10,45,110,.04);
  --jp-shadow-sheet:   0 -8px 32px rgba(10,45,110,.10);
  --jp-shadow-cta:     0 6px 20px rgba(10,45,110,.22), 0 2px 6px rgba(0,201,192,.18);
  --jp-shadow-cta-active: 0 4px 14px rgba(10,45,110,.18), 0 2px 6px rgba(0,201,192,.12);
  --jp-glow-teal:      0 0 8px var(--jp-teal);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  /* Easing palette — pick the curve that matches the gesture:
     - snap:    quick, decisive UI feedback (taps, ripples)
     - soft:    gentle entries (modal open, fade-in)
     - spring:  playful overshoot (success ticks, attention)
     - emph:    Material-inspired emphasis (sheets, navigation)
     - linear:  loaders, progress */
  --jp-ease-snap:      cubic-bezier(0.32, 0.72, 0, 1);
  --jp-ease-soft:      cubic-bezier(0.22, 1, 0.36, 1);
  --jp-ease-spring:    cubic-bezier(0.5, 1.25, 0.75, 1.25);
  --jp-ease-emph:      cubic-bezier(0.32, 0.72, 0, 1);  /* Legacy alias for snap */
  --jp-ease:           cubic-bezier(0.22, 1, 0.36, 1);  /* Legacy alias for soft */

  --jp-dur-0:          80ms;       /* Instant feedback (active state) */
  --jp-dur-1:          120ms;      /* Quick UI response */
  --jp-dur-2:          200ms;      /* Standard transition */
  --jp-dur-3:          320ms;      /* Page-level transition */
  --jp-dur-4:          480ms;      /* Hero animation */
  --jp-dur-sheet:      280ms;      /* Bottom sheet open/close */
  --jp-dur-page:       240ms;      /* Page transition (View Transitions API) */

  /* ── Touch targets (Apple HIG / WCAG 2.5.5) ──────────────────────────── */
  --jp-tap-min:        44px;       /* Minimum (Apple HIG) */
  --jp-tap-comfortable:48px;       /* Comfortable */
  --jp-tap-primary:    56px;       /* Primary CTAs / form inputs */
  --jp-tap-hero:       60px;       /* Hero CTAs */

  /* ── Safe areas (iOS notch / Dynamic Island / home indicator) ────────── */
  --jp-sa-top:         env(safe-area-inset-top, 0px);
  --jp-sa-right:       env(safe-area-inset-right, 0px);
  --jp-sa-bottom:      env(safe-area-inset-bottom, 0px);
  --jp-sa-left:        env(safe-area-inset-left, 0px);

  /* ── Layout constants ─────────────────────────────────────────────────── */
  --jp-topbar-h:       56px;       /* Mobile top app-bar height */
  --jp-tabbar-h:       64px;       /* Bottom tab-bar height (Block 47) */
  --jp-bnav-h:         64px;       /* Legacy alias */
  --jp-page-max:       760px;      /* Mobile breakpoint */

  /* ── Z-index ladder ───────────────────────────────────────────────────── */
  --jp-z-base:         1;
  --jp-z-elev-1:       10;
  --jp-z-elev-2:       20;
  --jp-z-sticky:       100;
  --jp-z-topbar:       200;
  --jp-z-tabbar:       250;
  --jp-z-overlay:      900;
  --jp-z-sheet:        1000;
  --jp-z-drawer:       1001;
  --jp-z-modal:        1100;
  --jp-z-toast:        1500;
  --jp-z-tooltip:      1600;
  --jp-z-debug:        9999;
}

/* ============================================================================
   DARK MODE (Block 51.5 — opt-in only as of Block 51a)
   ----------------------------------------------------------------------------
   ⚠ Auto-activation via @media (prefers-color-scheme: dark) was REMOVED in
   Block 51a after testing exposed that not every component has a dark-ready
   variant (testimonial cards / filter chips / wizard chips have hardcoded
   white backgrounds that don't invert, while text tokens DO invert via the
   cascade — producing white-on-white). Until every component has been audited
   for dark-readiness, dark mode is opt-in only via:

     <html class="jp-theme-dark">   forces dark explicitly
     <html class="jp-theme-light">  forces light explicitly

   The Profile sheet (Block 50.5) sets `html.jp-theme-dark` based on the
   user's saved preference in localStorage 'jp.theme'.

   Brand identity preserved: navy stays the spine, teal stays the accent.
   Surfaces invert: white → deep-navy, off-white → near-black-navy.
   ========================================================================== */
/* Manual override (when user has explicitly chosen dark theme via Profile): */
html.jp-theme-dark {
  --jp-bg:             #050A1A;
  --jp-bg-elev:        #0E1A36;
  --jp-bg-off:         #0A1428;
  --jp-bg-tint:        rgba(255,255,255,.04);
  --jp-glass:          rgba(14,26,54,.86);
  --jp-glass-soft:     rgba(14,26,54,.66);
  --jp-glass-faint:    rgba(14,26,54,.52);
  --jp-text:           #E5EAF5;
  --jp-text-2:         #B8C2D9;
  --jp-muted:          #8794B5;
  --jp-faint:          #5C6985;
  --jp-border:         rgba(255,255,255,.10);
  --jp-border-strong:  rgba(255,255,255,.16);
  --jp-border-navy:    rgba(255,255,255,.10);
  --jp-navy-04:        rgba(255,255,255,.04);
  --jp-navy-06:        rgba(255,255,255,.06);
  --jp-navy-08:        rgba(255,255,255,.08);
  --jp-navy-10:        rgba(255,255,255,.10);
  --jp-navy-14:        rgba(255,255,255,.14);
  --jp-navy-18:        rgba(255,255,255,.18);
  --jp-navy-22:        rgba(255,255,255,.22);
  --jp-navy-32:        rgba(255,255,255,.32);
  --jp-navy-42:        rgba(0,0,0,.62);
  --jp-navy-78:        rgba(255,255,255,.06);
  --jp-grad-hero:      linear-gradient(160deg, #050A1A 0%, #0A1428 36%, #0A2D6E 78%, #06204E 100%);
  --jp-shadow-md:      0 4px 14px rgba(0,0,0,.46);
  --jp-shadow-lg:      0 12px 32px rgba(0,0,0,.52);
  --jp-shadow-topbar:  0 1px 0 rgba(0,0,0,.32), 0 4px 16px rgba(0,0,0,.24);
  --jp-shadow-sheet:   0 -8px 32px rgba(0,0,0,.48);
}

/* ============================================================================
   TIME-OF-DAY MOOD ACCENTS (Block 52.7)
   ----------------------------------------------------------------------------
   Subtle accent shifts based on hour of day. Brand palette is preserved;
   only accent intensities shift. Applied by jp-time-mood.js setting
   html[data-jp-mood="morning|day|evening|night"].
   ========================================================================== */
html[data-jp-mood="morning"] {
  --jp-teal:    #00D6CC;            /* slightly brighter teal in morning */
  --jp-blob-teal: radial-gradient(circle, rgba(0,214,204,.26), transparent 65%);
}
html[data-jp-mood="evening"] {
  --jp-blue-mid: #2055c4;            /* cooler bridge in evening */
  --jp-blob-navy: radial-gradient(circle, rgba(32,85,196,.16), transparent 65%);
}
html[data-jp-mood="night"] {
  /* Coordinates with dark mode but tints accents warmer */
  --jp-teal:    #4be0d8;
}

/* ============================================================================
   THE NOTES TO FUTURE READERS
   ----------------------------------------------------------------------------
   • If you need a new color/shadow/curve, ADD IT HERE FIRST, then consume the
     token in your component. Never inline a raw value in a component layer.
   • If a value conflicts with an existing token, prefer the existing token and
     update calling sites. Don't fork.
   • Brand gradient (--jp-grad-brand) is THE primary CTA treatment. Use it.
   • All shadows are navy-tinted — never use neutral gray (rgba(0,0,0,...)).
     Navy-tint is part of the brand signature.
   • Plus Jakarta Sans 800 (--jp-fw-black) is the body weight for the brand.
     Use 700 for de-emphasized headings only.
   • Dark mode auto-applies via prefers-color-scheme. Manual override via
     html.jp-theme-dark / .jp-theme-light. Set by Profile (Block 50.5 sheet).
   ========================================================================== */