/* Zaude Deck — design tokens.
 *
 * This file is the single source of truth for the product's visual language. Every screen consumes
 * these variables, and the Design System screen renders itself by reading them back through
 * /api/design/tokens, so a value changed here changes both the UI and its documentation at once.
 *
 * Values are taken from the operator's approved design-system mockup. Where the mockup's swatch
 * label was ambiguous at render resolution, the Tailwind indigo ramp it clearly belongs to was used
 * (primary #6366F1 = indigo-500, hover #818CF8 = indigo-400, active #4F46E5 = indigo-600).
 */

:root {
  /* -- neutral ramp: the ten steps shown in the Colors panel, dark to light ------------------ */
  --color-neutral-950: #070A11;
  --color-neutral-900: #0C1018;
  --color-neutral-700: #161C28;
  --color-neutral-600: #1E2635;
  --color-neutral-500: #2A3444;
  --color-neutral-400: #4A5568;
  --color-neutral-300: #8B97AC;
  --color-neutral-200: #B4BECD;
  --color-neutral-100: #D8DEE9;
  --color-neutral-50:  #F3F6FB;

  /* -- brand ---------------------------------------------------------------------------------- */
  --color-primary:        #6366F1;
  --color-primary-hover:  #818CF8;
  --color-primary-active: #4F46E5;
  --color-primary-light:  #EEF2FF;

  /* -- semantic ------------------------------------------------------------------------------- */
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-danger:  #EF4444;
  --color-info:    #3B82F6;
  --color-purple:  #A855F7;
  --color-cyan:    #06B6D4;

  /* -- applied surfaces (derived from the ramp; what the screens actually paint with) --------- */
  --color-bg:            #070A11;
  --color-bg-raised:     #0C1018;
  --color-surface:       #0F1421;
  --color-surface-hover: #141B2B;
  --color-border:        #1B2333;
  --color-border-strong: #27334A;
  --color-text:          #E7ECF5;
  --color-text-muted:    #8B97AC;
  --color-text-faint:    #5C6880;

  /* -- typography ----------------------------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --type-h1-size: 32px;  --type-h1-line: 40px;  --type-h1-weight: 700;
  --type-h2-size: 24px;  --type-h2-line: 32px;  --type-h2-weight: 600;
  --type-h3-size: 20px;  --type-h3-line: 28px;  --type-h3-weight: 600;
  --type-h4-size: 18px;  --type-h4-line: 24px;  --type-h4-weight: 500;
  --type-body-large-size: 16px; --type-body-large-line: 24px; --type-body-large-weight: 400;
  --type-body-size: 14px;       --type-body-line: 20px;       --type-body-weight: 400;
  --type-small-size: 12px;      --type-small-line: 16px;      --type-small-weight: 400;
  --type-code-size: 14px;       --type-code-line: 20px;       --type-code-weight: 400;

  /* -- spacing: 8px base unit ------------------------------------------------------------------ */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* -- radius ---------------------------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 999px;

  /* -- elevation -------------------------------------------------------------------------------- */
  --elevation-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --elevation-md: 0 4px 6px -1px rgba(0, 0, 0, 0.10);
  --elevation-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10);
  --elevation-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.20);

  /* -- motion ----------------------------------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
}