/* ============================================================
   Design tokens — PhotoPrint Service
   Light theme by default, dark theme via [data-theme="dark"]
   ============================================================ */

:root {
  color-scheme: light;

  /* Brand */
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-active: #1e40af;
  --accent-soft: #eff6ff;
  --accent-soft-2: #dbeafe;
  --accent-contrast: #ffffff;

  /* Neutrals */
  --bg: #f7f8fa;
  --bg-grad: radial-gradient(circle at top left, rgba(37, 99, 235, 0.07), transparent 32%);
  --surface: #ffffff;
  --surface-2: #f3f5f8;
  --surface-3: #e9edf3;
  --text: #111827;
  --text-2: #4b5563;
  --text-3: #8a94a6;
  --border: #e5e7eb;
  --border-strong: #d3d9e2;
  --overlay: rgba(9, 14, 24, 0.62);

  /* Feedback */
  --success: #16a34a;
  --success-soft: #f0fdf4;
  --success-border: #bbf7d0;
  --warning: #d97706;
  --warning-soft: #fffbeb;
  --warning-border: #fde68a;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --danger-border: #fecaca;
  --info: #2563eb;
  --info-soft: #eff6ff;
  --info-border: #bfdbfe;

  /* Effects */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 6px 18px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 18px 44px rgba(16, 24, 40, 0.12);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  /* Layout */
  --container: 1160px;
  --header-height: 68px;

  /* Typography */
  --font: 'Manrope', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
}

:root[data-theme='dark'] {
  color-scheme: dark;

  --accent: #60a5fa;
  --accent-hover: #93c5fd;
  --accent-active: #bfdbfe;
  --accent-soft: #17233a;
  --accent-soft-2: #1e2f4d;
  --accent-contrast: #0b1120;

  --bg: #0a0f1a;
  --bg-grad: radial-gradient(circle at top left, rgba(96, 165, 250, 0.09), transparent 32%);
  --surface: #111827;
  --surface-2: #1a2233;
  --surface-3: #232c40;
  --text: #f2f5f9;
  --text-2: #a7b1c2;
  --text-3: #7b8798;
  --border: #212a3d;
  --border-strong: #2e3852;
  --overlay: rgba(3, 6, 12, 0.78);

  --success: #4ade80;
  --success-soft: #0f241a;
  --success-border: #14532d;
  --warning: #fbbf24;
  --warning-soft: #2a2007;
  --warning-border: #713f12;
  --danger: #f87171;
  --danger-soft: #2c1315;
  --danger-border: #7f1d1d;
  --info: #60a5fa;
  --info-soft: #12213a;
  --info-border: #1d4ed8;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.55);
}