/* ============================================================
   CogniHuman Design System — Tokens
   Color palette: Deep forest ink + warm paper + terracotta accent
   Tone: calm, purposeful, scholarly. Not a startup. A foundation.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=DM+Mono:wght@300;400&display=swap');

:root {
  /* --- Palette --- */
  /* Primary: Deep forest ink — conveys depth, knowledge, trust */
  --ch-ink-900: #0f1a14;
  --ch-ink-800: #1a2d20;
  --ch-ink-700: #243d2c;
  --ch-ink-600: #2f5039;
  --ch-ink-500: #3d6b4a;
  --ch-ink-400: #5a8f67;
  --ch-ink-300: #82b38e;
  --ch-ink-200: #b8d4be;
  --ch-ink-100: #e4f0e6;
  --ch-ink-50:  #f2f8f3;

  /* Warm paper — not cold white */
  --ch-paper-100: #fdfaf5;
  --ch-paper-200: #f7f2e8;
  --ch-paper-300: #ede5d4;
  --ch-paper-400: #ddd3be;

  /* Accent: Terracotta — warmth, humanity, India */
  --ch-terra-600: #b5451b;
  --ch-terra-500: #c95a2e;
  --ch-terra-400: #de7a52;
  --ch-terra-200: #f2c4b0;
  --ch-terra-100: #faeee8;

  /* Semantic */
  --bg-primary:   var(--ch-paper-100);
  --bg-secondary: var(--ch-paper-200);
  --bg-surface:   #ffffff;
  --bg-dark:      var(--ch-ink-900);

  --text-primary:   var(--ch-ink-900);
  --text-secondary: var(--ch-ink-600);
  --text-muted:     var(--ch-ink-400);
  --text-inverse:   var(--ch-paper-100);

  --accent-primary: var(--ch-ink-600);
  --accent-warm:    var(--ch-terra-500);
  --accent-light:   var(--ch-ink-100);

  --border-subtle:  rgba(15,26,20,0.08);
  --border-mid:     rgba(15,26,20,0.15);
  --border-strong:  rgba(15,26,20,0.3);

  /* --- Typography --- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* --- Spacing scale --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* --- Radii --- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 20px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 3px rgba(15,26,20,0.06), 0 1px 2px rgba(15,26,20,0.04);
  --shadow-md: 0 4px 16px rgba(15,26,20,0.08), 0 2px 4px rgba(15,26,20,0.04);
  --shadow-lg: 0 12px 40px rgba(15,26,20,0.12), 0 4px 8px rgba(15,26,20,0.06);

  /* --- Transitions --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast: 150ms;
  --dur-mid: 300ms;
  --dur-slow: 600ms;

  /* --- Layout --- */
  --max-w: 1120px;
  --max-w-text: 680px;
  --nav-h: 64px;
}