/* ===== CRATOORA DESIGN TOKENS v7.1 ===== */
/* tokens.css — Single source of truth     */

:root {
  /* Brand Colors — Dallas-Fort Worth DNA */
  --color-deep-ellum: 139, 92, 246;
  --color-oak-cliff: 217, 119, 6;
  --color-fort-worth: 5, 150, 105;
  --color-uptown: 59, 130, 246;
  --color-downtown: 107, 114, 128;

  /* Semantic Palette */
  --color-primary: rgb(var(--color-deep-ellum));
  --color-primary-dim: rgba(var(--color-deep-ellum), 0.8);
  --color-primary-glow: rgba(var(--color-deep-ellum), 0.2);
  --color-secondary: rgb(var(--color-oak-cliff));
  --color-accent: rgb(var(--color-fort-worth));

  /* Surface */
  --color-surface-0: #000000;
  --color-surface-1: #0a0a0a;
  --color-surface-2: #121212;
  --color-surface-3: #1a1a1a;
  --color-surface-4: #242424;
  --color-surface-5: #2e2e2e;

  /* Text */
  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.7);
  --color-text-tertiary: rgba(255, 255, 255, 0.5);
  --color-text-disabled: rgba(255, 255, 255, 0.3);
  --color-text-inverse: #0a0a0a;

  /* Status */
  --color-success: #10b981;
  --color-success-dim: rgba(16, 185, 129, 0.1);
  --color-warning: #f59e0b;
  --color-warning-dim: rgba(245, 158, 11, 0.1);
  --color-error: #ef4444;
  --color-error-dim: rgba(239, 68, 68, 0.1);
  --color-info: #3b82f6;
  --color-info-dim: rgba(59, 130, 246, 0.1);

  /* Typography — Fluid scale */
  --text-xs:   clamp(0.75rem,  0.8vw,  0.875rem);
  --text-sm:   clamp(0.875rem, 1vw,    1rem);
  --text-base: clamp(1rem,     1.2vw,  1.125rem);
  --text-md:   clamp(1.125rem, 1.4vw,  1.25rem);
  --text-lg:   clamp(1.25rem,  1.8vw,  1.5rem);
  --text-xl:   clamp(1.5rem,   2.5vw,  1.875rem);
  --text-2xl:  clamp(1.875rem, 3.5vw,  2.25rem);
  --text-3xl:  clamp(2.25rem,  5vw,    3rem);
  --text-4xl:  clamp(3rem,     7vw,    4rem);
  --text-5xl:  clamp(4rem,     9vw,    5rem);

  /* Spacing */
  --space-1:  clamp(0.25rem,  0.5vw,  0.5rem);
  --space-2:  clamp(0.5rem,   1vw,    1rem);
  --space-3:  clamp(0.75rem,  1.5vw,  1.5rem);
  --space-4:  clamp(1rem,     2vw,    2rem);
  --space-5:  clamp(1.25rem,  2.5vw,  2.5rem);
  --space-6:  clamp(1.5rem,   3vw,    3rem);
  --space-8:  clamp(2rem,     4vw,    4rem);
  --space-10: clamp(2.5rem,   5vw,    5rem);
  --space-12: clamp(3rem,     6vw,    6rem);
  --space-16: clamp(4rem,     8vw,    8rem);

  /* Z-index */
  --z-negative: -1;
  --z-base:      0;
  --z-card:     10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-drawer:   300;
  --z-modal:    400;
  --z-toast:    700;
  --z-max:     9999;

  /* Easing */
  --ease-bounce:     cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --ease-smooth:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-elastic:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Durations */
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   350ms;
  --duration-slower: 500ms;

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

  /* Shadows */
  --shadow-sm:  0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);

  /* Focus */
  --ring-primary: 0 0 0 2px var(--color-surface-1), 0 0 0 4px var(--color-primary);

  /* Layout */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --header-height: 64px;
}

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-surface-1);
  overflow-x: hidden;
  max-width: 100vw;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}