/* shaktii.ai redesign - shared design tokens (from 00-shared-foundation.md).
   Every prototype imports THIS file - one source of truth across directions. */
:root {
  /* Surfaces */
  --surface-0: #101014;
  --surface-1: #16161C;
  --surface-2: #1E1E26;
  --surface-3: #26262F;
  /* Ink */
  --ink-1: #F4F4F6;
  --ink-2: #A8AAB4;
  --ink-3: #6E7076;
  /* Brand */
  --saffron-500: #E88E1C;
  --saffron-400: #F2A234;
  --saffron-600: #CC7E14;
  --on-saffron: #14141A;
  /* Teal: 600 = borders/fills ONLY, 300 = text-safe */
  --teal-600: #12796A;
  --teal-300: #3FBFA8;
  /* Feedback */
  --danger: #FF6B6B;
  --success: var(--teal-300);
  --warning: var(--saffron-400);
  /* Lines */
  --border-subtle: #2A2A33;
  --border-input: #3A3A46;
  /* Type scale (1.25 modular) */
  --fs-12: 0.75rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-20: 1.25rem;
  --fs-25: 1.5625rem; --fs-31: 1.9375rem; --fs-39: 2.4375rem; --fs-49: 3.0625rem;
  --fs-61: 3.8125rem; --fs-76: 4.75rem;
  /* Spacing (8pt) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px;
  --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px; --sp-32: 128px;
  /* Radii */
  --r-input: 6px; --r-card: 10px; --r-panel: 16px; --r-pill: 999px;
  /* Motion */
  --t-micro: 120ms; --t-std: 240ms; --t-scene: 480ms;
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; background: var(--surface-0); }
body {
  background: var(--surface-0);
  color: var(--ink-1);
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-16);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display { font-family: 'Space Grotesk', 'Inter', sans-serif; line-height: 1.1; letter-spacing: -0.02em; }

a { color: var(--saffron-400); text-decoration: underline; text-underline-offset: 3px; }
a.nav-link, a.btn { text-decoration: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: 0 var(--sp-6); border-radius: var(--r-input);
  font-weight: 600; font-size: var(--fs-16); cursor: pointer; border: none;
  transition: background-color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease); }
.btn-primary { background: var(--saffron-500); color: var(--on-saffron); }
.btn-primary:hover { background: var(--saffron-400); }
.btn-primary:active { background: var(--saffron-600); transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--ink-1); border: 1px solid var(--border-input); }
.btn-ghost:hover { border-color: var(--ink-3); background: var(--surface-2); }

/* Focus - on EVERYTHING (the audit blocker, fixed by design) */
:focus-visible { outline: 2px solid var(--saffron-500); outline-offset: 2px; border-radius: 4px; }

/* Inputs - visible boundaries (audit fix) */
input, textarea, select { background: var(--surface-1); border: 1px solid var(--border-input);
  border-radius: var(--r-input); color: var(--ink-1); font: inherit; padding: 12px 16px; min-height: 48px; width: 100%; }
input::placeholder { color: var(--ink-3); }

/* Cards */
.card { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-card); padding: var(--sp-6); }
.panel { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--r-panel); }

/* Layout helpers */
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-6); }
.section { padding: var(--sp-24) 0; }
.eyebrow { font-size: var(--fs-14); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--saffron-400); }

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