/* variables.css — the single source of truth for every design token.
   Locked values (color, type, radius) come from the brand kit.
   Everything else is derived, as established in Phase 3. */

:root {
  /* Brand core — locked */
  --ink: #0B0B0F;
  --paper: #FAFAFA;
  --indigo: #4F3FD0;
  --signal-blue: #2E6BFF;
  --emerald: #0FAE79;

  /* Derived surfaces */
  --surface-0: #0B0B0F;
  --surface-1: #131318;
  --surface-2: #1B1B22;
  --border-subtle: rgba(250, 250, 250, 0.08);
  --border-default: rgba(250, 250, 250, 0.14);

  /* Text hierarchy */
  --text-primary: #FAFAFA;
  --text-secondary: rgba(250, 250, 250, 0.64);
  --text-tertiary: rgba(250, 250, 250, 0.40);

  /* Semantic — added Phase 6. Not a brand color, not decorative:
     used only for destructive actions and error states (forms, login).
     Muted/desaturated on purpose to stay consistent with "never loud". */
  --danger: #F0575C;
  --danger-bg: rgba(240, 87, 92, 0.12);
  --danger-border: rgba(240, 87, 92, 0.32);

  /* Spacing — 8px grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* Radius — locked */
  --radius-button: 14px;
  --radius-input: 14px;
  --radius-card: 20px;
  --radius-dialog: 24px;

  /* Shadow */
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.32);

  /* Motion — locked: 150-250ms, fade/scale/slide only */
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --motion-slow: 250ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Type — locked */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
}