/* Ayurvedasar v6 — Design Tokens
   "Modern Ayurvedic Apothecary" aesthetic
   Source of truth: /UI V6/docs/UI_KIT.md
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300..900,30..100&family=JetBrains+Mono:wght@400;500;600&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=switzer@200,300,400,500,600,700,800&display=swap');

/* ── Dark theme (default) ─────────────────────────────────────────── */
:root,
[data-theme="dark"] {
  --canvas:           #0F0E0B;
  --surface:          #18160F;
  --surface-elevated: #1F1C14;
  --surface-hover:    #23201A;
  --ink:              #F2EFE6;
  --ink-muted:        #8A8576;
  --ink-faint:        #5A5448;
  --line:             #2A2620;
  --line-strong:      #3A352C;

  --saffron:          #E68040;
  --saffron-soft:     #2A1A0F;
  --saffron-text:     #F2A878;
  --moss:             #7CA66E;
  --moss-soft:        #1A2418;
  --moss-text:        #9BC58E;
  --terracotta:       #D86B4A;
  --terracotta-soft:  #2A1812;
  --terracotta-text:  #E89478;
  --mulberry:         #B07088;
  --mulberry-soft:    #251820;
  --mulberry-text:    #C58FA3;
  --cobalt:           #6E8FB3;
  --cobalt-soft:      #15202A;
  --cobalt-text:      #92AFCB;

  --shadow-sm:  0 1px 0 0 rgba(0,0,0,.4), inset 0 1px 0 0 rgba(255,255,255,.02);
  --shadow:     0 4px 12px -2px rgba(0,0,0,.5), inset 0 1px 0 0 rgba(255,255,255,.03);
  --shadow-lg:  0 12px 32px -4px rgba(0,0,0,.6), inset 0 1px 0 0 rgba(255,255,255,.04);

  color-scheme: dark;
}

[data-theme="light"] {
  --canvas:           #F8F4EC;
  --surface:          #FFFFFF;
  --surface-elevated: #FFFFFF;
  --surface-hover:    #F0EAD8;
  --ink:              #1A1814;
  --ink-muted:        #5A5448;
  --ink-faint:        #8A8576;
  --line:             #E8E0D0;
  --line-strong:      #D5CCB8;

  --saffron:          #C8651C;
  --saffron-soft:     #FBE8D6;
  --saffron-text:     #A6500E;
  --moss:             #4A6741;
  --moss-soft:        #E3EBD9;
  --moss-text:        #3A5232;
  --terracotta:       #B5462A;
  --terracotta-soft:  #F8DAC9;
  --terracotta-text:  #93331C;
  --mulberry:         #7A3858;
  --mulberry-soft:    #F0DCE3;
  --mulberry-text:    #5C2640;
  --cobalt:           #3D5F86;
  --cobalt-soft:      #DCE5F0;
  --cobalt-text:      #2A4564;

  --shadow-sm:  0 1px 0 0 rgba(0,0,0,.04);
  --shadow:     0 4px 12px -2px rgba(0,0,0,.08);
  --shadow-lg:  0 12px 32px -4px rgba(0,0,0,.12);

  color-scheme: light;
}

:root {
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body:    'Switzer', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --radius-sm:    4px;
  --radius:       6px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:    120ms;
  --dur:         200ms;
  --dur-slow:    320ms;
  --dur-hero:    600ms;

  --sidebar-w:           240px;
  --sidebar-w-collapsed: 56px;
  --topbar-h:            56px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--saffron-soft); color: var(--ink); }

.text-display-hero { font-family: var(--font-display); font-size: 64px; line-height: 1.0; font-weight: 400; letter-spacing: -0.025em; font-variation-settings: 'opsz' 144, 'SOFT' 30; }
.text-display-xl   { font-family: var(--font-display); font-size: 48px; line-height: 1.05; font-weight: 500; letter-spacing: -0.02em; font-variation-settings: 'opsz' 144, 'SOFT' 20; }
.text-display-lg   { font-family: var(--font-display); font-size: 36px; line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; font-variation-settings: 'opsz' 96, 'SOFT' 20; }
.text-display-md   { font-family: var(--font-display); font-size: 28px; line-height: 1.15; font-weight: 500; letter-spacing: -0.015em; font-variation-settings: 'opsz' 48, 'SOFT' 20; }

.text-h1 { font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.text-h2 { font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.005em; }
.text-h3 { font-size: 16px; line-height: 1.4; font-weight: 600; }
.text-body    { font-size: 14px; line-height: 1.5; font-weight: 400; }
.text-body-sm { font-size: 13px; line-height: 1.45; font-weight: 400; }
.text-caption { font-size: 12px; line-height: 1.4; font-weight: 500; color: var(--ink-muted); }
.text-micro   { font-size: 11px; line-height: 1.3; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.text-mono    { font-family: var(--font-mono); font-size: 13px; line-height: 1.4; font-weight: 500; }

:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--saffron);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

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

@keyframes kpi-rise {
  from { opacity: 0; transform: translateY(8px); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.kpi-rise { animation: kpi-rise var(--dur-hero) var(--ease-out) both; }

/* ── Status badges ─────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
.badge-saffron    { background: var(--saffron-soft); color: var(--saffron-text); border-color: color-mix(in srgb, var(--saffron) 25%, transparent); }
.badge-saffron::before    { background: var(--saffron); }
.badge-moss       { background: var(--moss-soft); color: var(--moss-text); border-color: color-mix(in srgb, var(--moss) 25%, transparent); }
.badge-moss::before       { background: var(--moss); }
.badge-terracotta { background: var(--terracotta-soft); color: var(--terracotta-text); border-color: color-mix(in srgb, var(--terracotta) 25%, transparent); }
.badge-terracotta::before { background: var(--terracotta); }
.badge-mulberry   { background: var(--mulberry-soft); color: var(--mulberry-text); border-color: color-mix(in srgb, var(--mulberry) 25%, transparent); }
.badge-mulberry::before   { background: var(--mulberry); }
.badge-cobalt     { background: var(--cobalt-soft); color: var(--cobalt-text); border-color: color-mix(in srgb, var(--cobalt) 25%, transparent); }
.badge-cobalt::before     { background: var(--cobalt); }
.badge-muted      { background: var(--surface-elevated); color: var(--ink-muted); border-color: var(--line); }
.badge-muted::before      { background: var(--ink-faint); }
.badge-plain::before { display: none; }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--radius);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap; user-select: none;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--saffron); color: #0F0E0B; }
.btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--saffron) 88%, white); }
.btn-secondary { background: var(--surface-elevated); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--line-strong); }
.btn-ghost { background: transparent; color: var(--ink-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-hover); color: var(--ink); }
.btn-danger { background: var(--terracotta-soft); color: var(--terracotta-text); border-color: color-mix(in srgb, var(--terracotta) 30%, transparent); }
.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--terracotta-soft) 70%, var(--terracotta)); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-icon { padding: 8px; }

.input {
  width: 100%; padding: 8px 12px;
  background: var(--surface-elevated); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--font-body); font-size: 13px; line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.input::placeholder { color: var(--ink-faint); }
.input:hover { border-color: var(--line-strong); }
.input:focus { border-color: var(--saffron); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--saffron) 18%, transparent); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--surface-elevated); border: 1px solid var(--line);
  font-size: 11px; font-weight: 600; color: var(--ink-muted);
  flex-shrink: 0; position: relative;
}
.avatar-sm { width: 22px; height: 22px; font-size: 10px; }
.avatar-md { width: 32px; height: 32px; font-size: 12px; }
.avatar-lg { width: 40px; height: 40px; font-size: 14px; }
.avatar-xl { width: 56px; height: 56px; font-size: 18px; }
.avatar-2xl { width: 72px; height: 72px; font-size: 22px; }

.presence-dot {
  position: absolute; bottom: -2px; right: -2px;
  width: 10px; height: 10px; border-radius: 999px;
  border: 2px solid var(--canvas);
}
.presence-online  { background: var(--moss); }
.presence-away    { background: var(--saffron); }
.presence-busy    { background: var(--terracotta); }
.presence-offline { background: var(--ink-faint); }

.noise-overlay::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1000;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' /></filter><rect width='100' height='100' filter='url(%23n)' opacity='0.08'/></svg>");
  mix-blend-mode: overlay; opacity: 0.4;
}