/* ============================================================
   Cowork UI Kit — SEMANTIC layer
   Role-based colors that compose foundation HSL primitives.
   Components use these (--bg, --primary) NOT raw HSL values.
   v0.4 — 2026-05-20
   ============================================================ */

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

:root {
  /* ============ PRIMARY (brand-driven) ============ */
  --primary:           hsl(var(--brand-primary-h) var(--brand-primary-s) var(--brand-primary-l));
  --primary-deep:      hsl(var(--brand-primary-h) var(--brand-primary-s) calc(var(--brand-primary-l) - 10%));
  --primary-hover:     hsl(var(--brand-primary-h) var(--brand-primary-s) calc(var(--brand-primary-l) - 5%));
  --primary-active:    hsl(var(--brand-primary-h) var(--brand-primary-s) calc(var(--brand-primary-l) - 15%));
  --primary-soft:      hsl(var(--brand-primary-h) var(--brand-primary-s) calc(var(--brand-primary-l) + 25%));
  --primary-bg:        hsl(var(--brand-primary-h) var(--brand-primary-s) calc(var(--brand-primary-l) + 30%) / 0.4);
  --primary-ring:      hsl(var(--brand-primary-h) var(--brand-primary-s) var(--brand-primary-l) / 0.3);
  --primary-on:        hsl(0 0% 100%);

  /* ============ ACCENT ============ */
  --accent:            hsl(var(--brand-accent-h) var(--brand-accent-s) var(--brand-accent-l));
  --accent-deep:       hsl(var(--brand-accent-h) var(--brand-accent-s) calc(var(--brand-accent-l) - 10%));
  --accent-soft:       hsl(var(--brand-accent-h) var(--brand-accent-s) calc(var(--brand-accent-l) + 25%));

  --highlight:         hsl(var(--brand-highlight-h) var(--brand-highlight-s) var(--brand-highlight-l));
  --highlight-soft:    hsl(var(--brand-highlight-h) var(--brand-highlight-s) calc(var(--brand-highlight-l) + 15%));

  /* ============ STATUS ============ */
  --success:           hsl(var(--status-success-h) var(--status-success-s) var(--status-success-l));
  --success-soft:      hsl(var(--status-success-h) var(--status-success-s) calc(var(--status-success-l) + 40%) / 0.3);
  --success-on:        hsl(0 0% 100%);

  --danger:            hsl(var(--status-danger-h) var(--status-danger-s) var(--status-danger-l));
  --danger-soft:       hsl(var(--status-danger-h) var(--status-danger-s) calc(var(--status-danger-l) + 25%) / 0.3);
  --danger-on:         hsl(0 0% 100%);

  --warning:           hsl(var(--status-warning-h) var(--status-warning-s) var(--status-warning-l));
  --warning-soft:      hsl(var(--status-warning-h) var(--status-warning-s) calc(var(--status-warning-l) + 35%) / 0.3);

  --info:              hsl(var(--status-info-h) var(--status-info-s) var(--status-info-l));
  --info-soft:         hsl(var(--status-info-h) var(--status-info-s) calc(var(--status-info-l) + 30%) / 0.3);

  /* ============ WARM AESTHETIC SEMANTIC ============ */
  --warm-bg:           hsl(var(--warm-bg-h) var(--warm-bg-s) var(--warm-bg-l));
  --warm-surface:      hsl(var(--warm-bg-h) var(--warm-bg-s) var(--warm-surface-l));
  --warm-surface-2:    hsl(var(--warm-bg-h) var(--warm-bg-s) var(--warm-surface2-l));
  --warm-border:       hsl(var(--warm-bg-h) var(--warm-bg-s) var(--warm-border-l));
  --warm-rule:         hsl(var(--warm-bg-h) var(--warm-bg-s) var(--warm-rule-l));

  --warm-text:         hsl(var(--neutral-h) var(--neutral-s) var(--warm-ink-l));
  --warm-text-2:       hsl(var(--neutral-h) var(--neutral-s) var(--warm-ink-2-l));
  --warm-text-3:       hsl(var(--neutral-h) var(--neutral-s) var(--warm-ink-3-l));

  /* ============ DARK AESTHETIC SEMANTIC ============ */
  --dark-bg:           hsl(var(--dark-bg-h) var(--dark-bg-s) var(--dark-bg-l));
  --dark-surface:      hsl(var(--dark-bg-h) var(--dark-bg-s) var(--dark-surface-l));
  --dark-surface-2:    hsl(var(--dark-bg-h) var(--dark-bg-s) var(--dark-surface2-l));
  --dark-sidebar:      hsl(var(--dark-bg-h) var(--dark-bg-s) var(--dark-sidebar-l));
  --dark-border:       hsl(var(--dark-bg-h) var(--dark-bg-s) var(--dark-border-l));
  --dark-border-soft:  hsl(var(--dark-bg-h) var(--dark-bg-s) var(--dark-border-soft-l));

  --dark-text:         hsl(var(--dark-text-h) var(--dark-text-s) var(--dark-text-l));
  --dark-text-2:       hsl(var(--dark-text-h) var(--dark-text-s) var(--dark-text-2-l));
  --dark-text-3:       hsl(var(--dark-text-h) var(--dark-text-s) var(--dark-text-3-l));

  --dark-violet:       hsl(var(--dark-violet-h) var(--dark-violet-s) var(--dark-violet-l));
  --dark-violet-soft:  hsl(var(--dark-violet-h) var(--dark-violet-s) var(--dark-violet-l) / 0.15);
  --dark-cyan:         hsl(var(--dark-cyan-h) var(--dark-cyan-s) var(--dark-cyan-l));
  --dark-cyan-soft:    hsl(var(--dark-cyan-h) var(--dark-cyan-s) var(--dark-cyan-l) / 0.15);
  --dark-emerald:      hsl(var(--dark-emerald-h) var(--dark-emerald-s) var(--dark-emerald-l));
  --dark-emerald-soft: hsl(var(--dark-emerald-h) var(--dark-emerald-s) var(--dark-emerald-l) / 0.15);
  --dark-amber:        hsl(var(--dark-amber-h) var(--dark-amber-s) var(--dark-amber-l));
  --dark-amber-soft:   hsl(var(--dark-amber-h) var(--dark-amber-s) var(--dark-amber-l) / 0.15);
  --dark-danger:       hsl(var(--dark-danger-h) var(--dark-danger-s) var(--dark-danger-l));
  --dark-danger-soft:  hsl(var(--dark-danger-h) var(--dark-danger-s) var(--dark-danger-l) / 0.15);

  /* ============ SHADOW (warm = soft, dark = glow) ============ */
  --shadow-xs:  0 1px 2px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.04);
  --shadow-sm:  0 2px 4px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.05), 0 1px 2px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.04);
  --shadow-md:  0 4px 12px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.06), 0 2px 4px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.04);
  --shadow-lg:  0 8px 24px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.08), 0 4px 8px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.04);
  --shadow-xl:  0 16px 48px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.10), 0 6px 16px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.06);
  --shadow-2xl: 0 24px 64px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.14), 0 8px 24px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.08);

  --glow-primary:  0 0 0 1px var(--primary-ring), 0 6px 20px hsl(var(--brand-primary-h) var(--brand-primary-s) var(--brand-primary-l) / 0.3);
  --glow-violet:   0 0 0 1px hsl(var(--dark-violet-h) var(--dark-violet-s) var(--dark-violet-l) / 0.4), 0 6px 20px hsl(var(--dark-violet-h) var(--dark-violet-s) var(--dark-violet-l) / 0.3);
  --glow-emerald:  0 0 0 1px hsl(var(--dark-emerald-h) var(--dark-emerald-s) var(--dark-emerald-l) / 0.4), 0 6px 20px hsl(var(--dark-emerald-h) var(--dark-emerald-s) var(--dark-emerald-l) / 0.3);
}

/* ============================================================
   AESTHETIC MODE — apply class to <body> or root container
   ============================================================ */

.aesthetic-warm {
  --bg:           var(--warm-bg);
  --surface:      var(--warm-surface);
  --surface-2:    var(--warm-surface-2);
  --border:       var(--warm-border);
  --rule:         var(--warm-rule);
  --text:         var(--warm-text);
  --text-2:       var(--warm-text-2);
  --text-3:       var(--warm-text-3);
  --text-on-primary: var(--primary-on);
  --shadow:       var(--shadow-md);
  --shadow-lg-alias: var(--shadow-lg);
  color: var(--text);
  background: var(--bg);
}

.aesthetic-dark {
  --bg:           var(--dark-bg);
  --surface:      var(--dark-surface);
  --surface-2:    var(--dark-surface-2);
  --border:       var(--dark-border);
  --rule:         var(--dark-border);
  --text:         var(--dark-text);
  --text-2:       var(--dark-text-2);
  --text-3:       var(--dark-text-3);
  --text-on-primary: var(--primary-on);
  --shadow:       var(--shadow-md);
  --shadow-lg-alias: var(--shadow-lg);
  color: var(--text);
  background: var(--bg);
}

/* ============================================================
   MESH UTILITIES — use everywhere
   ============================================================ */

.mesh-warm {
  background-color: var(--warm-bg);
  background-image:
    radial-gradient(at 8% 12%,  hsl(var(--mesh-warm-1-h) 90% 78% / 0.55) 0px, transparent 50%),
    radial-gradient(at 88% 8%,  hsl(var(--mesh-warm-2-h) 70% 82% / 0.50) 0px, transparent 50%),
    radial-gradient(at 92% 72%, hsl(var(--mesh-warm-3-h) 85% 75% / 0.50) 0px, transparent 50%),
    radial-gradient(at 12% 88%, hsl(var(--mesh-warm-4-h) 30% 78% / 0.45) 0px, transparent 50%);
}

.mesh-warm-subtle {
  background-color: var(--warm-bg);
  background-image:
    radial-gradient(at 8% 12%,  hsl(var(--mesh-warm-1-h) 90% 78% / 0.25) 0px, transparent 50%),
    radial-gradient(at 92% 88%, hsl(var(--mesh-warm-3-h) 85% 75% / 0.25) 0px, transparent 50%);
}

.mesh-dark {
  background-color: var(--dark-bg);
  background-image:
    radial-gradient(at 15% 22%, hsl(var(--mesh-dark-1-h) 85% 55% / 0.32) 0px, transparent 50%),
    radial-gradient(at 78% 18%, hsl(var(--mesh-dark-2-h) 92% 55% / 0.22) 0px, transparent 50%),
    radial-gradient(at 88% 78%, hsl(var(--mesh-dark-3-h) 88% 50% / 0.18) 0px, transparent 50%),
    radial-gradient(at 20% 85%, hsl(var(--mesh-dark-4-h) 80% 45% / 0.22) 0px, transparent 50%);
}

.mesh-dark-subtle {
  background-color: var(--dark-bg);
  background-image:
    radial-gradient(at 15% 22%, hsl(var(--mesh-dark-1-h) 85% 55% / 0.15) 0px, transparent 50%),
    radial-gradient(at 85% 78%, hsl(var(--mesh-dark-3-h) 88% 50% / 0.10) 0px, transparent 50%);
}

.grid-lines-dark {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 40px 40px;
}

.tab-num { font-variant-numeric: tabular-nums; }