/* ============================================================
   Scam Rescue India · Design Tokens v1.0
   Palette B · Teal + Amber
   Source of truth for color, typography, spacing, motion.
   Import once at top of every page/component CSS.
   ============================================================ */

:root {
  /* ---------- Color: Teal scale ---------- */
  --color-teal-950:    #0A2826;
  --color-teal-900:    #0F3F3C;
  --color-teal-800:    #134E4A;
  --color-teal-700:    #155E57;
  --color-primary:     var(--color-teal-800);   /* alias kept for compatibility */
  --color-primary-hover: var(--color-teal-900);
  --color-primary-tint:  #CCFBF1;
  --color-primary-ink:   #0F1F1E;

  /* ---------- Color: Amber scale ---------- */
  --color-amber-600:   #D97706;  /* large display text only */
  --color-amber-500:   #F59E0B;  /* CTA buttons */
  --color-amber-400:   #FBBF24;  /* small text on dark teal */
  --color-accent:      var(--color-amber-500);  /* alias for CTA */
  --color-accent-hover: #D97706;
  --color-accent-tint:  #FEF3C7;
  --color-accent-on:    var(--color-teal-900);  /* dark teal text on amber button */

  /* ---------- Color: Text on dark surfaces ---------- */
  --color-text-on-dark:        #FFFFFF;
  --color-text-on-dark-muted:  #CCFBF1;
  --color-text-on-dark-amber:  var(--color-amber-400);  /* eyebrow, small accents */

  /* ---------- Color: Semantic ---------- */
  --color-danger:         #B91C1C;  /* "Do NOT" callouts only */
  --color-danger-tint:    #FEE2E2;
  --color-warn:           #B45309;
  --color-warn-tint:      #FEF3C7;
  --color-success:        #047857;
  --color-success-tint:   #D1FAE5;

  /* ---------- Color: Text ---------- */
  --color-body:           #0F1F1E;
  --color-muted:          #4B5F5D;
  --color-faint:          #6B7C7A;
  --color-on-primary:     #FFFFFF;
  --color-ink-950:        #0F1F1E;
  --color-ink-800:        #1D3330;
  --color-ink-600:        #5F7470;

  /* ---------- Color: Surface ---------- */
  --color-surface-1:      #FFFFFF;  /* Page background */
  --color-surface-2:      #F1F5F4;  /* Card backgrounds, subtle elevation */
  --color-surface-3:      #FBFCFB;  /* Off-white panels */
  --color-surface-soft:   #F6FAF8;  /* Section backgrounds */
  --color-mint:           #EDF7F4;  /* Icon container backgrounds */
  --color-border:         #E2E8E6;
  --color-border-strong:  #C7D2CF;

  /* ---------- Color: Danger extended ---------- */
  --color-danger-surface: #FFF1F2;
  --color-danger-border:  #FCA5A5;
  --color-danger-deep:    #5F1616;

  /* ---------- Color: Protocol states ---------- */
  --color-protocol-done:  #4ADE80;

  /* ---------- Color: Outcome pills ---------- */
  --color-blue-50:  #EFF6FF;
  --color-blue-700: #1D4ED8;

  /* ---------- Typography ---------- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --fs-display:   clamp(40px, 5.6vw, 72px);
  --fs-h1-hero:   clamp(40px, 5.6vw, 72px);
  --fs-h1:        clamp(36px, 5vw, 64px);
  --fs-h2:        clamp(28px, 3.6vw, 44px);
  --fs-h3:        clamp(18px, 2vw, 22px);
  --fs-body:      16px;
  --fs-body-lg:   18px;
  --fs-small:     14px;
  --fs-xs:        13px;
  --fs-eyebrow:   11px;
  --fs-button:    16px;
  --fs-nav:       14px;
  --fs-footer:    13.5px;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  --lh-heading:   1.08;
  --lh-tight:     1.1;
  --lh-ui:        1.25;
  --lh-snug:      1.3;
  --lh-base:      1.55;
  --lh-relaxed:   1.6;
  --lh-body:      1.6;

  --ls-tight:     -0.02em;
  --ls-heading:   -0.03em;
  --ls-heading-max: -0.04em;
  --ls-eyebrow:   0.12em;

  /* ---------- Spacing ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---------- Radii ---------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-pill: 999px;

  /* ---------- Shadow ---------- */
  --shadow-sm:  0 1px 2px rgba(15,31,30,0.06);
  --shadow-md:  0 4px 12px rgba(15,31,30,0.08);
  --shadow-lg:  0 12px 32px rgba(15,31,30,0.10);
  --shadow-xl:  0 24px 60px rgba(15,31,30,0.14);

  /* ---------- Motion ---------- */
  --motion-fast:    120ms;
  --motion-base:    180ms;
  --motion-slow:    280ms;
  --easing-default: cubic-bezier(0.2, 0.8, 0.2, 1);
  --easing-emph:    cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Layout ---------- */
  --container-max:        1200px;
  --container-pad:        clamp(16px, 4vw, 32px);
  --tap-min:              44px;  /* WCAG mobile tap target */
  --sticky-header-offset: 128px; /* topbar 36px + header 64px + 28px breathing room */

  /* ---------- Z-index scale ---------- */
  --z-base:   1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-modal:  10000;
  --z-toast:  100000;
}

/* ============================================================
   Reduced-motion preference — respect system setting
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}

/* ============================================================
   Dark mode tokens — placeholder, not active in v1
   Activate later via [data-theme="dark"] on <html>
   ============================================================ */
[data-theme="dark"] {
  /* Defer to v2. Keep tokens scoped, do not invert in v1. */
}