/* =========================================================================
   JungleSecure Design System — colors_and_type.css
   Light-first marketing. Smalt blue is the ONLY brand color.
   ========================================================================= */

/* Fonts — loaded from Google Fonts. Swap to self-hosted if offline.
   Substitution note: no brand font files were provided. Inter Display +
   JetBrains Mono are stand-ins and should be confirmed by the brand owner. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ------------------------------------------------------------------ Brand */
  --smalt-primary:       #1E4FD0;
  --smalt-hover:         #2A5DE0;
  --smalt-active:        #1842B0;
  --smalt-dark-subtle:   #112255;
  --smalt-dark-text:     #6B9BFF;

  /* ---------------------------------------------------------- Neutrals (light) */
  /* Warm off-whites for page, smalt-washed cools for alt surfaces so alternating
     sections register visibly against the warm bg-0 (cool-vs-warm, not just lighter). */
  --bg-0:   #FAFAF8;  /* page — warm off-white */
  --bg-1:   #FFFFFF;  /* cards, nav chrome */
  --bg-2:   #EEF1FA;  /* alternating section — smalt-washed */
  --bg-3:   #E4E9F5;  /* inset panels, code blocks bg */

  --fg-1:   #0C0F14;  /* primary text */
  --fg-2:   #4A5362;  /* secondary text */
  --fg-3:   #7A8494;  /* tertiary / meta */
  --fg-4:   #AFB7C3;  /* disabled, placeholder */

  --border:         #E6E6E1;
  --border-subtle:  #EFEFEA;
  --border-strong:  #D4D4CE;

  /* ---------------------------------------------------------- Midnight Smalt (dark) */
  /* Dark surfaces sit in the smalt family, not cool-neutral black.
     Keeps demo cards, dark sections, and brand tone visually coherent. */
  --dark-bg-0:   #070C25;   /* Deep Midnight Smalt — dark section / canvas */
  --dark-bg-1:   #0E163A;   /* raised card on dark */
  --dark-bg-2:   #162149;   /* inner panel on dark */
  --dark-fg-1:   #EDEDF0;
  --dark-fg-2:   #A1A1B5;
  --dark-fg-3:   #7B819A;
  --dark-border:         #2A3658;
  --dark-border-strong:  #3A4670;

  /* ------------------------------------------------------------------ Shadows */
  --shadow-sm:    0 1px 2px rgba(12,15,20,0.04);
  --shadow-md:    0 4px 16px rgba(12,15,20,0.06), 0 1px 2px rgba(12,15,20,0.04);
  --shadow-lg:    0 16px 48px rgba(12,15,20,0.08), 0 2px 4px rgba(12,15,20,0.04);
  --shadow-focus: 0 0 0 3px rgba(30,79,208,0.18);

  /* ------------------------------------------------------------------- Radius */
  --r-sm: 4px;
  --r-md: 8px;   /* default for cards, buttons, inputs */
  --r-lg: 12px;  /* large surfaces / hero panels */

  /* ------------------------------------------------------------------ Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 160px;

  /* ------------------------------------------------------------------- Motion */
  --ease-snap: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-micro:  120ms;
  --dur-ui:     200ms;
  --dur-reveal: 360ms;

  /* ------------------------------------------------------------- Type families */
  --font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --------------------------------------------------------------- Type scale */
  /* Display — tight leading, negative tracking. */
  --fs-display-xl: 128px;  --lh-display-xl: 0.95; --tr-display-xl: -0.03em;
  --fs-display-l:  96px;   --lh-display-l:  0.98; --tr-display-l:  -0.025em;
  --fs-display-m:  72px;   --lh-display-m:  1.00; --tr-display-m:  -0.02em;
  --fs-display-s:  56px;   --lh-display-s:  1.02; --tr-display-s:  -0.02em;

  /* Headings — still tight but readable. */
  --fs-h1: 48px;  --lh-h1: 1.10; --tr-h1: -0.02em;
  --fs-h2: 36px;  --lh-h2: 1.15; --tr-h2: -0.015em;
  --fs-h3: 24px;  --lh-h3: 1.25; --tr-h3: -0.01em;
  --fs-h4: 20px;  --lh-h4: 1.30; --tr-h4: -0.005em;

  /* Body — airy. */
  --fs-body-lg: 18px; --lh-body-lg: 1.60;
  --fs-body:    16px; --lh-body:    1.55;
  --fs-body-sm: 14px; --lh-body-sm: 1.55;
  --fs-meta:    13px; --lh-meta:    1.50;

  /* Mono — technical micro-typography. */
  --fs-mono:    14px; --lh-mono:    1.60;
  --fs-mono-lg: 18px; --lh-mono-lg: 1.50;

  /* Eyebrow — tiny ALL CAPS label. */
  --fs-eyebrow: 12px; --lh-eyebrow: 1.40; --tr-eyebrow: 0.08em;
}

/* =========================================================================
   Semantic base styles — keep these minimal. Drop-in via <link>.
   ========================================================================= */

html { color-scheme: light; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin: 0;
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); font-weight: 600; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); font-weight: 600; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); font-weight: 600; }

p { margin: 0; color: var(--fg-2); text-wrap: pretty; }

code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-feature-settings: "calt" 0;
}

code {
  background: var(--bg-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  padding: 1px 6px;
  font-size: 0.92em;
}

a {
  color: var(--smalt-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-micro) var(--ease-snap),
              color var(--dur-micro) var(--ease-snap);
}
a:hover { border-bottom-color: var(--smalt-primary); }
a:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: 2px; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-7) 0; }

::selection { background: rgba(30,79,208,0.18); color: var(--fg-1); }

/* Utility classes used by preview cards and UI kit --------------------------- */
.js-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
}
.js-mono { font-family: var(--font-mono); }
.js-display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--tr-display-xl); font-weight: 700; }
.js-display-l  { font-family: var(--font-display); font-size: var(--fs-display-l);  line-height: var(--lh-display-l);  letter-spacing: var(--tr-display-l);  font-weight: 700; }
.js-display-m  { font-family: var(--font-display); font-size: var(--fs-display-m);  line-height: var(--lh-display-m);  letter-spacing: var(--tr-display-m);  font-weight: 700; }
.js-display-s  { font-family: var(--font-display); font-size: var(--fs-display-s);  line-height: var(--lh-display-s);  letter-spacing: var(--tr-display-s);  font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}