/*
 * theme-asana.css — Asana preset.
 *
 * Vibrant indigo primary, coral accent, larger radii, generous
 * spacing, layered softer shadows. Imports the default theme.css
 * for the component baseline, then overrides the --as-* tokens
 * with Asana values.
 *
 * Activation:
 *   - default (post 2026-05-01): runtime-init injects this as the
 *     default stylesheet
 *   - explicit: localStorage.setItem('agent-swarm-theme', 'asana')
 *     OR ?theme=asana URL param
 *     OR pick "Asana" in the theme-switcher widget
 *
 * Palette source: docs/theme-plan.md §1.2 (Asana Design System)
 */

@import url('./theme.css');

/* ──────────────────────────────────────────────────────────────────────
   Light — Asana indigo + coral palette
   ────────────────────────────────────────────────────────────────────── */

[data-theme="asana"] {
  /* Brand — Asana indigo (#796EFF) */
  --as-primary:       oklch(0.66 0.18 287);
  --as-primary-hover: oklch(0.60 0.20 287);
  --as-primary-fg:    oklch(1 0 0);
  /* Accent — Asana coral (#F06A6A), used for hover bg + secondary CTAs */
  --as-accent:        oklch(0.96 0.025 20);
  --as-accent-hover:  oklch(0.93 0.04 20);
  --as-accent-fg:     oklch(0.42 0.18 20);
  /* Surfaces — clean off-white with very soft tint */
  --as-bg:            oklch(1 0 0);
  --as-bg-subtle:     oklch(0.98 0.003 30);
  --as-bg-raised:     oklch(1 0 0);
  /* Foreground — Asana navy-black */
  --as-fg:            oklch(0.21 0.02 260);
  --as-fg-muted:      oklch(0.46 0.015 260);
  --as-fg-subtle:     oklch(0.62 0.012 260);
  /* Borders — warmer, slightly cream-tinted */
  --as-border:        oklch(0.92 0.01 60);
  --as-border-strong: oklch(0.84 0.015 60);
  --as-border-subtle: oklch(0.96 0.006 60);
  /* Semantic — Asana semantic palette */
  --as-success:    oklch(0.62 0.13 165);
  --as-success-bg: oklch(0.95 0.04 165);
  --as-success-fg: oklch(0.34 0.10 165);
  --as-warning:    oklch(0.78 0.14 80);
  --as-warning-bg: oklch(0.96 0.06 80);
  --as-warning-fg: oklch(0.46 0.13 80);
  --as-danger:     oklch(0.62 0.22 20);
  --as-danger-bg:  oklch(0.96 0.05 20);
  --as-danger-fg:  oklch(0.42 0.18 20);
  --as-info:       oklch(0.62 0.16 245);
  --as-info-bg:    oklch(0.96 0.04 245);
  --as-info-fg:    oklch(0.40 0.14 245);
  /* Larger radii — Asana feels rounder and friendlier */
  --as-radius-sm: 4px;
  --as-radius-md: 6px;
  --as-radius-lg: 12px;
  --as-radius-xl: 16px;
  /* Focus ring — indigo glow */
  --as-ring:          oklch(0.66 0.18 287 / 0.40);
  --as-shadow-focus:  0 0 0 3px oklch(0.66 0.18 287 / 0.30);
  /* Softer, more layered shadows */
  --as-shadow-xs: 0 1px 2px rgba(20, 27, 38, 0.05);
  --as-shadow-sm: 0 2px 4px rgba(20, 27, 38, 0.06), 0 1px 2px rgba(20, 27, 38, 0.04);
  --as-shadow-md: 0 4px 8px rgba(20, 27, 38, 0.08), 0 2px 4px rgba(20, 27, 38, 0.04);
  --as-shadow-lg: 0 12px 20px rgba(20, 27, 38, 0.10), 0 4px 8px rgba(20, 27, 38, 0.05);
  --as-shadow-xl: 0 24px 40px rgba(20, 27, 38, 0.14), 0 8px 16px rgba(20, 27, 38, 0.07);
  /* Chart palette — Asana-flavored */
  --as-chart-1: oklch(0.66 0.18 287);
  --as-chart-2: oklch(0.62 0.22 20);
  --as-chart-3: oklch(0.62 0.13 165);
  --as-chart-4: oklch(0.78 0.14 80);
  --as-chart-5: oklch(0.62 0.16 245);
  --as-chart-6: oklch(0.55 0.18 305);
  --as-chart-7: oklch(0.55 0.10 220);
}

/* ──────────────────────────────────────────────────────────────────────
   Dark — Asana dark mode (rare in their official UI but defined for
   cohesion with our existing dark-mode toggle)
   ────────────────────────────────────────────────────────────────────── */

[data-theme="asana"].dark,
.dark [data-theme="asana"],
[data-theme="asana"] .dark {
  /* Brand — brighter indigo in dark */
  --as-primary:       oklch(0.74 0.16 287);
  --as-primary-hover: oklch(0.80 0.16 287);
  --as-primary-fg:    oklch(0.16 0.04 287);
  --as-accent:        oklch(0.30 0.05 20);
  --as-accent-hover:  oklch(0.36 0.07 20);
  --as-accent-fg:     oklch(0.86 0.10 20);
  /* Surfaces — Asana dark navy */
  --as-bg:            oklch(0.20 0.02 260);
  --as-bg-subtle:     oklch(0.24 0.02 260);
  --as-bg-raised:     oklch(0.26 0.02 260);
  /* Foreground */
  --as-fg:            oklch(0.94 0.01 60);
  --as-fg-muted:      oklch(0.74 0.012 60);
  --as-fg-subtle:     oklch(0.56 0.014 60);
  /* Borders */
  --as-border:        oklch(0.34 0.018 260);
  --as-border-strong: oklch(0.44 0.020 260);
  --as-border-subtle: oklch(0.28 0.014 260);
  /* Focus */
  --as-ring:          oklch(0.74 0.16 287 / 0.55);
  --as-shadow-focus:  0 0 0 3px oklch(0.74 0.16 287 / 0.40);
}

/* ──────────────────────────────────────────────────────────────────────
   Component overrides — Asana feels generous + soft. Bigger paddings,
   bigger radii, friendlier hover states.
   ────────────────────────────────────────────────────────────────────── */

[data-theme="asana"] :where([data-slot="button"]) {
  height: 36px;
  padding: 0 14px;
  font-weight: 500;
  border-radius: 6px;
}

[data-theme="asana"] :where([data-slot="card"]) {
  border-radius: var(--as-radius-lg);    /* 12px */
}

[data-theme="asana"] :where([data-slot="dialog-content"]) {
  border-radius: var(--as-radius-xl);    /* 16px */
}

[data-theme="asana"] :where([data-slot="badge"]) {
  border-radius: 999px;                  /* fully pill */
  text-transform: none;                  /* Asana uses sentence case */
  letter-spacing: 0;
  font-weight: 500;
  font-size: 12px;
  padding: 2px 10px;
}

[data-theme="asana"] :where([data-slot="input"], [data-slot="textarea"]) {
  border-radius: 6px;
  padding: 8px 12px;
}

[data-theme="asana"] :where([data-slot="select-trigger"]) {
  border-radius: 6px;
}

[data-theme="asana"] :where([data-slot="popover-content"]),
[data-theme="asana"] :where([data-slot="dropdown-menu-content"]),
[data-theme="asana"] :where([data-slot="select-content"]) {
  border-radius: var(--as-radius-lg);
  box-shadow: var(--as-shadow-md);
}

/* Sidebar active item — Asana uses primary-tinted bg with rounded pill */
[data-theme="asana"] :where([data-slot="sidebar-menu-button"][data-active="true"]) {
  background-color: oklch(from var(--as-primary) l c h / 0.12);
  color: var(--as-primary);
  border-radius: 999px;
  margin: 0 8px;
  font-weight: 600;
  box-shadow: none;     /* override Jira's left bar from theme.css */
}

/* Tabs — Asana uses pill-style active tab, not underline */
[data-theme="asana"] :where([data-slot="tabs-trigger"][data-state="active"]) {
  background-color: oklch(from var(--as-primary) l c h / 0.12);
  color: var(--as-primary);
  border-radius: 999px;
  box-shadow: none;     /* override base underline */
}