/* ==========================================================================
   Design Tokens — RIDER OS v3.0
   Single source of truth — Dieter Rams / Braun inspired
   ========================================================================== */

/* Light Theme */
:root {
  /* v3.0 tokens */
  --bg: #f4f1eb;
  --surface: #ebe8e1;
  --surface-elevated: #f8f6f1;
  --surface-muted: #dedbd4;

  --text: #111111;
  --text-secondary: #4f4d49;
  --text-muted: #77736c;
  --text-disabled: #aaa7a1;

  --border: #c9c5bd;
  --border-strong: #aaa69e;

  --accent: #f58220;
  --accent-hover: #df6d0b;
  --accent-soft: #f9d8bd;

  --success: #658d43;
  --warning: #d18a22;
  --danger: #bd4c38;
  --info: #697d86;

  --radius-xs: 4px;
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* Legacy aliases for existing css (back-compat) */
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-surface-2: var(--surface-muted);
  --color-border: var(--border);
  --color-text: var(--text);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-muted);
  --color-black: #111111;
  --color-white: #ffffff;
  --color-orange: var(--accent);
  --color-orange-dark: var(--accent-hover);
  --color-orange-light: #ff9a3d;
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-danger: var(--danger);
  --color-blue-grey: var(--info);
  --color-sage: #a6aa9a;
  --color-off-white: var(--bg);
  --color-light-grey: #dedad2;
  --color-mid-grey: #aaa7a1;
  --color-dark-grey: #3d3d3b;
  --color-beige: #ded2be;
  --color-blue-grey-alt: #858d90;
  --color-sage-grey: #a7aa9b;
  --color-warm-grey: #aaa59d;

  /* Typography scale aliases */
  --font-xs: 11px;
  --font-sm: 13px;
  --font-md: 15px;
  --font-base: 16px;
  --font-lg: 18px;
  --font-xl: 22px;
  --font-2xl: 28px;
  --font-3xl: 36px;
  --font-display: 40px;

  /* Shadows */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.06);

  /* Motion */
  --transition-fast: 0.1s ease;
  --transition-base: 0.15s ease;
  --transition-slow: 0.25s ease;

  /* Layers */
  --z-base: 1;
  --z-header: 100;
  --z-nav: 200;
  --z-modal-backdrop: 300;
  --z-modal: 310;
  --z-toast: 400;
}

/* Dark Theme */
[data-theme="dark"] {
  --bg: #202020;
  --surface: #292929;
  --surface-elevated: #303030;
  --surface-muted: #383838;

  --text: #f4f4f4;
  --text-secondary: #c3c3c3;
  --text-muted: #8d8d8d;
  --text-disabled: #606060;

  --border: #464646;
  --border-strong: #5a5a5a;

  --accent: #f58220;
  --accent-hover: #ff9a3d;
  --accent-soft: #57351d;

  /* legacy dark aliases */
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-surface-2: var(--surface-muted);
  --color-border: var(--border);
  --color-text: var(--text);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  :root { --transition-fast: 0s; --transition-base: 0s; --transition-slow: 0s; }
}