/* ═══════════════════════════════════════════════════════
   HAYLLI DESIGN TOKENS — v1.0
   CSS custom properties. Light default, html.dark overrides.
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Primary (Blue) ── */
  --hly-primary:         oklch(0.55 0.22 264);
  --hly-primary-hover:   oklch(0.47 0.22 264);
  --hly-primary-tint:    oklch(0.94 0.05 264);
  --hly-primary-subtle:  oklch(0.97 0.02 264);
  --hly-primary-ring:    oklch(0.55 0.22 264 / 0.2);

  /* ── Semantic ── */
  --hly-success:         oklch(0.52 0.13 164);
  --hly-success-tint:    oklch(0.95 0.04 164);
  --hly-danger:          oklch(0.54 0.21 22);
  --hly-danger-tint:     oklch(0.96 0.03 22);
  --hly-warning:         oklch(0.72 0.14 80);
  --hly-warning-tint:    oklch(0.97 0.04 80);
  --hly-info:            oklch(0.58 0.17 230);
  --hly-info-tint:       oklch(0.95 0.04 230);

  /* ── Surfaces ── */
  --hly-bg:              oklch(0.966 0.006 264);
  --hly-surface:         oklch(1 0 0);
  --hly-surface-hover:   oklch(0.985 0.003 264);
  --hly-overlay:         oklch(0.2 0.02 264 / 0.45);

  /* ── Borders ── */
  --hly-border:          oklch(0.91 0.006 264);
  --hly-border-strong:   oklch(0.85 0.008 264);

  /* ── Ink ── */
  --hly-ink:             oklch(0.22 0.02 264);
  --hly-ink-muted:       oklch(0.45 0.02 264);
  --hly-ink-faint:       oklch(0.62 0.012 264);

  /* ── Sidebar & Header ── */
  --hly-sidebar-bg:      oklch(1 0 0);
  --hly-sidebar-border:  oklch(0.91 0.006 264);
  --hly-header-bg:       oklch(1 0 0);
  --hly-header-border:   oklch(0.91 0.006 264);

  /* ── Typography ── */
  --hly-font:       'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hly-text-xs:    0.75rem;
  --hly-text-sm:    0.8125rem;
  --hly-text-base:  0.9375rem;
  --hly-text-md:    1rem;
  --hly-text-lg:    1.125rem;
  --hly-text-xl:    1.25rem;
  --hly-text-2xl:   1.5rem;
  --hly-text-3xl:   1.875rem;

  /* ── Spacing (4px base) ── */
  --hly-s1:   4px;
  --hly-s2:   8px;
  --hly-s3:   12px;
  --hly-s4:   16px;
  --hly-s5:   20px;
  --hly-s6:   24px;
  --hly-s8:   32px;
  --hly-s10:  40px;
  --hly-s12:  48px;

  /* ── Shadows ── */
  --hly-shadow-xs: 0 1px 2px oklch(0.2 0 264 / 0.04);
  --hly-shadow-sm: 0 1px 3px oklch(0.2 0 264 / 0.06), 0 1px 2px oklch(0.2 0 264 / 0.03);
  --hly-shadow-md: 0 4px 8px -1px oklch(0.2 0 264 / 0.07), 0 2px 4px -2px oklch(0.2 0 264 / 0.03);
  --hly-shadow-lg: 0 10px 24px -4px oklch(0.2 0 264 / 0.09), 0 4px 8px -4px oklch(0.2 0 264 / 0.04);
  --hly-shadow-xl: 0 20px 40px -8px oklch(0.2 0 264 / 0.12), 0 8px 16px -8px oklch(0.2 0 264 / 0.05);

  /* ── Border radius ── */
  --hly-r-sm:   5px;
  --hly-r-md:   8px;
  --hly-r-lg:   10px;
  --hly-r-xl:   14px;
  --hly-r-2xl:  18px;
  --hly-r-full: 9999px;

  /* ── Z-index ── */
  --hly-z-dropdown:       1000;
  --hly-z-sticky:         1020;
  --hly-z-sidebar:        1002;
  --hly-z-header:         1001;
  --hly-z-modal-backdrop: 1040;
  --hly-z-modal:          1050;
  --hly-z-toast:          1060;
  --hly-z-tooltip:        1070;

  /* ── Transitions ── */
  --hly-ease:     cubic-bezier(0.25, 1, 0.5, 1);
  --hly-ease-in:  cubic-bezier(0.5, 0, 0.75, 0);
  --hly-t-fast:   120ms var(--hly-ease);
  --hly-t-base:   200ms var(--hly-ease);
  --hly-t-slow:   350ms var(--hly-ease);
}

/* ═══════════ DARK MODE ═══════════ */
html.dark {
  --hly-primary:        oklch(0.65 0.20 264);
  --hly-primary-hover:  oklch(0.72 0.18 264);
  --hly-primary-tint:   oklch(0.24 0.06 264);
  --hly-primary-subtle: oklch(0.20 0.04 264);
  --hly-primary-ring:   oklch(0.65 0.20 264 / 0.25);

  --hly-success:        oklch(0.60 0.13 164);
  --hly-success-tint:   oklch(0.22 0.05 164);
  --hly-danger:         oklch(0.62 0.19 22);
  --hly-danger-tint:    oklch(0.22 0.05 22);
  --hly-warning:        oklch(0.76 0.13 80);
  --hly-warning-tint:   oklch(0.24 0.05 80);
  --hly-info:           oklch(0.65 0.15 230);
  --hly-info-tint:      oklch(0.22 0.05 230);

  --hly-bg:             oklch(0.14 0.012 264);
  --hly-surface:        oklch(0.19 0.012 264);
  --hly-surface-hover:  oklch(0.23 0.012 264);
  --hly-overlay:        oklch(0.05 0 0 / 0.6);

  --hly-border:         oklch(0.28 0.012 264);
  --hly-border-strong:  oklch(0.38 0.014 264);

  --hly-ink:            oklch(0.93 0.005 264);
  --hly-ink-muted:      oklch(0.67 0.01 264);
  --hly-ink-faint:      oklch(0.50 0.01 264);

  --hly-sidebar-bg:     oklch(0.19 0.012 264);
  --hly-sidebar-border: oklch(0.28 0.012 264);
  --hly-header-bg:      oklch(0.17 0.012 264);
  --hly-header-border:  oklch(0.28 0.012 264);

  --hly-shadow-xs: 0 1px 2px oklch(0.05 0 0 / 0.3);
  --hly-shadow-sm: 0 1px 3px oklch(0.05 0 0 / 0.4), 0 1px 2px oklch(0.05 0 0 / 0.2);
  --hly-shadow-md: 0 4px 8px -1px oklch(0.05 0 0 / 0.45), 0 2px 4px -2px oklch(0.05 0 0 / 0.2);
  --hly-shadow-lg: 0 10px 24px -4px oklch(0.05 0 0 / 0.55), 0 4px 8px -4px oklch(0.05 0 0 / 0.25);
  --hly-shadow-xl: 0 20px 40px -8px oklch(0.05 0 0 / 0.65), 0 8px 16px -8px oklch(0.05 0 0 / 0.3);
}

/* Kill all transitions when reduced motion is active */
@media (prefers-reduced-motion: reduce) {
  :root {
    --hly-t-fast: 0ms;
    --hly-t-base: 0ms;
    --hly-t-slow: 0ms;
  }
}