/* ============================================================
   Wand Design System — CSS Tokens v1.0
   Lumu · studio.lumutech.com.br
   ============================================================ */

/* === Dark Theme (default) === */
:root,
[data-theme="lumu-dark"] {
  color-scheme: dark;

  /* Backgrounds */
  --lumu-bgc-100: oklch(8% 0 0);
  --lumu-bgc-200: oklch(12% 0 0);
  --lumu-bgc-300: oklch(18% 0 0);
  --lumu-bgc-ink: oklch(95% 0 0);
  --lumu-bgc-ink-muted: oklch(55% 0 0);

  /* Brand — tenant-defined */
  --lumu-brand-hue: 270;
  --lumu-brand: oklch(65% 0.25 var(--lumu-brand-hue));
  --lumu-brand-on: oklch(98% 0 0);
  --lumu-brand-muted: oklch(65% 0.25 var(--lumu-brand-hue) / 15%);
  --lumu-brand-border: oklch(65% 0.25 var(--lumu-brand-hue) / 30%);

  /* Feedback: ok */
  --lumu-ok: oklch(65% 0.2 145);
  --lumu-ok-on: oklch(98% 0 0);
  --lumu-ok-muted: oklch(65% 0.2 145 / 15%);

  /* Feedback: warn */
  --lumu-warn: oklch(75% 0.2 80);
  --lumu-warn-on: oklch(20% 0.05 80);
  --lumu-warn-muted: oklch(75% 0.2 80 / 15%);

  /* Feedback: danger */
  --lumu-danger: oklch(65% 0.25 25);
  --lumu-danger-on: oklch(98% 0 0);
  --lumu-danger-muted: oklch(65% 0.25 25 / 15%);

  /* Feedback: info */
  --lumu-info: oklch(70% 0.2 220);
  --lumu-info-on: oklch(98% 0 0);
  --lumu-info-muted: oklch(70% 0.2 220 / 15%);

  /* Borders */
  --lumu-border: oklch(100% 0 0 / 8%);
  --lumu-border-strong: oklch(100% 0 0 / 16%);

  /* Shadows */
  --lumu-shadow-1: 0 1px 2px oklch(0% 0 0 / 20%);
  --lumu-shadow-3: 0 2px 8px oklch(0% 0 0 / 30%);
  --lumu-shadow-5: 0 4px 24px oklch(0% 0 0 / 40%);
  --lumu-shadow-7: 0 8px 40px oklch(0% 0 0 / 50%);
  --lumu-shadow-10: 0 20px 80px oklch(0% 0 0 / 70%);
}

/* === Light Theme === */
[data-theme="lumu-light"] {
  color-scheme: light;

  --lumu-bgc-100: oklch(98% 0 0);
  --lumu-bgc-200: oklch(94% 0 0);
  --lumu-bgc-300: oklch(89% 0 0);
  --lumu-bgc-ink: oklch(10% 0 0);
  --lumu-bgc-ink-muted: oklch(45% 0 0);

  --lumu-brand: oklch(55% 0.25 var(--lumu-brand-hue));
  --lumu-brand-muted: oklch(55% 0.25 var(--lumu-brand-hue) / 12%);
  --lumu-brand-border: oklch(55% 0.25 var(--lumu-brand-hue) / 25%);

  --lumu-ok: oklch(50% 0.2 145);
  --lumu-ok-muted: oklch(50% 0.2 145 / 10%);
  --lumu-warn: oklch(55% 0.2 80);
  --lumu-warn-muted: oklch(55% 0.2 80 / 10%);
  --lumu-danger: oklch(50% 0.25 25);
  --lumu-danger-muted: oklch(50% 0.25 25 / 10%);
  --lumu-info: oklch(50% 0.2 220);
  --lumu-info-muted: oklch(50% 0.2 220 / 10%);

  --lumu-border: oklch(0% 0 0 / 10%);
  --lumu-border-strong: oklch(0% 0 0 / 20%);

  --lumu-shadow-1: 0 1px 2px oklch(0% 0 0 / 8%);
  --lumu-shadow-3: 0 2px 8px oklch(0% 0 0 / 12%);
  --lumu-shadow-5: 0 4px 24px oklch(0% 0 0 / 10%);
  --lumu-shadow-7: 0 8px 40px oklch(0% 0 0 / 16%);
  --lumu-shadow-10: 0 20px 80px oklch(0% 0 0 / 20%);
}

/* === Border Radius Scale === */
:root {
  --lumu-r1: 2px;
  --lumu-r2: 4px;
  --lumu-r3: 6px;
  --lumu-r4: 8px;
  --lumu-r5: 10px;
  --lumu-r6: 12px;
  --lumu-r7: 16px;
  --lumu-r8: 20px;
  --lumu-r9: 28px;
  --lumu-r10: 9999px;

  /* === Spacing Scale === */
  --lumu-s1: 4px;
  --lumu-s2: 8px;
  --lumu-s3: 12px;
  --lumu-s4: 16px;
  --lumu-s5: 20px;
  --lumu-s6: 24px;
  --lumu-s7: 32px;
  --lumu-s8: 40px;
  --lumu-s9: 56px;
  --lumu-s10: 80px;
}

/* === Utility classes === */
.wand-focus:focus-visible {
  outline: 2px solid var(--lumu-brand);
  outline-offset: 2px;
}

@keyframes wand-spin {
  to { transform: rotate(360deg); }
}
@keyframes wand-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@keyframes wand-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}