/* ============================================
   ArchiTail AI — Design Tokens
   ============================================ */

/* --- Custom Cursor (wood stick) --- */
*, *::before, *::after {
  cursor: url('/assets/cursor-wood.png') 1 1, auto;
}
a, button, [role="button"], label, select, summary,
input[type="submit"], input[type="button"], input[type="reset"],
.btn, [onclick] {
  cursor: url('/assets/cursor-wood.png') 1 1, pointer;
}
input, textarea, [contenteditable="true"] {
  cursor: url('/assets/cursor-wood.png') 1 1, text;
}

/* --- Primitive Tokens --- */
:root {
  /* Neutral Palette */
  --neutral-0: #0B0B0A;
  --neutral-25: #121211;
  --neutral-50: #171716;
  --neutral-100: #1F1F1D;
  --neutral-200: #2A2A27;
  --neutral-300: #3A3A36;
  --neutral-400: #555550;
  --neutral-500: #6A6A63;
  --neutral-600: #8A8A82;
  --neutral-700: #B7B7AF;
  --neutral-800: #CCCCC5;
  --neutral-850: #D8D8D1;
  --neutral-900: #E8E8E3;
  --neutral-950: #F0F0F0;

  /* Accent */
  --accent-ai-400: #3A3A3F;
  --accent-ai-500: #4A4A50;
  --accent-ai-600: #5A5A62;
  --accent-ai-glow: rgba(58, 58, 63, 0.15);

  /* State Colors */
  --state-success: #6F9A85;
  --state-warning: #B59265;
  --state-danger: #B06D6D;
  --state-info: #8A8A93;
  --accent-danger: #8B2020;

  /* Spacing (4px base) */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-pill: 999px;

  /* Shell Dimensions */
  --topbar-public: 72px;
  --topbar-workspace: 64px;
  --topbar-studio: 56px;
  --sidebar-workspace: 248px;
  --sidebar-project: 280px;
  --sidebar-studio: 264px;
  --sidebar-rail: 72px;
  --panel-standard: 320px;
  --panel-wide: 360px;
  --bottombar-status: 40px;
  --bottombar-toolbar: 52px;

  /* Button Sizes */
  --btn-height-sm: 32px;
  --btn-height-md: 40px;
  --btn-height-lg: 48px;
  --btn-padding-sm: 0 14px;
  --btn-padding-md: 0 20px;
  --btn-padding-lg: 0 28px;

  /* Timing */
  --duration-instant: 0ms;
  --duration-fast: 80ms;
  --duration-default: 120ms;
  --duration-moderate: 160ms;
  --duration-panel: 220ms;
  --duration-panel-close: 180ms;
  --duration-slow: 300ms;
  --duration-ai-suggest: 300ms;
  --duration-toast: 220ms;

  /* Easing */
  --ease-default: ease-out;
  --ease-in: ease-in;
  --ease-panel-open: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-panel-close: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-Index Scale */
  --z-base: 1;
  --z-sticky: 10;
  --z-sidebar: 20;
  --z-panel: 25;
  --z-topbar: 30;
  --z-dropdown: 40;
  --z-modal-scrim: 50;
  --z-modal: 51;
  --z-toast: 60;
  --z-tooltip: 70;
  --z-prompt-bar: 80;
}

/* --- Semantic Tokens: Light Theme (DEFAULT) --- */
/*
 * Light-first design. Clean, architectural, premium.
 * Canvas: warm off-white #F0F0F0 (not pure white — too clinical)
 * Panels: white with subtle glass
 * Studio canvas: slightly cooler #F0F0EC for depth
 */
:root,
[data-theme="light"] {
  --color-bg-canvas: #F0F0F0;
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #EDEDEA;
  --color-bg-panel: #FFFFFF;
  --color-bg-elevated: #FFFFFF;
  --color-bg-hover: rgba(0, 0, 0, 0.04);
  --color-bg-subtle: #FAFAF8;

  --color-text-primary: #1A1A1D;
  --color-text-secondary: #52525A;
  --color-text-muted: #8A8A93;
  --color-text-inverse: #F0F0F0;

  --color-border-subtle: rgba(0, 0, 0, 0.06);
  --color-border-default: rgba(0, 0, 0, 0.10);
  --color-border-strong: rgba(0, 0, 0, 0.18);

  --color-focus-ring: rgba(143, 175, 209, 0.45);
  --color-scrim: rgba(0, 0, 0, 0.25);

  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(0, 0, 0, 0.12);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.20);
}

/* --- Dark Theme (opt-in via data-theme="dark") --- */
[data-theme="dark"] {
  --color-bg-canvas: #18181A;
  --color-bg-primary: #1E1E20;
  --color-bg-secondary: #232326;
  --color-bg-panel: #242428;
  --color-bg-elevated: #2A2A2E;
  --color-bg-hover: rgba(255, 255, 255, 0.07);
  --color-bg-subtle: #1C1C1F;

  --color-text-primary: var(--neutral-850);
  --color-text-secondary: var(--neutral-700);
  --color-text-muted: var(--neutral-500);
  --color-text-inverse: var(--neutral-0);

  --color-border-subtle: rgba(255, 255, 255, 0.07);
  --color-border-default: rgba(255, 255, 255, 0.12);
  --color-border-strong: rgba(255, 255, 255, 0.18);

  --color-focus-ring: rgba(143, 175, 209, 0.40);
  --color-scrim: rgba(0, 0, 0, 0.50);

  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(255, 255, 255, 0.12);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.20);
}