/* =============================================================
   Privigo Design System — Colors & Type
   Source of truth: Claude Design / colors_and_type.css (v2.8 cornerstone era)
   Loaded by every page on the marketing site.
   Legacy aliases (--n9, --acc, etc.) at the bottom of :root keep
   platform/solution pages on style.css working until full migration.

   TODO (pre-launch hardening):
     1. Self-host the four font families in /css/fonts/ as WOFF2.
        Replace the @import below with @font-face declarations.
        Reason: avoids a third-country data-flow concern that matters
        for DPDP positioning. Reference: cornerstone Appendix A.6 step 2.
     2. Run an axe-core / Lighthouse pass after migration.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=JetBrains+Mono:wght@400;500;600&family=Noto+Sans+Devanagari:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Type families ---------- */
  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-sans:    'Plus Jakarta Sans', 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-deva:    'Noto Sans Devanagari', 'Plus Jakarta Sans', sans-serif;

  /* ---------- Type scale (desktop) ---------- */
  --text-display-xl: 56px;  --lh-display-xl: 64px;
  --text-display-l:  44px;  --lh-display-l:  52px;
  --text-h1:         36px;  --lh-h1:         44px;
  --text-h2:         28px;  --lh-h2:         36px;
  --text-h3:         22px;  --lh-h3:         30px;
  --text-body-l:     18px;  --lh-body-l:     28px;
  --text-body:       16px;  --lh-body:       26px;
  --text-body-s:     14px;  --lh-body-s:     22px;
  --text-caption:    12px;  --lh-caption:    18px;
  --text-code:       14px;  --lh-code:       22px;

  /* ---------- Brand teal ---------- */
  --teal-50:  #F0F8F6;
  --teal-100: #D7ECE5;
  --teal-200: #B0D9CC;
  --teal-300: #7FBEA9;
  --teal-400: #4A9C82;
  --teal-500: #1F8064;
  --teal-600: #0F6E56;  /* anchor — links, Verified-Active badge, focus ring */
  --teal-700: #0B5443;
  --teal-800: #093E33;
  --teal-900: #062A23;  /* dark branded depth */

  /* Primary CTA (brighter teal — pops against dark hero) */
  --cta:       #2A9D8F;
  --cta-hover: #218079;

  /* ---------- Bronze (Basic tier) ---------- */
  --bronze-50:  #FBF4EE;
  --bronze-100: #F4E0CC;
  --bronze-200: #E6BE9D;
  --bronze-300: #D29766;
  --bronze-400: #B6743A;
  --bronze-500: #92400E;  /* Basic badge & button */
  --bronze-600: #7A360B;  /* hover */
  --bronze-700: #5C2808;

  /* ---------- Neutral (slate) ---------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F8FAFC;  /* light page bg */
  --neutral-100: #F1F5F9;
  --neutral-200: #E2E8F0;  /* borders */
  --neutral-300: #CBD5E1;
  --neutral-400: #94A3B8;
  --neutral-500: #64748B;
  --neutral-600: #475569;  /* body text on light */
  --neutral-700: #334155;  /* headings on light */
  --neutral-800: #1E293B;
  --neutral-900: #0F172A;

  /* ---------- Semantic ---------- */
  --success: #15803D;
  --warning: #B45309;
  --error:   #B91C1C;
  --info:    #1D4ED8;

  /* Hero pillar-tile dot accents (Cornerstone v2.8 Hero pillars) */
  --pillar-red:   #DC2626;  /* Tile 1 — Penalty exposure (dominant) */
  --pillar-amber: #D97706;  /* Tile 2 — Vendor empanelment (supporting) */
  --pillar-teal:  #0F6E56;  /* Tile 3 — Privacy-by-design (supporting) */

  /* ---------- Surfaces ---------- */
  --surface-hero:    #06090F;  /* near-black hero */
  --surface-page:    #F8FAFC;
  --surface-card:    #FFFFFF;
  --surface-accent:  #F0F8F6;  /* light-teal strip */
  --surface-inverse: #0F172A;  /* neutral dark */

  --border-default: #E2E8F0;
  --border-strong:  #CBD5E1;
  --focus-ring:     #0F6E56;

  /* ---------- Spacing scale ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- Radii ---------- */
  --radius-input: 4px;
  --radius-card:  8px;
  --radius-pill:  999px;

  /* ---------- Elevation ---------- */
  --shadow-card:   0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-raised: 0 4px 12px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --border-on-dark: 1px solid var(--teal-900);

  /* ---------- Layout ---------- */
  --max-content: 1200px;
  --header-height: 64px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration: 200ms;

  /* ---------- Legacy aliases (style.css, dpdp-guide) ---------- */
  --t9: #1a5c54;
  --t8: #1e6f65;
  --t7: #237f74;
  --t6: #2a9d8f;
  --t5: #3bb5a5;
  --t4: #5bafa6;
  --t3: #7cc9bf;
  --t2: #a8ddd6;
  --t1: #d5f0ec;
  --t0: #edf8f6;
  --g6: #558b2f;
  --g5: #7cb342;
  --g4: #8bc34a;
  --g3: #aed581;
  --n9: #06090f;
  --n8: #0a1018;
  --n7: #161b26;
  --n6: #1f2937;
  --n5: #374151;
  --n4: #4b5563;
  --n3: #6b7280;
  --n2: #9ca3af;
  --n1: #d1d5db;
  --n05: #e5e7eb;
  --n0: #f3f4f6;
  --nw: #f9fafb;
  --em: #22c55e;
  --am: #f59e0b;
  --rd: #ef4444;
  --bg: #ffffff;
  --tx: #111827;
  --tx2: #4b5563;
  --tx3: #9ca3af;
  --bdr: rgba(0, 0, 0, 0.06);
  --acc: var(--cta);
  --acc-h: var(--cta-hover);
  --sans: var(--font-sans);
  --serif: var(--font-display);
  --max: var(--max-content);
  --hdr: var(--header-height);
  --r1: 6px;
  --r2: 10px;
  --r3: 16px;
  --r4: 24px;
  --r5: 32px;
  --sh1: 0 1px 3px rgba(0, 0, 0, 0.04);
  --sh2: 0 4px 16px rgba(0, 0, 0, 0.06);
  --sh3: 0 16px 48px rgba(0, 0, 0, 0.08);
  --sh4: 0 32px 64px rgba(0, 0, 0, 0.12);
  --dur: var(--duration);
}

/* =============================================================
   Semantic type classes — drop-in for any HTML
   ============================================================= */

.t-display-xl {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display-xl);
  line-height: var(--lh-display-xl);
  letter-spacing: -0.01em;
}

.t-display-l {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display-l);
  line-height: var(--lh-display-l);
  letter-spacing: -0.01em;
}

.t-display-l em,
.t-display-xl em {
  font-style: italic;
  font-weight: 400;
}

.t-h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-h1);
  line-height: var(--lh-h1);
  letter-spacing: -0.01em;
}

.t-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.005em;
}

.t-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
}

.t-body-l {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-body-l);
  line-height: var(--lh-body-l);
}

.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.t-body-s {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-body-s);
  line-height: var(--lh-body-s);
}

.t-caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.t-code {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-code);
  line-height: var(--lh-code);
}

/* Mobile reductions (display sizes drop ~30%, headings ~15%) */
@media (max-width: 640px) {
  :root {
    --text-display-xl: 39px;  --lh-display-xl: 46px;
    --text-display-l:  31px;  --lh-display-l:  38px;
    --text-h1:         31px;  --lh-h1:         38px;
    --text-h2:         24px;  --lh-h2:         32px;
    --text-h3:         19px;  --lh-h3:         26px;
  }
}

/* =============================================================
   Baseline reset
   ============================================================= */

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--neutral-700);
  background: var(--surface-page);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}