/**
 * Command Center CSS Variables & Theme System
 * Supports light and dark modes with Tenex brand colors
 * Compatible with Tailwind CSS utilities
 *
 * Color architecture mirrors Nucleus PR #3089 — semantic tokens resolve
 * to a tiered surface system (auxiliary/secondary/primary) built on a
 * slate scale in oklch so elevation reads predictably:
 *   auxiliary = canvas     (darkest in dark mode, lightest in light mode)
 *   secondary = popover/toast (one step elevated)
 *   primary   = modal      (top of stack)
 */

/* ========================================
   COLOR PRIMITIVES — slate scale (oklch, H=248.63, bluish-neutral)
   Matches Nucleus PR #3089 scale exactly.
   ======================================== */
:root {
  --color-neutral-000: oklch(100% 0 none);
  --color-slate-025: oklch(97.859% 0.00052 248.63);
  --color-slate-050: oklch(95.718% 0.00104 248.63);
  --color-slate-075: oklch(93.578% 0.00156 248.63);
  --color-slate-100: oklch(91.437% 0.00208 248.63);
  --color-slate-150: oklch(87.155% 0.00312 248.63);
  --color-slate-200: oklch(82.873% 0.00415 248.63);
  --color-slate-400: oklch(65.319% 0.00841 248.63);
  --color-slate-500: oklch(56.755% 0.01049 248.63);
  --color-slate-700: oklch(39.629% 0.01464 248.63);
  --color-slate-750: oklch(35.347% 0.01568 248.63);
  --color-slate-800: oklch(31.065% 0.01672 248.63);
  --color-slate-850: oklch(26.784% 0.01776 248.63);
  --color-slate-900: oklch(23.358% 0.01859 248.63);
  --color-slate-950: oklch(17.743% 0.01412 248.63);
}

/* ========================================
   SURFACE MODES — Mise en Mode (port of Nucleus PR #3089)

   Scope a subtree to a different elevation tier by adding a class.
   Inside the class, the *semantic* tokens (`--background`, `--border`,
   `--muted`, etc.) are re-declared to the tier's values — every nested
   element that reads `var(--background)` / `var(--border)` / etc. picks
   up the new tier automatically.

   Use cases:
     <div class="surface-primary-mode">   — modals, dialogs, sheets
     <div class="surface-secondary-mode"> — popovers, dropdowns, toasts

   Auxiliary is the global default (no class needed — it's what :root /
   .dark already set).

   Note: Nucleus's version also re-declares `--color-*` Tailwind @theme
   aliases. CC doesn't use Tailwind v4's @theme — components read
   `var(--background)` / `var(--border)` directly — so only the intent
   tokens need re-scoping here.
   ======================================== */
.surface-primary-mode {
  --background: var(--surface-primary-bg);
  --foreground: var(--surface-primary-fg);
  --card: var(--surface-primary-bg);
  --card-foreground: var(--surface-primary-fg);
  --popover: var(--surface-primary-bg);
  --popover-foreground: var(--surface-primary-fg);
  --border: var(--surface-primary-border);
  --input: var(--surface-primary-border);
  --muted: var(--surface-primary-subtle);
  --accent: var(--surface-primary-subtle);
  --secondary: var(--surface-primary-subtle);
  --neutral-subtle: var(--surface-primary-subtle);
}

.surface-secondary-mode {
  --background: var(--surface-secondary-bg);
  --foreground: var(--surface-secondary-fg);
  --card: var(--surface-secondary-bg);
  --card-foreground: var(--surface-secondary-fg);
  --popover: var(--surface-secondary-bg);
  --popover-foreground: var(--surface-secondary-fg);
  --border: var(--surface-secondary-border);
  --input: var(--surface-secondary-border);
  --muted: var(--surface-secondary-subtle);
  --accent: var(--surface-secondary-subtle);
  --secondary: var(--surface-secondary-subtle);
  --neutral-subtle: var(--surface-secondary-subtle);
}

/* ========================================
   ROOT VARIABLES - Light Mode (Default)
   ======================================== */
:root {
  /* Surface tiers (light): auxiliary = canvas, secondary lifts barely (slate-025) */
  --surface-auxiliary-bg: var(--color-neutral-000);
  --surface-auxiliary-fg: #1a202c;
  --surface-auxiliary-border: var(--color-slate-100);
  --surface-auxiliary-subtle: var(--color-slate-050);
  --surface-secondary-bg: var(--color-slate-025);
  --surface-secondary-fg: #1a202c;
  --surface-secondary-border: var(--color-slate-100);
  --surface-secondary-subtle: var(--color-slate-050);
  --surface-primary-bg: var(--color-neutral-000);
  --surface-primary-fg: #1a202c;
  --surface-primary-border: var(--color-slate-100);
  --surface-primary-subtle: var(--color-slate-025);
  --neutral-subtle: var(--color-slate-050);

  /* Color Palette - Light Mode */
  --background: var(--surface-auxiliary-bg);
  --foreground: #1a202c;
  --primary: #62D6E5;
  --primary-foreground: #091722;
  --secondary: var(--neutral-subtle);
  --secondary-foreground: #1e293b;
  --accent: var(--neutral-subtle);
  --accent-foreground: #1e293b;
  --border: var(--surface-auxiliary-border);
  --input: var(--surface-auxiliary-border);
  /* Focus ring inherits --control-accent (teal, ~4.6:1 on white) so
     focus halos sit in the same hue family as radios/checkboxes/links.
     Brand cyan #62D6E5 only hits 1.71:1 on white — fails WCAG AA.
     Dark-mode --ring stays brand cyan since cyan-on-dark already
     passes. */
  --ring: var(--control-accent);
  --destructive: #ef4444;
  --destructive-foreground: #f8fafc;
  --card: var(--surface-auxiliary-bg);
  --card-foreground: #1a202c;
  --popover: var(--surface-secondary-bg);
  --popover-foreground: #1a202c;
  --muted: var(--neutral-subtle);
  --muted-foreground: #64748b;

  /* Sidebar (light mode): slate-025 canvas, primary-tinted active state */
  --sidebar-bg: var(--surface-secondary-bg);
  --sidebar-foreground: var(--surface-secondary-fg);
  --sidebar-border: var(--surface-secondary-border);
  --sidebar-accent: color-mix(in srgb, var(--primary) 12%, transparent);
  --sidebar-accent-foreground: var(--surface-secondary-fg);

  /* Tenex Brand Colors */
  --brand: #62D6E5;
  --brand-foreground: #091722;
  --brandlight: #62D6E5;
  --branddark: #091722;

  /* Spacing & Sizing */
  --radius: 0.375rem;

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 16px;

  /* Page-level content max-width — applied via .app-page-max so add forms,
     wizards, and detail pages stay aligned. Change this once to update all. */
  --page-max-width: 75rem;
  /* Form-only variant — applied via .app-form-page-max on Add / wizard
     pages so they can be tuned independently of detail / list pages.
     Defaults to --page-max-width so nothing shifts until you change it. */
  --form-page-max-width: var(--page-max-width);
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* Z-Index Scale */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ========================================
   SEMANTIC COLOR VARIABLES
   (Utility aliases for common patterns)
   ======================================== */
:root {
  /* Button States */
  --button-bg: var(--primary);
  --button-fg: var(--primary-foreground);
  --button-border: var(--primary);
  --button-hover-bg: color-mix(in srgb, var(--primary) 85%, black);
  --button-focus-ring: var(--ring);

  /* Input States */
  --input-bg: var(--input);
  --input-fg: var(--foreground);
  --input-border: var(--border);
  --input-focus-ring: var(--ring);
  --input-placeholder: var(--muted-foreground);

  /* Navigation */
  --nav-bg: var(--card);
  --nav-fg: var(--card-foreground);
  --nav-border: var(--border);
  --nav-active-bg: var(--primary);
  --nav-active-fg: var(--primary-foreground);

  /* Status Colors — light mode. Both tokens darkened a step from
     Tailwind 500 to 600 so icon-on-white usage meets WCAG-AA (3:1 for
     UI components, 4.5:1 for the badge text that picks these up via
     color: var(--success|--warning)). Dark-mode variants stay lighter
     (defined under :root.dark) so contrast against dark bg holds. */
  --success: #059669;
  --success-foreground: #f0fdf4;
  --warning: #d97706;
  --warning-foreground: #fffbeb;
  --error: var(--destructive);
  --error-foreground: var(--destructive-foreground);
  --info: var(--primary);
  --info-foreground: var(--primary-foreground);

  /* Interactive control accent — used by .btn-link, radio, checkbox,
     switch, select check, and --ring (focus halo). Light mode uses a
     vivid teal (hsl(184 90% 35%), ~3.1:1 on white) that reads in the
     same hue family as brand --primary. Dark mode resets to brand cyan
     via :root.dark since cyan-on-dark already passes. CTA buttons keep
     --primary directly so the brand color still anchors primary
     actions. */
  --control-accent: #09a0ab;
  --control-accent-foreground: #ffffff;
  /* Darker shade of --control-accent for text use. The 3.1:1 contrast
     of --control-accent passes WCAG AA 3:1 for UI components but
     fails the 4.5:1 body-text threshold, so .btn-link reads from
     --control-accent-text instead (~4.9:1 on white). Dark mode resets
     to --primary in the dark-mode blocks since cyan-on-dark passes. */
  --control-accent-text: #067A83;
}

/* ========================================
   GLOBAL TYPOGRAPHY & STYLING
   ======================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

html {
  font-size: var(--font-size-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  background-color: var(--background);
  color: var(--foreground);
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
  transition: background-color var(--transition-base),
    color var(--transition-base);
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.125rem;
}

h5,
h6 {
  font-size: 1rem;
}

/* Buttons */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  font-family: inherit;
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition-base);
}

/* Links */
a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--primary);
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* Form Elements — mirrors Nucleus shadcn Input: h-9, text-sm, subtle bg + 3px/50% ring */
input,
textarea,
select {
  font-family: inherit;
  font-size: 0.875rem;          /* text-sm */
  height: 2.25rem;              /* h-9 = 36px */
  border: 1px solid var(--input);
  background-color: color-mix(in srgb, var(--input) 30%, transparent);
  color: var(--foreground);
  padding: 0.25rem 0.75rem;     /* py-1 px-3 */
  border-radius: var(--radius);
  outline: none;
  transition: border-color var(--transition-base),
    box-shadow var(--transition-base);
}

/* textareas need auto height since they wrap content */
textarea {
  height: auto;
  min-height: 2.25rem;
  padding: 0.5rem 0.75rem;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
}

input:disabled,
textarea:disabled,
select:disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.5;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted-foreground);
}

/* Tables */
table {
  border-collapse: collapse;
  width: 100%;
}

th {
  font-weight: var(--font-weight-semibold);
  text-align: left;
  padding: 0.75rem;
  border-bottom: 1px solid var(--border);
  background-color: var(--muted);
}

td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border);
  /* Unified row text size across every table in the app. !important so it
     wins over Tailwind utility classes like `text-sm` (14px) / `text-xs`
     (12px) that some templates apply directly to <td>s. */
  font-size: 0.8125rem !important;
}

/* Code Elements */
code,
pre {
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  background-color: var(--muted);
  color: var(--foreground);
  border-radius: var(--radius);
}

code {
  padding: 0.25rem 0.5rem;
  font-size: 0.875em;
}

pre {
  padding: 1rem;
  overflow-x: auto;
}

pre code {
  padding: 0;
  background-color: transparent;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Brand Colors */
.text-brand {
  color: var(--brand);
}

.bg-brand {
  background-color: var(--brand);
  color: var(--brand-foreground);
}

.border-brand {
  border-color: var(--brand);
}

/* Status Classes */
.text-success {
  color: var(--success);
}

.text-warning {
  color: var(--warning);
}

.text-error {
  color: var(--error);
}

.text-info {
  color: var(--info);
}

.bg-success {
  background-color: var(--success);
  color: var(--success-foreground);
}

.bg-warning {
  background-color: var(--warning);
  color: var(--warning-foreground);
}

.bg-error {
  background-color: var(--error);
  color: var(--error-foreground);
}

.bg-info {
  background-color: var(--info);
  color: var(--info-foreground);
}

/* Theme Toggle - No visual change, just capability */
.theme-light {
  --background: var(--color-neutral-000);
  --foreground: #1a202c;
}

.theme-dark {
  --background: var(--color-slate-950);
  --foreground: #f8fafc;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* High contrast mode support */
@media (prefers-contrast: more) {
  :root {
    --border: #0a0a0a;
    --muted: #e5e5e5;
  }

  :root.dark {
    --border: #ffffff;
    --muted: #2a2a2a;
  }
}

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

/* Focus visible for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* ========================================
   RESPONSIVE UTILITY
   ======================================== */

/* Container queries for better component styling */
@supports (container-type: inline-size) {
  :root {
    --container-sm: 20rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 42rem;
  }
}

/* ========================================
   DARK MODE - Using .dark Class Selector
   Surface tiers ordered darker→lighter: auxiliary (canvas, slate-950)
   → secondary (popover, slate-900) → primary (modal, slate-850).
   Borders sit two weight steps lighter than their tier's bg.
   ======================================== */
:root.dark,
.dark {
  /* Surface tiers (dark) */
  --surface-auxiliary-bg: var(--color-slate-950);
  --surface-auxiliary-fg: #f8fafc;
  --surface-auxiliary-border: var(--color-slate-800);
  --surface-auxiliary-subtle: var(--color-slate-900);
  --surface-secondary-bg: var(--color-slate-900);
  --surface-secondary-fg: #f8fafc;
  --surface-secondary-border: var(--color-slate-750);
  --surface-secondary-subtle: var(--color-slate-850);
  --surface-primary-bg: var(--color-slate-850);
  --surface-primary-fg: #f8fafc;
  --surface-primary-border: var(--color-slate-700);
  --surface-primary-subtle: var(--color-slate-800);
  --neutral-subtle: var(--color-slate-900);

  /* Color Palette - Dark Mode */
  --background: var(--surface-auxiliary-bg);
  --foreground: #f8fafc;
  --primary: #62D6E5;
  --primary-foreground: #091722;
  --secondary: var(--neutral-subtle);
  --secondary-foreground: #f8fafc;
  --accent: var(--neutral-subtle);
  --accent-foreground: #f8fafc;
  --border: var(--surface-auxiliary-border);
  --input: var(--surface-auxiliary-border);
  --ring: #62D6E5;
  --destructive: #fca5a5;
  --destructive-foreground: #7f1d1d;
  /* CC deviation from Nucleus post-PR #3089: cards lifted to secondary tier
     (slate-900) instead of matching canvas (slate-950). Nucleus leans on
     borders for delineation; CC had a visible card lift pre-port and users
     read the flat version as indistinct. Popover stays on secondary too. */
  --card: var(--surface-secondary-bg);
  --card-foreground: #f8fafc;
  --popover: var(--surface-secondary-bg);
  --popover-foreground: #f8fafc;
  --muted: var(--neutral-subtle);
  --muted-foreground: #cbd5e1;

  /* Sidebar (dark mode): matches canvas, primary-tinted active state */
  --sidebar-bg: var(--surface-auxiliary-bg);
  --sidebar-foreground: var(--surface-auxiliary-fg);
  --sidebar-border: var(--surface-auxiliary-border);
  --sidebar-accent: color-mix(in srgb, var(--primary) 15%, transparent);
  --sidebar-accent-foreground: var(--surface-auxiliary-fg);

  /* Status Colors - Dark Mode (lighter for readability on dark backgrounds) */
  --success: #34d399;
  --success-foreground: #064e3b;
  --warning: #fbbf24;
  --warning-foreground: #78350f;

  /* Control accent resets to brand cyan in dark mode — cyan-on-dark
     already meets WCAG AA without the darker shift used in light. */
  --control-accent: var(--primary);
  --control-accent-foreground: var(--primary-foreground);
  --control-accent-text: var(--primary);

  /* Tenex Brand Colors - Dark Mode */
  --brand: #62D6E5;
  --brand-foreground: #091722;
  --brandlight: #62D6E5;
  --branddark: #091722;
}

/* ========================================
   DARK MODE - Using @media Preference
   (Fallback for system preference)
   ======================================== */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    /* Surface tiers (dark) */
    --surface-auxiliary-bg: var(--color-slate-950);
    --surface-auxiliary-fg: #f8fafc;
    --surface-auxiliary-border: var(--color-slate-800);
    --surface-auxiliary-subtle: var(--color-slate-900);
    --surface-secondary-bg: var(--color-slate-900);
    --surface-secondary-fg: #f8fafc;
    --surface-secondary-border: var(--color-slate-750);
    --surface-secondary-subtle: var(--color-slate-850);
    --surface-primary-bg: var(--color-slate-850);
    --surface-primary-fg: #f8fafc;
    --surface-primary-border: var(--color-slate-700);
    --surface-primary-subtle: var(--color-slate-800);
    --neutral-subtle: var(--color-slate-900);

    /* Color Palette - Dark Mode */
    --background: var(--surface-auxiliary-bg);
    --foreground: #f8fafc;
    --primary: #62D6E5;
    --primary-foreground: #091722;
    --secondary: var(--neutral-subtle);
    --secondary-foreground: #f8fafc;
    --accent: var(--neutral-subtle);
    --accent-foreground: #f8fafc;
    --border: var(--surface-auxiliary-border);
    --input: var(--surface-auxiliary-border);
    --ring: #62D6E5;
    --destructive: #fca5a5;
    --destructive-foreground: #7f1d1d;
    /* CC deviation: cards lifted to secondary tier (slate-900) — see .dark block above */
    --card: var(--surface-secondary-bg);
    --card-foreground: #f8fafc;
    --popover: var(--surface-secondary-bg);
    --popover-foreground: #f8fafc;
    --muted: var(--neutral-subtle);
    --muted-foreground: #cbd5e1;

    /* Status Colors - Dark Mode (lighter for readability on dark backgrounds) */
    --success: #34d399;
    --success-foreground: #064e3b;
    --warning: #fbbf24;
    --warning-foreground: #78350f;

    /* Control accent resets to brand cyan in dark mode. */
    --control-accent: var(--primary);
    --control-accent-foreground: var(--primary-foreground);
    --control-accent-text: var(--primary);

    /* Tenex Brand Colors - Dark Mode */
    --brand: #62D6E5;
    --brand-foreground: #091722;
    --brandlight: #62D6E5;
    --branddark: #091722;
  }
}

/* ========================================
   LIGHT MODE - Explicit Override
   ======================================== */
:root.light {
  /* Surface tiers (light) */
  --surface-auxiliary-bg: var(--color-neutral-000);
  --surface-auxiliary-fg: #1a202c;
  --surface-auxiliary-border: var(--color-slate-100);
  --surface-auxiliary-subtle: var(--color-slate-050);
  --surface-secondary-bg: var(--color-slate-025);
  --surface-secondary-fg: #1a202c;
  --surface-secondary-border: var(--color-slate-100);
  --surface-secondary-subtle: var(--color-slate-050);
  --surface-primary-bg: var(--color-neutral-000);
  --surface-primary-fg: #1a202c;
  --surface-primary-border: var(--color-slate-100);
  --surface-primary-subtle: var(--color-slate-025);
  --neutral-subtle: var(--color-slate-050);

  /* Color Palette - Light Mode */
  --background: var(--surface-auxiliary-bg);
  --foreground: #1a202c;
  --primary: #62D6E5;
  --primary-foreground: #091722;
  --secondary: var(--neutral-subtle);
  --secondary-foreground: #1e293b;
  --accent: var(--neutral-subtle);
  --accent-foreground: #1e293b;
  --border: var(--surface-auxiliary-border);
  --input: var(--surface-auxiliary-border);
  /* Focus ring inherits --control-accent (teal, ~4.6:1 on white) so
     focus halos sit in the same hue family as radios/checkboxes/links.
     Brand cyan #62D6E5 only hits 1.71:1 on white — fails WCAG AA.
     Dark-mode --ring stays brand cyan since cyan-on-dark already
     passes. */
  --ring: var(--control-accent);
  --destructive: #ef4444;
  --destructive-foreground: #f8fafc;
  --card: var(--surface-auxiliary-bg);
  --card-foreground: #1a202c;
  --popover: var(--surface-secondary-bg);
  --popover-foreground: #1a202c;
  --muted: var(--neutral-subtle);
  --muted-foreground: #64748b;

  /* Tenex Brand Colors - Light Mode */
  --brand: #62D6E5;
  --brand-foreground: #091722;
  --brandlight: #62D6E5;
  --branddark: #091722;
}