/* ═══════════════════════════════════════════════════════════════════════
   Azora — Design Tokens (v2, 2026-05-06)
   Source of truth: MarketingSite/assets/brand/STYLE.md
   Marketing only. Product UI uses Catppuccin Mocha (separate).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── 1. Brand color ─── */
  --brand-50:  #E8F5EB;
  --brand-100: #C6E5CD;
  --brand-200: #9DD3A8;
  --brand-300: #6BB87C;
  --brand-400: #3CA452;
  --brand-500: #21942C;   /* wordmark "SOLUTIONS" tone */
  --brand-600: #1D7B2B;   /* PRIMARY */
  --brand-700: #176524;
  --brand-800: #0F4E1B;
  --brand-900: #0A3713;
  --color-text-on-brand: #FFFFFF;

  /* ─── 2. Neutrals ─── */
  --ink-900: #0F1419;
  --ink-700: #3A4150;
  --ink-500: #6B7280;
  --ink-300: #A8B0BC;
  --ink-200: #D7DCE3;
  --ink-100: #EAEDF1;
  --ink-50:  #F6F8FA;
  --surface-base:    #FFFFFF;
  --surface-raised:  #F6F8FA;
  --surface-overlay: #FFFFFF;

  /* ─── 3. Feedback ─── */
  --feedback-success: #16A34A;
  --feedback-warning: #D97706;
  --feedback-danger:  #DC2626;
  --feedback-info:    #0284C7;

  /* ─── 4. Data viz (charts only) ─── */
  --viz-1: #1D7B2B; /* brand */
  --viz-2: #0284C7; /* info-blue */
  --viz-3: #D97706; /* warm */
  --viz-4: #7C3AED; /* mauve */
  --viz-5: #DB2777; /* pink */
  --viz-6: #0F766E; /* teal */

  /* ─── 5. Spacing (4px base, semantic) ─── */
  --space-inline-xs: 4px;
  --space-inline-sm: 8px;
  --space-inline-md: 12px;
  --space-stack-sm:  16px;
  --space-stack-md:  24px;
  --space-stack-lg:  48px;
  --space-section-y: 96px;
  --space-page-x:    clamp(16px, 4vw, 32px);
  --content-max:     1200px;

  /* ─── 6. Corner radius (TIGHT register) ─── */
  --radius-sharp: 0;
  --radius-tight: 4px;
  --radius-card:  6px;
  --radius-pill:  9999px;

  /* ─── 7. Line weights ─── */
  --line-hairline:   1px;
  --line-decorative: 1.5px;
  --line-icon:       2px;
  --line-diagram:    3px;

  /* ─── 8. Shadows (minimal — three values only) ─── */
  --shadow-none:  none;
  --shadow-card:  0 1px 2px rgba(15, 20, 25, 0.04), 0 4px 8px rgba(15, 20, 25, 0.04);
  --shadow-modal: 0 8px 16px rgba(15, 20, 25, 0.08), 0 24px 48px rgba(15, 20, 25, 0.12);

  /* ─── 9. Typography ─── */
  --font-display: "Mona Sans", "Mona Sans Fallback", system-ui, sans-serif;
  --font-body:    "Inter", "Inter Fallback", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", Consolas, "Fira Code", monospace;

  --type-display-size: 72px;     --type-display-lh: 1.05;  --type-display-track: -0.02em;
  --type-h1-size:      48px;     --type-h1-lh:      1.10;  --type-h1-track:      -0.015em;
  --type-h2-size:      32px;     --type-h2-lh:      1.20;  --type-h2-track:      -0.01em;
  --type-h3-size:      24px;     --type-h3-lh:      1.30;  --type-h3-track:      0;
  --type-body-lg-size: 19px;     --type-body-lg-lh: 1.55;
  --type-body-size:    16px;     --type-body-lh:    1.55;
  --type-caption-size: 14px;     --type-caption-lh: 1.50;
  --type-eyebrow-size: 13px;     --type-eyebrow-lh: 1.40;  --type-eyebrow-track: 0.05em;

  /* ─── 10. Motion ─── */
  --ease-standard:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate:  cubic-bezier(0,   0, 0.2, 1);
  --ease-accelerate:  cubic-bezier(0.4, 0, 1,   1);
  --ease-emphasized:  cubic-bezier(0.2, 0, 0,   1);

  --motion-duration-instant:    100ms;
  --motion-duration-quick:      200ms;
  --motion-duration-moderate:   300ms;
  --motion-duration-expressive: 500ms;
  --motion-duration-cinematic:  800ms;

  /* ─── 11. Texture ─── */
  --texture-dot-grid: radial-gradient(circle, var(--ink-200) 1px, transparent 1px) 0 0 / 32px 32px;
  --texture-noise:    url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' /></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.04'/></svg>");

  /* ─── 12. Focus ─── */
  --focus-ring: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--brand-600);
}

/* ─── Reduced motion: collapse durations to 0 in ONE place ─── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-instant:    0ms;
    --motion-duration-quick:      0ms;
    --motion-duration-moderate:   0ms;
    --motion-duration-expressive: 0ms;
    --motion-duration-cinematic:  0ms;
  }
  *, *::before, *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══ Type utility classes ═══ */
.type-display {
  font: 700 var(--type-display-size)/var(--type-display-lh) var(--font-display);
  letter-spacing: var(--type-display-track);
}
.type-h1 {
  font: 700 var(--type-h1-size)/var(--type-h1-lh) var(--font-display);
  letter-spacing: var(--type-h1-track);
}
.type-h2 {
  font: 600 var(--type-h2-size)/var(--type-h2-lh) var(--font-display);
  letter-spacing: var(--type-h2-track);
}
.type-h3 {
  font: 600 var(--type-h3-size)/var(--type-h3-lh) var(--font-body);
}
.type-body-lg {
  font: 400 var(--type-body-lg-size)/var(--type-body-lg-lh) var(--font-body);
}
.type-body {
  font: 400 var(--type-body-size)/var(--type-body-lh) var(--font-body);
}
.type-caption {
  font: 400 var(--type-caption-size)/var(--type-caption-lh) var(--font-body);
}
.type-eyebrow {
  font: 600 var(--type-eyebrow-size)/var(--type-eyebrow-lh) var(--font-display);
  letter-spacing: var(--type-eyebrow-track);
  text-transform: uppercase;
}

/* Responsive type clamps for hero/H1 */
@media (max-width: 768px) {
  .type-display { font-size: clamp(40px, 9vw, 64px); }
  .type-h1      { font-size: clamp(32px, 7vw, 44px); }
  .type-h2      { font-size: clamp(24px, 5vw, 30px); }
}