@import "tailwindcss";

/* ============================================================
   Design System — tokens (sanitized: no client-specific brand vars)
   ============================================================ */

:root {
  /* ink scale (tinted neutrals — never raw #000/#fff) */
  --paper: #ffffff;
  --ink-50: #f7f8fa;
  --ink-100: #eef0f3;
  --ink-200: #e1e4ea;
  --ink-300: #c7ccd4;
  --ink-400: #97a0ad;
  --ink-500: #6b7480;
  --ink-600: #4a525e;
  --ink-700: #2e343d;
  --ink-800: #181b21;
  --ink-900: #0a0b0d;

  /* brand surfaces (partners retained, client-specific removed) */
  --brand-flat: #0a0b0d;
  --brand-indra: #002c40;
  --brand-minsait: #002532;

  /* accent (single saturated colour) */
  --accent-50: #fffae6;
  --accent-100: #fef3cb;
  --accent-200: #fde791;
  --accent-400: #fbd64a;
  --accent-500: #facc0d;
  --accent-600: #c7a007;
  --accent-700: #8a6f04;
  --accent-900: #4a3d02;

  /* secondary chart series */
  --series-2: #1b5566;
  --series-2-bg: #e4ecef;

  /* semantic (data viz only) */
  --success-100: #e2f1e9;
  --success-500: #1f7a4d;
  --success-700: #15623e;
  --warning-100: #fbefd8;
  --warning-500: #b45309;
  --warning-700: #8a4a06;
  --error-100: #fbe5e2;
  --error-500: #b42318;
  --error-700: #8e1b14;
  --info-100: #e4ebfd;
  --info-500: #1652f0;
  --info-700: #0a4bc4;

  /* type scale */
  --fs-eyebrow: clamp(11px, 0.85vw, 14px);
  --ls-eyebrow: 0.14em;
  --fs-caption: clamp(12px, 0.95vw, 15px);
  --fs-body: clamp(15px, 1.15vw, 18px);
  --fs-body-lg: clamp(17px, 1.3vw, 20px);
  --fs-h3: clamp(20px, 1.7vw, 26px);
  --fs-h2: clamp(28px, 2.4vw, 38px);
  --fs-h1: clamp(36px, 3.6vw, 56px);
  --fs-display: clamp(48px, 6vw, 96px);
  --fs-data-sm: clamp(24px, 2.4vw, 36px);
  --fs-data-md: clamp(40px, 4.8vw, 72px);
  --fs-data-lg: clamp(64px, 8vw, 128px);
  --fs-data-xl: clamp(96px, 12vw, 184px);

  /* 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;

  /* radii */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --radius: 6px;

  /* shadows */
  --shadow-flat: 0 1px 0 rgba(10, 11, 13, 0.04);
  --shadow-rest: 0 1px 2px rgba(10, 11, 13, 0.06), 0 0 0 1px rgba(10, 11, 13, 0.04);
  --shadow-hover: 0 4px 12px rgba(10, 11, 13, 0.08), 0 0 0 1px rgba(10, 11, 13, 0.06);

  /* motion */
  --dur-micro: 150ms;
  --dur-short: 300ms;
  --dur-med: 500ms;
  --dur-long: 800ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* grain (optional textural overlay) */
  --grain-light: radial-gradient(rgba(10, 11, 13, 0.05) 1px, transparent 1px),
    radial-gradient(rgba(10, 11, 13, 0.04) 1px, transparent 1px);
  --grain-dark: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  --grain-size: 6px 6px, 11px 11px;
  --grain-pos: 0 0, 3px 4px;

  /* font family aliases (next/font injects --font-nunito and --font-dm-serif) */
  --font-sans: var(--font-nunito), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: var(--font-nunito), ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-dm-serif), "Times New Roman", Georgia, serif;
  --font-data: var(--font-dm-serif), Georgia, serif;
}

/* ============================================================
   Tailwind v4 theme tokens (exposes CSS vars as Tailwind classes)
   ============================================================ */
@theme inline {
  --color-paper: var(--paper);
  --color-ink-50: var(--ink-50);
  --color-ink-100: var(--ink-100);
  --color-ink-200: var(--ink-200);
  --color-ink-300: var(--ink-300);
  --color-ink-400: var(--ink-400);
  --color-ink-500: var(--ink-500);
  --color-ink-600: var(--ink-600);
  --color-ink-700: var(--ink-700);
  --color-ink-800: var(--ink-800);
  --color-ink-900: var(--ink-900);
  --color-accent-50: var(--accent-50);
  --color-accent-100: var(--accent-100);
  --color-accent-200: var(--accent-200);
  --color-accent-400: var(--accent-400);
  --color-accent-500: var(--accent-500);
  --color-accent-600: var(--accent-600);
  --color-accent-700: var(--accent-700);
  --color-accent-900: var(--accent-900);
  --color-brand-flat: var(--brand-flat);
  --color-brand-indra: var(--brand-indra);
  --color-series-2: var(--series-2);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-display: var(--font-display);

  --radius-sm: var(--radius-sm);
  --radius-md: var(--radius-md);
  --radius-lg: var(--radius-lg);
}

/* ============================================================
   Base
   ============================================================ */
html,
body {
  font-family: var(--font-sans);
  color: var(--ink-800);
  background: var(--paper);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Semantic type classes
   ============================================================ */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  line-height: 1.3;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-500);
}

.eyebrow-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 500;
}
.eyebrow-mark::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--ink-400);
}

.h1,
h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--ink-900);
  margin: 0;
}
.h2,
h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -0.005em;
  font-weight: 400;
  color: var(--ink-900);
  margin: 0;
}
.h3,
h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: -0.005em;
  font-weight: 700;
  color: var(--ink-800);
  margin: 0;
}
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: -0.015em;
  font-weight: 400;
  color: var(--ink-900);
}
.body,
p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-weight: 400;
  color: var(--ink-700);
  margin: 0;
}
.body-lg {
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--ink-700);
}
.caption {
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--ink-500);
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.data {
  font-family: var(--font-data);
  font-feature-settings: "lnum";
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  font-weight: 400;
}
.data-sm {
  font-size: var(--fs-data-sm);
  line-height: 1.05;
}
.data-md {
  font-size: var(--fs-data-md);
  line-height: 1;
}
.data-lg {
  font-size: var(--fs-data-lg);
  line-height: 0.95;
  letter-spacing: -0.035em;
}
.data-xl {
  font-size: var(--fs-data-xl);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.kpi-figure {
  font-family: var(--font-data);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.92;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ============================================================
   Slide variants
   ============================================================ */
.slide-feature {
  background-color: var(--ink-900);
  color: #fff;
}
.slide-feature .display,
.slide-feature .h1,
.slide-feature h1,
.slide-feature .h2,
.slide-feature h2,
.slide-feature .h3 {
  color: var(--accent-500);
}
.slide-feature .display {
  font-style: italic;
}
.slide-feature p,
.slide-feature .body {
  color: rgba(255, 255, 255, 0.92);
}
.slide-feature .caption,
.slide-feature .eyebrow {
  color: rgba(255, 255, 255, 0.6);
}
.slide-feature .eyebrow-mark {
  color: rgba(255, 255, 255, 0.7);
}
.slide-feature .eyebrow-mark::before {
  background: rgba(255, 255, 255, 0.45);
}
.slide-feature .kpi-figure {
  color: var(--accent-500);
}

.slide-paper {
  background-color: var(--paper);
  color: var(--ink-800);
}
.slide-tone {
  background-color: var(--ink-50);
}

/* Highlight: full background-fill with inverted text on accent */
.hl {
  background: var(--accent-500);
  color: var(--ink-900);
  padding: 2px 14px;
  border-radius: var(--radius-xs);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Rule-card with side-stripe (kept as deliberate variant; see ANTIPATTERNS.md) */
.rule-card-y {
  border-left: 4px solid var(--accent-500);
  padding-left: 32px;
}

/* Pill CTA (outlined) */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--accent-500);
  background: transparent;
  color: var(--accent-500);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out);
}
.btn-pill:hover {
  background: var(--accent-500);
  color: var(--ink-900);
}
.btn-pill.solid {
  background: var(--accent-500);
  color: var(--ink-900);
}
.btn-pill.solid:hover {
  background: var(--accent-400);
}

.btn-dot {
  width: 44px;
  height: 44px;
  background: var(--accent-500);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-900);
  cursor: pointer;
}

/* Grain utility (optional) */
.grain-light {
  background-image: var(--grain-light);
  background-size: var(--grain-size);
  background-position: var(--grain-pos);
}
.grain-dark {
  background-image: var(--grain-dark);
  background-size: var(--grain-size);
  background-position: var(--grain-pos);
}

/* SVG stroke draw helper */
.draw {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  animation: draw 1500ms var(--ease-out) forwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Focus */
*:focus-visible {
  outline: 2px solid var(--accent-600);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}