/* ============================================================
   Neodata Design System — Core Tokens
   colors, type, spacing, radii, shadows
   ============================================================ */

/* ---- Fonts ---- */
/* Upright DM Sans from Google Fonts CDN (only italic file was provided).
   TODO: replace with locally-hosted upright variable font when available. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400..700&display=swap');

@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/DMSans-Italic-VariableFont.ttf') format('truetype-variations');
}

:root {
  /* ============================================================
     COLOR — Core palette
     Brand anchor: #702580 (violet), #000000 (ink), #332D35 (warm near-black), #F8F8F8 (paper)
     ============================================================ */

  /* Violet scale — derived from #702580 */
  --violet-50:   #F5EAF8;
  --violet-100:  #E8D1EF;
  --violet-200:  #CDA0DB;
  --violet-400:  #9C4BB5;
  --violet-700:  #702580;  /* brand primary */
  --violet-800:  #55194F;  /* dark surfaces / pressed */
  --violet-900:  #3A0F3A;  /* deepest, for overlays */

  /* Ink scale */
  --ink-900:     #000000;
  --ink-800:     #332D35;  /* brand warm near-black */
  --ink-600:     #5C555E;
  --ink-400:     #8D878F;
  --ink-200:     #C9C6CA;

  /* Paper scale */
  --paper-0:     #FFFFFF;
  --paper-50:    #F8F8F8;  /* brand paper */
  --paper-100:   #F1F0F1;
  --paper-200:   #E6E4E7;

  /* Semantic */
  --success:     #2E8B57;
  --warning:     #C28413;
  --danger:      #B33A3A;

  /* Semantic roles */
  --fg-1: var(--ink-900);      /* primary text on light */
  --fg-2: var(--ink-800);      /* body text */
  --fg-3: var(--ink-600);      /* secondary text */
  --fg-4: var(--ink-400);      /* tertiary / disabled */
  --fg-on-dark: var(--paper-50);
  --fg-on-violet: #FFFFFF;

  --bg-1: var(--paper-50);     /* primary page bg */
  --bg-2: var(--paper-0);      /* cards on page */
  --bg-3: var(--paper-100);    /* subtle surface */
  --bg-brand: var(--violet-700);
  --bg-brand-deep: var(--violet-900);
  --bg-ink: var(--ink-800);

  --border-soft: rgba(51, 45, 53, 0.08);
  --border-strong: rgba(51, 45, 53, 0.18);
  --border-on-dark: rgba(255, 255, 255, 0.12);

  --accent: var(--violet-700);

  /* ============================================================
     TYPE — family, weights, sizes
     ============================================================ */
  --font-sans: 'DM Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* Type scale (rem, base 16px) */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-64: 4rem;
  --fs-80: 5rem;

  /* Leading / tracking */
  --lh-tight: 1.05;
  --lh-snug: 1.15;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --ls-tight: -0.03em;
  --ls-snug: -0.015em;
  --ls-normal: 0;
  --ls-wide: 0.08em;
  --ls-eyebrow: 0.12em;

  /* ============================================================
     SPACING — 4pt grid
     ============================================================ */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;
  --s-32: 128px;

  /* ============================================================
     RADII
     ============================================================ */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-full: 9999px;

  /* ============================================================
     SHADOWS — warm violet-tinted, never pure black
     ============================================================ */
  --shadow-1: 0 1px 2px rgba(51, 45, 53, 0.04), 0 4px 12px rgba(112, 37, 128, 0.06);
  --shadow-2: 0 4px 8px rgba(51, 45, 53, 0.06), 0 16px 32px rgba(112, 37, 128, 0.10);
  --shadow-3: 0 8px 16px rgba(51, 45, 53, 0.08), 0 32px 64px rgba(112, 37, 128, 0.14);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container: 1280px;
  --container-wide: 1440px;
  --nav-h: 72px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   These give typography/colors directly to bare tags
   ============================================================ */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-snug);
  text-wrap: pretty;
  margin: 0;
}

h1, .h1 {
  font-size: clamp(var(--fs-40), 5vw, var(--fs-64));
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}
h2, .h2 {
  font-size: clamp(var(--fs-32), 4vw, var(--fs-48));
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}
h3, .h3 {
  font-size: var(--fs-24);
  font-weight: var(--fw-semibold);
}
h4, .h4 {
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
}
h5, .h5 {
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
}

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

.eyebrow {
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

.lead {
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-3);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  color: var(--fg-1);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--violet-900); }

hr {
  border: 0;
  border-top: 1px solid var(--border-soft);
  margin: var(--s-8) 0;
}

/* ============================================================
   UTILITY CLASSES (minimal)
   ============================================================ */
.text-center { text-align: center; }
.mono { font-family: var(--font-mono); }
.italic { font-style: italic; }

.surface-paper   { background: var(--bg-1); color: var(--fg-2); }
.surface-white   { background: var(--bg-2); color: var(--fg-2); }
.surface-ink     { background: var(--bg-ink); color: var(--fg-on-dark); }
.surface-violet  { background: var(--bg-brand); color: var(--fg-on-violet); }
.surface-violet-deep { background: var(--bg-brand-deep); color: var(--fg-on-violet); }