/* ============================================================
   ScriptTonic Design System V1 — Tokens
   Dark-first marketplace for developers.
   Native CSS custom properties. No build step.
   ============================================================ */

:root {
  /* === PRIMITIVE PALETTE === */
  --st-orange-500: #FF7A00;
  --st-orange-400: #FF9333;
  --st-orange-600: #E66E00;

  --st-cyan-500: #00B3FF;
  --st-cyan-400: #33C2FF;
  --st-cyan-600: #009EE6;

  --st-maroon-500: #71324C;
  --st-maroon-600: #5D293F;

  --st-green-500: #00C853;
  --st-green-600: #00B048;

  --st-amber-500: #FFB300;
  --st-amber-600: #E6A000;

  --st-red-500: #FF5A36;
  --st-red-600: #E83A00;

  --st-blue-500: #2962FF;

  /* === SEMANTIC SURFACE === */
  --st-canvas: #0B0F14;
  --st-surface: #101720;
  --st-surface-elevated: #151E29;
  --st-surface-overlay: #1A2332;
  --st-surface-primary: var(--st-surface);
  --st-surface-secondary: var(--st-surface-elevated);
  --st-surface-control: var(--st-surface-elevated);
  --st-surface-empty: var(--st-surface);
  --st-surface-table: var(--st-surface);
  --st-surface-menu: var(--st-surface-elevated);

  /* === SEMANTIC BORDER === */
  --st-border: #263342;
  --st-border-strong: #3A4D66;
  --st-border-subtle: #1E2A38;

  /* === SEMANTIC TEXT === */
  --st-text: #E6E6E6;
  --st-text-muted: #A0B0C3;
  --st-text-subtle: #7A8DA5;
  --st-text-inverse: #0B0F14;
  --st-text-secondary: var(--st-text-muted);
  --st-text-disabled: var(--st-text-subtle);

  /* === SEMANTIC BRAND / COMMERCE === */
  --st-brand: var(--st-orange-500);
  --st-brand-hover: var(--st-orange-400);
  --st-brand-active: var(--st-orange-600);
  --st-commerce: var(--st-brand);
  --st-commerce-hover: var(--st-brand-hover);
  --st-commerce-active: var(--st-brand-active);

  /* === SEMANTIC INTERACTION / INFO === */
  --st-interaction: var(--st-cyan-500);
  --st-interaction-hover: var(--st-cyan-400);
  --st-interaction-active: var(--st-cyan-600);

  /* === SEMANTIC SECONDARY EMPHASIS === */
  --st-warm-accent: var(--st-maroon-500);
  --st-warm-accent-active: var(--st-maroon-600);
  --st-warm-surface: #17121C;
  --st-commerce-soft: rgba(255, 122, 0, 0.1);
  --st-interaction-soft: rgba(0, 179, 255, 0.09);
  --st-warm-soft: rgba(113, 50, 76, 0.18);

  /* === SEMANTIC STATUS === */
  --st-success: var(--st-green-500);
  --st-success-hover: var(--st-green-600);
  --st-warning: var(--st-amber-500);
  --st-warning-hover: var(--st-amber-600);
  --st-danger: var(--st-red-500);
  --st-danger-hover: var(--st-red-600);
  --st-info: var(--st-blue-500);

  /* === CONTROL TOKENS === */
  --st-control-bg: var(--st-surface-elevated);
  --st-control-border: var(--st-border);
  --st-control-hover: #1E2A38;
  --st-control-focus: var(--st-interaction);
  --st-control-disabled: #1A2332;
  --st-control-text: var(--st-text);
  --st-control-text-disabled: var(--st-text-subtle);
  --st-control-disabled-border: var(--st-border);

  /* === FOCUS === */
  --st-focus-color: var(--st-interaction);
  --st-focus-ring: 0 0 0 3px rgba(0, 179, 255, 0.65);
  --st-focus-ring-brand: 0 0 0 3px rgba(255, 122, 0, 0.65);

  /* === SPACING (4px base) === */
  --st-space-1: 0.25rem;
  --st-space-2: 0.5rem;
  --st-space-3: 0.75rem;
  --st-space-4: 1rem;
  --st-space-5: 1.25rem;
  --st-space-6: 1.5rem;
  --st-space-8: 2rem;
  --st-space-10: 2.5rem;
  --st-space-12: 3rem;
  --st-space-16: 4rem;

  /* === TYPOGRAPHY === */
  --st-font-sans: 'Inter', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --st-font-arabic: 'IBM Plex Sans Arabic', 'Inter', -apple-system, sans-serif;
  --st-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --st-text-xs: 0.75rem;
  --st-text-sm: 0.875rem;
  --st-text-base: 1rem;
  --st-text-md: 1.0625rem;
  --st-text-lg: 1.125rem;
  --st-text-xl: 1.25rem;
  --st-text-2xl: 1.5rem;
  --st-text-3xl: 1.875rem;
  --st-text-4xl: 2.25rem;

  --st-leading-tight: 1.25;
  --st-leading-normal: 1.5;
  --st-leading-relaxed: 1.625;

  --st-font-regular: 400;
  --st-font-medium: 500;
  --st-font-semibold: 600;
  --st-font-bold: 700;

  /* === RADIUS === */
  --st-radius-sm: 4px;
  --st-radius-md: 6px;
  --st-radius-lg: 8px;
  --st-radius-xl: 12px;
  --st-radius-full: 9999px;

  /* === ELEVATION === */
  --st-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --st-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
  --st-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
  --st-shadow-focus: 0 0 0 3px rgba(0, 179, 255, 0.65);

  /* === MOTION === */
  --st-duration-fast: 100ms;
  --st-duration-normal: 200ms;
  --st-duration-slow: 300ms;
  --st-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --st-easing-enter: cubic-bezier(0, 0, 0.2, 1);
  --st-easing-exit: cubic-bezier(0.4, 0, 1, 1);

  /* === Z-INDEX === */
  --st-z-dropdown: 1000;
  --st-z-sticky: 1020;
  --st-z-fixed: 1030;
  --st-z-modal-backdrop: 1040;
  --st-z-modal: 1050;
  --st-z-popover: 1060;
  --st-z-tooltip: 1070;

  /* === LAYOUT === */
  --st-sidebar-width: 260px;
  --st-topbar-height: 64px;
  --st-content-max-width: 1400px;
  --st-control-height-sm: 32px;
  --st-control-height-md: 40px;
  --st-control-height-lg: 48px;
  --st-touch-target: 44px;
}

/* Arabic font override via lang attribute */
[lang="ar"] {
  --st-font-sans: 'IBM Plex Sans Arabic', 'Inter', -apple-system, sans-serif;
}