/* Runtime semantic variables shared by styles.css and tokens.css */
:root {
    --background: var(--color-white);
    --foreground: var(--color-black);
    --muted: var(--color-gray-100);
    --muted-foreground: var(--color-gray-700);
    --popover: var(--color-white);
    --popover-foreground: var(--color-black);
    --border: var(--color-gray-200);
    --input: var(--color-gray-200);
    --card: var(--color-white);
    --card-foreground: var(--color-black);
    --primary: var(--color-black);
    --primary-foreground: var(--color-white);
    --secondary: var(--color-gray-200);
    --secondary-foreground: var(--color-black);
    --accent: var(--color-gray-100);
    --accent-foreground: var(--color-black);
    --destructive: var(--color-red-500);
    --destructive-foreground: var(--color-white);
    --ring: var(--color-gray-600);
    --surface-page: var(--color-white);
    --surface-panel: var(--color-white);
    --surface-panel-foreground: var(--color-black);
    --surface-elevated: var(--color-white);
    --surface-elevated-foreground: var(--color-black);
    --surface-elevated-2: var(--color-white);
    --surface-overlay: var(--color-white);
    --surface-overlay-foreground: var(--color-black);
    --modal-backdrop: rgb(98 109 121 / 0.2);
    --form-sheet-backdrop: rgb(98 109 121 / 0.08);
    --preview-canvas: var(--color-gray-50);
    --preview-gradient-start: var(--color-white);
    --preview-gradient-end: var(--color-gray-50);
    --surface-inverse: var(--color-black);
    --surface-inverse-foreground: var(--color-white);
    --text-primary: var(--color-black);
    --text-secondary: var(--color-gray-700);
    --text-tertiary: var(--color-gray-400);
    --text-inverse: var(--color-white);
    --border-subtle: var(--color-gray-200);
    --border-default: var(--color-gray-200);
    --border-strong: var(--color-gray-500);
    --focus-ring: var(--color-gray-600);
    --state-info: var(--color-blue-500);
    --state-info-foreground: var(--color-black);
    --state-success: var(--color-green-500);
    --state-success-foreground: var(--color-black);
    --state-warning: var(--color-yellow-500);
    --state-warning-foreground: var(--color-black);
    --state-danger: var(--color-red-500);
    --state-danger-foreground: var(--color-black);
    --control-height: 32px;
    --input-group-radius: 9px;
    --chart-1: hsl(201 100% 50%);
    --chart-2: hsl(201 88% 70%);
    --chart-3: hsl(201 85% 80%);
    --chart-4: hsl(201 82% 90%);
    --chart-5: hsl(201 87% 94%);
    --chart-gray: hsl(210 13% 88%);
    --chart-darkgray: hsl(210 13% 79%);
    --chart-rose: hsl(345 100% 56%);
    --chart-orange: hsl(25 100% 50%);
    --chart-amber: hsl(36 100% 50%);
    --chart-yellow: hsl(47 100% 50%);
    --chart-green: hsl(144 100% 39%);
    --chart-teal: hsl(174 100% 37%);
    --chart-blue: hsl(198 100% 51%);
    --chart-darkblue: hsl(226 91% 61%);
    --chart-purple: hsl(273 100% 64%);
    --sidebar-background: var(--color-gray-50);
    --sidebar-foreground: var(--color-black);
    --sidebar-primary: var(--color-black);
    --sidebar-primary-foreground: var(--color-white);
    --sidebar-accent: var(--color-gray-200);
    --sidebar-accent-foreground: var(--color-black);
    --sidebar-border: var(--color-gray-100);
    --sidebar-ring: var(--color-gray-600);
    --tab-hover: var(--color-gray-100);
    --tab-active: color-mix(in oklab, var(--color-gray-700) 10%, transparent);
    --button-hover: var(--color-gray-100);
    --interactive-hover: var(--button-hover);
    --control-surface: var(--surface-elevated);
    --control-border: var(--color-gray-200);
    --table-row-hover: var(--color-gray-50);
    --members-sticky-hover-bg: var(--table-row-hover);
    --mobile-navbar-height: 64px;
}

.dark {
    /* Less-saturated gray scale for dark mode (lightness + hue preserved, chroma halved again) */
    --color-gray-50: oklch(98.54% 0.0003 286.4);
    --color-gray-100: oklch(96.97% 0.0004 247.8);
    --color-gray-200: oklch(94.74% 0.0011 236.5);
    --color-gray-300: oklch(90.78% 0.0018 247.9);
    --color-gray-400: oklch(86.68% 0.0024 242.9);
    --color-gray-500: oklch(77.55% 0.0044 250.9);
    --color-gray-600: oklch(70.33% 0.0056 248.1);
    --color-gray-700: oklch(62.98% 0.0072 248.3);
    --color-gray-800: oklch(52.97% 0.0058 250.6);
    --color-gray-900: oklch(36.77% 0.0038 248.2);
    --color-gray-950: oklch(25.95% 0.0016 258.4);
    --color-grey-50: oklch(98.54% 0.0003 286.4);
    --color-grey-100: oklch(96.97% 0.0004 247.8);
    --color-grey-200: oklch(94.74% 0.0011 236.5);
    --color-grey-300: oklch(90.78% 0.0018 247.9);
    --color-grey-400: oklch(86.68% 0.0024 242.9);
    --color-grey-500: oklch(77.55% 0.0044 250.9);
    --color-grey-600: oklch(70.33% 0.0056 248.1);
    --color-grey-700: oklch(62.98% 0.0072 248.3);
    --color-grey-800: oklch(52.97% 0.0058 250.6);
    --color-grey-900: oklch(36.77% 0.0038 248.2);
    --color-grey-950: oklch(25.95% 0.0016 258.4);

    /* One-off colors (not in the standard color scale) */
    --color-sidebar-bg: oklch(0.204 0.004 258);

    --tab-hover: color-mix(in oklab, var(--color-gray-900) 30%, transparent);
    --tab-active: color-mix(in oklab, oklch(36.77% 0.006 248.2) 60%, transparent);
    --button-hover: color-mix(in oklab, var(--color-gray-900) 30%, transparent);
    --interactive-hover: var(--button-hover);
    --control-surface: transparent;
    --control-border: color-mix(in oklab, var(--color-gray-900) 70%, transparent);
    --table-row-hover: var(--color-sidebar-bg);
    --members-sticky-hover-bg: var(--table-row-hover);

    --background: oklch(0.178 0.003 271);
    --foreground: var(--color-gray-200);
    --muted: var(--color-gray-900);
    --muted-foreground: var(--color-gray-600);
    --accent: var(--color-gray-900);
    --accent-foreground: var(--color-gray-100);
    --popover: var(--color-sidebar-bg);
    --popover-foreground: var(--color-gray-400);
    --border: color-mix(in oklab, var(--color-gray-900) 50%, transparent);
    --input: var(--color-gray-900);
    --card: var(--background);
    --card-foreground: var(--color-gray-100);
    --primary: var(--color-gray-200);
    --primary-foreground: var(--color-black);
    --secondary: var(--color-gray-900);
    --secondary-foreground: var(--color-gray-100);
    --destructive: var(--color-red-500);
    --destructive-foreground: var(--color-gray-50);
    --ring: var(--color-gray-900);
    --surface-page: var(--color-black);
    --surface-panel: var(--color-black);
    --surface-panel-foreground: var(--color-gray-100);
    --surface-elevated: var(--color-sidebar-bg);
    --surface-elevated-foreground: var(--color-gray-100);
    --surface-elevated-2: oklch(0.235 0.004 260);
    --surface-overlay: var(--color-black);
    --surface-overlay-foreground: var(--color-gray-400);
    --preview-canvas: var(--color-black);
    --preview-gradient-start: var(--color-gray-950);
    --preview-gradient-end: var(--color-black);
    --surface-inverse: var(--color-white);
    --surface-inverse-foreground: var(--color-black);
    --text-primary: var(--color-gray-200);
    --text-secondary: var(--color-gray-400);
    --text-tertiary: var(--color-gray-500);
    --text-inverse: var(--color-black);
    --border-subtle: var(--color-gray-900);
    --border-default: var(--color-gray-950);
    --border-strong: var(--color-gray-700);
    --focus-ring: var(--color-gray-900);
    --state-info: var(--color-blue-400);
    --state-info-foreground: var(--color-black);
    --state-success: var(--color-green-400);
    --state-success-foreground: var(--color-black);
    --state-warning: var(--color-yellow-400);
    --state-warning-foreground: var(--color-black);
    --state-danger: var(--color-red-500);
    --state-danger-foreground: var(--color-black);
    --chart-1: hsl(201 100% 50%);
    --chart-2: hsl(201 88% 70%);
    --chart-3: hsl(201 85% 80%);
    --chart-4: hsl(201 82% 90%);
    --chart-5: hsl(201 87% 94%);
    --chart-gray: hsl(210 13% 55%);
    --sidebar-background: var(--color-sidebar-bg);
    --sidebar-foreground: var(--color-gray-500);
    --sidebar-primary: var(--color-gray-900);
    --sidebar-primary-foreground: var(--color-white);
    --sidebar-accent: var(--tab-active);
    --sidebar-accent-foreground: var(--color-gray-100);
    --sidebar-border: var(--border);
    --sidebar-ring: var(--color-gray-700);
}

/* Stronger shadows in dark mode — default Tailwind values use ~10% black alpha,
   which is essentially invisible against a dark page. Override --tw-shadow (not
   box-shadow) so Tailwind v4's composed `box-shadow: var(--tw-inset-shadow), ...,
   var(--tw-ring-shadow), var(--tw-shadow)` keeps the ring/focus layers intact. */
.dark .shadow-xs {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.15);
}
.dark .shadow-sm {
    --tw-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2);
}
.dark .shadow-md {
    --tw-shadow: 0 6px 12px -2px rgb(0 0 0 / 0.25), 0 3px 6px -3px rgb(0 0 0 / 0.25);
}
.dark .shadow-lg {
    --tw-shadow: 0 13px 22px -4px rgb(0 0 0 / 0.3), 0 6px 10px -5px rgb(0 0 0 / 0.3);
}
.dark .shadow-xl {
    --tw-shadow: 0 22px 34px -6px rgb(0 0 0 / 0.35), 0 10px 16px -8px rgb(0 0 0 / 0.35);
}
.dark .shadow-2xl {
    --tw-shadow: 0 30px 58px -12px rgb(0 0 0 / 0.4);
}
