/* =====================================================
   theme.css: Shared theming system — white-label infrastructure
   All color/font/spacing tokens as CSS custom properties
   Imported by: store.css, style.css, admin views
   ===================================================== */

:root {
  /* ── COLOR TOKENS ── */
  --bg: #2a0c10;
  --bg-light: #3a1016;
  --surface: #34101a;
  --surface-2: #3a1318;
  --border: rgba(244, 235, 225, 0.14);
  --border-2: rgba(244, 235, 225, 0.22);

  --text: #f4ebe1;
  --text-secondary: rgba(244, 235, 225, 0.75);
  --text-muted: rgba(244, 235, 225, 0.5);

  --accent: #e8474c;
  --accent-hover: #cf3a3f;
  --accent-light: rgba(232, 71, 76, 0.1);
  --accent-contrast: #fff;

  --success: #166534;
  --success-light: #dcfce7;
  --warning: #ea580c;
  --warning-light: #fff5eb;
  --danger: #dc2626;
  --danger-light: #fee2e2;
  --info: #2563eb;

  /* ── TYPOGRAPHY TOKENS ── */
  --font-display: 'Libre Caslon Display', serif;
  --font-body: 'Hanken Grotesk', 'Hind Siliguri', system-ui, sans-serif;
  --font-mono: 'Courier New', monospace;

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

  /* ── SPACING & LAYOUT ── */
  --radius: 6px;
  --radius-lg: 10px;
  --radius-full: 100px;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 28px;
  --spacing-3xl: 36px;

  /* ── SHADOWS ── */
  --shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.45);

  /* ── DENSITY (scales spacing) ── */
  --density-scale: 1; /* 1 = comfortable, 0.85 = compact, 1.15 = spacious */

  /* ── SEMANTIC TOKENS ── */
  --primary: var(--accent);
  --primary-hover: var(--accent-hover);
  --primary-contrast: var(--accent-contrast);

  --sidebar-bg: var(--bg);
  --sidebar-text: var(--text);
  --sidebar-border: var(--border);

  --card-bg: var(--surface);
  --card-border: var(--border);

  --input-bg: rgba(244, 235, 225, 0.08);
  --input-border: var(--border-2);
  --input-focus-border: var(--accent);

  --button-dark-bg: var(--accent);
  --button-dark-text: #fff;
  --button-dark-hover: var(--accent-hover);

  --status-pending: var(--warning);
  --status-confirmed: var(--info);
  --status-processing: var(--info);
  --status-shipped: var(--info);
  --status-delivered: var(--success);
  --status-cancelled: var(--danger);
  --status-returned: var(--warning);
  --status-refunded: #6b7280;
}

/* ── LIGHT MODE ── */
:root[data-theme-mode="light"] {
  --bg: #f8f6f3;
  --bg-light: #f0ebe5;
  --surface: #fff;
  --surface-2: #f9f7f5;
  --border: rgba(42, 12, 16, 0.12);
  --border-2: rgba(42, 12, 16, 0.2);

  --text: #2a0c10;
  --text-secondary: rgba(42, 12, 16, 0.75);
  --text-muted: rgba(42, 12, 16, 0.5);

  --sidebar-bg: #fff;
  --card-bg: #fff;
  --input-bg: rgba(42, 12, 16, 0.04);
  --input-border: var(--border-2);

  --button-dark-text: #fff;
}

/* ── DARK MODE (DEFAULT) ── */
:root[data-theme-mode="dark"] {
  /* Already set above */
}

/* ── TONE: Corner style ── */
:root[data-corner-style="sharp"] {
  --radius: 0;
  --radius-lg: 0;
  --radius-full: 0;
}

:root[data-corner-style="soft"] {
  --radius: 4px;
  --radius-lg: 6px;
  --radius-full: 100px;
}

:root[data-corner-style="rounded"] {
  --radius: 12px;
  --radius-lg: 16px;
  --radius-full: 100px;
}

/* ── TONE: Density ── */
:root[data-density="compact"] {
  --density-scale: 0.8;
}

:root[data-density="comfortable"] {
  --density-scale: 1;
}

:root[data-density="spacious"] {
  --density-scale: 1.2;
}

/* ── TONE: Typography ── */
:root[data-typography="grotesk"] {
  --font-display: 'Hanken Grotesk', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
}

:root[data-typography="geometric"] {
  --font-display: 'Poppins', 'Outfit', system-ui, sans-serif;
  --font-body: 'Poppins', 'Outfit', system-ui, sans-serif;
}

:root[data-typography="serif"] {
  --font-display: 'Merriweather', 'Lora', serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

:root[data-typography="mono"] {
  --font-display: 'IBM Plex Mono', 'Courier New', monospace;
  --font-body: 'IBM Plex Mono', 'Courier New', monospace;
}

/* ── TONE: Elevation ── */
:root[data-elevation="flat"] {
  --shadow: none;
  --shadow-lg: none;
  --shadow-xl: none;
}

:root[data-elevation="subtle"] {
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 10px 32px rgba(0, 0, 0, 0.25);
}

:root[data-elevation="elevated"] {
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 40px 100px rgba(0, 0, 0, 0.5);
}

/* ── Apply density to commonly-used sizes ── */
:root {
  --spacing-xs-dyn: calc(var(--spacing-xs) * var(--density-scale));
  --spacing-sm-dyn: calc(var(--spacing-sm) * var(--density-scale));
  --spacing-md-dyn: calc(var(--spacing-md) * var(--density-scale));
  --spacing-lg-dyn: calc(var(--spacing-lg) * var(--density-scale));
  --spacing-xl-dyn: calc(var(--spacing-xl) * var(--density-scale));
}

/* ── Ensure fonts are loaded before applying ── */
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Hind+Siliguri:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&family=Merriweather:wght@400;700&family=Lora:wght@400;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap');