/**
 * Theme Variables — Dark Mode Only
 */

:root {
  /* ── Brand Colors ── */
  --orange-50: #fff7ed;
  --orange-100: #ffedd5;
  --orange-200: #fed7aa;
  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --orange-500: #FF6C00;
  --orange-600: #ea580c;
  --orange-700: #c2410c;
  --orange-800: #9a3412;
  --orange-900: #7c2d12;

  /* ── Neutrals ── */
  --gray-50: #fafafa;
  --gray-100: #f4f4f5;
  --gray-200: #e4e4e7;
  --gray-300: #d4d4d8;
  --gray-400: #a1a1aa;
  --gray-500: #71717a;
  --gray-600: #52525b;
  --gray-700: #3f3f46;
  --gray-800: #27272a;
  --gray-900: #1a1a17;
  --gray-950: #0a0a0a;

  /* ── Dark Theme ── */
  --bg-primary: var(--gray-950);
  --bg-secondary: var(--gray-900);
  --bg-tertiary: var(--gray-800);

  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-tertiary: rgba(255, 255, 255, 0.5);

  --accent-primary: var(--orange-500);
  --accent-secondary: var(--orange-600);
  --accent-hover: var(--orange-400);

  --border-color: rgba(255, 255, 255, 0.1);
  --border-hover: rgba(255, 255, 255, 0.2);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.15);

  /* ── Webflow Palette ── */
  --black: #000000;
  --white: #ffffff;
  --cyprus: #f2f2ef;
  --surface-hover: rgba(255, 255, 255, 0.1);

  /* ── Spacing ── */
  --gap: 0.63rem;
  --gap-lg: 1.26rem;
  --gap-xl: 2.52rem;
  --pad: 0.315rem;

  /* ── Radius ── */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* ── Z-index ── */
  --z-base: 1;
  --z-content: 2;
  --z-hero: 3;
  --z-nav-blur: 4;
  --z-progress: 50;
  --z-nav: 999;
  --z-loader: 9999;
  --z-cursor: 10000;
}

/* ── Selection ── */
::selection {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

::-moz-selection {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }
* { scrollbar-width: thin; scrollbar-color: var(--border-color) var(--bg-secondary); }