/* Vespoke Design Language — Master system v2.0
   Source of truth: internal design.md (July 29, 2026).
   Semantic tokens only; components must never hardcode palette values. */
:root {
  /* ---- Neutrals ---- */
  --ink-1000: #08090a;
  --ink-950:  #0e0f11;
  --ink-900:  #17191d;
  --ink-800:  #252830;
  --ink-700:  #343841;
  --stone-700:#555960;
  --stone-600:#696b70;
  --stone-400:#9b9ca0;
  --stone-300:#b9b7b0;
  --stone-200:#d7d4cd;
  --stone-100:#e8e4dc;
  --ivory-050:#f5f1e8;
  --paper-000:#fcfbf8;

  /* ---- Signal ---- */
  --signal-violet:      #6d5ef7;
  --signal-violet-soft: #aaa1ff;
  --violet-surface:     #ece9ff;
  --info:    #3676c8;
  --success: #2e8b61;
  --warning: #a96e0c;
  --danger:  #b04444;
  --success-dark: #58c58b;
  --warning-dark: #e2b85b;
  --danger-dark:  #e06b6b;

  /* ---- Semantic surfaces / text ---- */
  --color-canvas:        var(--ivory-050);
  --color-surface-card:  var(--paper-000);
  --color-surface-soft:  #efeade;
  --color-surface-dark:  var(--ink-950);
  --color-surface-dark-elevated: var(--ink-900);
  --color-surface-dark-soft:     var(--ink-1000);

  --color-ink:         var(--ink-950);
  --color-body:        var(--stone-700);
  --color-body-strong: var(--ink-900);
  --color-muted:       var(--stone-600);
  --color-muted-soft:  var(--stone-400);
  --color-on-dark:      #ffffff;
  --color-on-dark-soft: var(--stone-300);
  --color-on-primary:   var(--ivory-050);

  --color-primary:        var(--ink-950);
  --color-primary-active: var(--ink-800);
  --color-accent:         var(--signal-violet);

  /* ---- Borders (1px, low contrast) ---- */
  --border-subtle:  var(--stone-100);
  --border-default: var(--stone-200);
  --border-strong:  var(--stone-600);
  --border-focus:   var(--signal-violet);
  --border-subtle-dark:  var(--ink-800);
  --border-default-dark: var(--ink-700);
  --color-hairline:      var(--stone-200);
  --color-hairline-soft: var(--stone-100);

  /* ---- Type ---- */
  --font-display: "Instrument Sans", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* ---- Shape: square by default ---- */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-round: 999px;
  --r-xs: 0; --r-sm: 2px; --r-md: 2px; --r-lg: 4px; --r-xl: 8px; --r-pill: 2px;

  /* ---- Spacing (8px base) ---- */
  --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; --space-32: 128px; --space-48: 192px;
  --s-xxs: 4px; --s-xs: 8px; --s-sm: 12px; --s-md: 16px; --s-lg: 24px;
  --s-xl: 32px; --s-xxl: 48px; --s-section: 128px;

  /* ---- Controls ---- */
  --control-compact: 28px;
  --control-small: 32px;
  --control-medium: 40px;
  --control-large: 48px;

  /* ---- Motion ---- */
  --duration-fast: 160ms;
  --duration-standard: 280ms;
  --duration-slow: 600ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-technical: cubic-bezier(0.4, 0, 0.2, 1);

  --maxw: 1440px;
}