/* Design tokens — surfaces: admin | store | pos */
:root {
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --shadow-sm: 0 1px 2px rgba(22, 27, 38, 0.04);
  --shadow-md: 0 8px 24px rgba(22, 27, 38, 0.07);
  --shadow-lg: 0 18px 40px rgba(22, 27, 38, 0.1);
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
}

[data-surface="admin"] {
  /* Jewellery admin: ink + warm teal (not purple / cream-terracotta) */
  --color-primary: #0f766e;
  --color-primary-dark: #0d5f59;
  --color-primary-light: #14b8a6;
  --color-secondary: #1c2434;
  --color-accent: #c2a46b;
  --color-sidebar: #f7f5f1;
  --color-sidebar-elevated: #ffffff;
  --color-sidebar-text: #3a4454;
  --color-sidebar-muted: #7a8494;
  --color-bg: #f3f1ec;
  --color-bg-accent: #ebe7df;
  --color-card: #ffffff;
  --color-border: #e4e0d8;
  --color-text: #161b26;
  --color-text-muted: #6b7280;
  --color-success: #15803d;
  --color-warning: #b45309;
  --color-danger: #b91c1c;
  --color-info: #0369a1;
  --admin-nav-height: 64px;
  --admin-sidebar-width: 272px;
  --admin-sidebar-collapsed: 78px;
  --admin-sidebar-bg:
    radial-gradient(480px 260px at 0% 0%, rgba(20, 184, 166, 0.12), transparent 55%),
    radial-gradient(400px 240px at 100% 30%, rgba(194, 164, 107, 0.1), transparent 50%),
    linear-gradient(180deg, #fbfaf8 0%, #f4f1eb 100%);
  --admin-sidebar-solid: #f7f5f1;
  --admin-sidebar-hover: color-mix(in srgb, var(--color-primary) 8%, #fff);
  --admin-sidebar-active: var(--color-primary);
  --admin-sidebar-active-bg: color-mix(in srgb, var(--color-primary) 12%, #fff);
  --admin-sidebar-border: #e6e1d8;
  --admin-sidebar-text: #3a4454;
  --admin-sidebar-text-hover: #161b26;
  --admin-primary: var(--color-primary);
  --admin-primary-dark: var(--color-primary-dark);
  --admin-secondary: var(--color-primary-light);
  --admin-border-color: var(--color-border);
}

[data-surface="store"] {
  --color-primary: #13233c;
  --color-primary-dark: #0c1829;
  --color-primary-light: #1e3a5f;
  --color-secondary: #f28c28;
  --color-accent: #d0a53a;
  --color-sidebar: #13233c;
  --color-sidebar-text: #f3f4f6;
  --color-bg: #ffffff;
  --color-card: #ffffff;
  --color-border: #e5e7eb;
  --color-text: #111827;
  --color-text-muted: #6b7280;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-info: #0369a1;
}

/* POS shares admin jewellery palette so chrome matches admin console */
[data-surface="pos"] {
  --color-primary: #0f766e;
  --color-primary-dark: #0d5f59;
  --color-primary-light: #14b8a6;
  --color-secondary: #1c2434;
  --color-accent: #c2a46b;
  --color-bg: #f3f1ec;
  --color-bg-accent: #ebe7df;
  --color-card: #ffffff;
  --color-border: #e4e0d8;
  --color-text: #161b26;
  --color-text-muted: #6b7280;
  --color-success: #15803d;
  --color-warning: #b45309;
  --color-danger: #b91c1c;
  --color-info: #0369a1;
}

.dark,
.dark[data-surface="admin"],
html.dark[data-surface="admin"] {
  --color-bg: #0b1020;
  --color-bg-accent: #12182a;
  --color-card: #151c2e;
  --color-border: #273149;
  --color-text: #eef2f7;
  --color-text-muted: #9aa6b8;
  --color-sidebar: #0e1422;
  --color-sidebar-elevated: #151c2e;
  --color-sidebar-text: #c7d0dc;
  --color-sidebar-muted: #8b97a8;
  --color-primary: #14b8a6;
  --color-primary-dark: #5eead4;
  --color-primary-light: #2dd4bf;
  --color-accent: #d4b87a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.55);
  --admin-sidebar-bg:
    radial-gradient(480px 260px at 0% 0%, rgba(20, 184, 166, 0.14), transparent 55%),
    radial-gradient(400px 240px at 100% 30%, rgba(212, 184, 122, 0.1), transparent 50%),
    linear-gradient(180deg, #0e1422 0%, #0b1020 100%);
  --admin-sidebar-solid: #0e1422;
  --admin-sidebar-hover: rgba(255, 255, 255, 0.06);
  --admin-sidebar-active: #14b8a6;
  --admin-sidebar-active-bg: color-mix(in srgb, #14b8a6 22%, #151c2e);
  --admin-sidebar-border: #273149;
  --admin-sidebar-text: #c7d0dc;
  --admin-sidebar-text-hover: #ffffff;
  --admin-border-color: #273149;
  --admin-primary: #14b8a6;
  --admin-primary-dark: #5eead4;
  --admin-secondary: #2dd4bf;
}

html {
  font-family: var(--font-sans);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}