/* ==========================================================================
   Digimart Design System — Tokens
   Primitives + semantic tokens for dark (default) and light themes.
   Components consume ONLY the semantic tokens (never the raw scales).
   See docs/design/02-design-system.md
   ========================================================================== */

:root,
[data-theme="dark"] {
  /* --- Brand red scale --- */
  --red-50: #FFF1F1;
  --red-100: #FFE0E1;
  --red-200: #FDBFC1;
  --red-300: #F79A9D;
  --red-400: #EF6E72;
  --red-500: #E5484D;
  --red-600: #D22730;
  --red-700: #AE1F27;
  --red-800: #87171D;
  --red-900: #5E1013;

  /* --- Neutral scale (dark-first) --- */
  --neutral-0: #08080B;
  --neutral-950: #0B0B0F;
  --neutral-900: #111116;
  --neutral-850: #17171D;
  --neutral-800: #1F1F27;
  --neutral-700: #2A2A34;
  --neutral-600: #3A3A46;
  --neutral-500: #5A5A68;
  --neutral-400: #8A8A98;
  --neutral-300: #A9A9B6;
  --neutral-200: #C9C9D2;
  --neutral-100: #E7E7EC;
  --neutral-50: #F5F5F7;

  /* --- Semantic: surfaces --- */
  --bg-base: var(--neutral-950);
  --bg-surface: var(--neutral-900);
  --bg-elevated: var(--neutral-850);
  --bg-hover: var(--neutral-800);

  /* --- Semantic: borders --- */
  --border-subtle: var(--neutral-800);
  --border-default: var(--neutral-700);
  --border-strong: var(--neutral-600);

  /* --- Semantic: text --- */
  --text-primary: var(--neutral-50);
  --text-secondary: var(--neutral-300);
  --text-tertiary: var(--neutral-400);
  --text-on-accent: #FFFFFF;

  /* --- Semantic: accent --- */
  --accent: var(--red-500);
  --accent-hover: var(--red-400);
  --accent-active: var(--red-600);
  --accent-subtle-bg: rgba(229, 72, 77, 0.12);
  --accent-subtle-border: rgba(229, 72, 77, 0.28);
  --focus-ring: rgba(229, 72, 77, 0.55);

  /* --- Semantic: status --- */
  --success: #2FB57C;
  --warning: #E0A23B;
  --info: #4F8BF0;
  --danger: var(--red-600);
  --success-subtle-bg: rgba(47, 181, 124, 0.12);
  --warning-subtle-bg: rgba(224, 162, 59, 0.12);
  --info-subtle-bg: rgba(79, 139, 240, 0.12);
  --danger-subtle-bg: rgba(210, 39, 48, 0.12);

  /* --- Elevation (dark: hairline borders + soft shadow) --- */
  --elevation-1: 0 0 0 1px var(--border-subtle);
  --elevation-2: 0 0 0 1px var(--border-default);
  --elevation-3: 0 0 0 1px var(--border-default), 0 8px 24px rgba(0, 0, 0, 0.45);
  --elevation-4: 0 0 0 1px var(--border-default), 0 16px 48px rgba(0, 0, 0, 0.55);
}

[data-theme="light"] {
  --bg-base: #FFFFFF;
  --bg-surface: #FAFAFB;
  --bg-elevated: #FFFFFF;
  --bg-hover: #F2F2F4;

  --border-subtle: #ECECEF;
  --border-default: #E0E0E5;
  --border-strong: #C9C9D2;

  --text-primary: #0B0B0F;
  --text-secondary: #52525B;
  --text-tertiary: #6B6B76;
  --text-on-accent: #FFFFFF;

  --accent: var(--red-600);
  --accent-hover: var(--red-700);
  --accent-active: var(--red-800);
  --accent-subtle-bg: var(--red-50);
  --accent-subtle-border: var(--red-200);
  --focus-ring: rgba(210, 39, 48, 0.45);

  --success: #1E9E68;
  --warning: #B9791F;
  --info: #2F6FE0;
  --danger: var(--red-600);
  --success-subtle-bg: rgba(30, 158, 104, 0.10);
  --warning-subtle-bg: rgba(185, 121, 31, 0.10);
  --info-subtle-bg: rgba(47, 111, 224, 0.10);
  --danger-subtle-bg: rgba(210, 39, 48, 0.08);

  --elevation-1: 0 1px 2px rgba(16, 17, 26, 0.06);
  --elevation-2: 0 4px 12px rgba(16, 17, 26, 0.08);
  --elevation-3: 0 8px 24px rgba(16, 17, 26, 0.12);
  --elevation-4: 0 16px 48px rgba(16, 17, 26, 0.18);
}

:root {
  /* --- Typography --- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --text-display-1: clamp(2.5rem, 4.6vw, 3.75rem);
  --text-display-2: clamp(2rem, 4vw, 3rem);
  --text-h1: clamp(2rem, 4vw, 2.75rem);
  --text-h2: clamp(1.5rem, 3vw, 2rem);
  --text-h3: clamp(1.25rem, 2.4vw, 1.5rem);
  --text-h4: clamp(1.125rem, 2vw, 1.25rem);
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.75rem;
  --text-mono-sm: 0.8125rem;

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.6;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- Spacing (4px base) --- */
  --space-1: 4px;
  --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;

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

  /* --- Motion --- */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* --- Layout --- */
  --content-max: 1200px;
  --content-wide: 1320px;
  --gutter: var(--space-6);
}