/* Semantic Tokens - Light Mode
 * Design system tokens for consistent theming across the application.
 * Includes backward compatibility aliases for legacy token names.
 */
:root {
  --color-bg-canvas: #F9FAFB;
  --color-bg-surface: #FFFFFF;
  --color-bg-elevated: #FFFFFF;
  --color-bg-sunken: #F3F4F6;
  --color-bg-inverse: #111827;
  --color-bg-overlay: rgba(0, 0, 0, 0.4);
  --color-bg-accent: #EFF6FF;
  --color-bg-accentSubtle: #EFF6FF;
  --color-bg-disabled: #F3F4F6;
  --color-text-primary: #111827;
  --color-text-secondary: #4B5563;
  --color-text-tertiary: #6B7280;
  --color-text-muted: #6B7280;
  --color-text-inverse: #FFFFFF;
  --color-text-link: #2563EB;
  --color-text-linkHover: #1D4ED8;
  --color-text-placeholder: #9CA3AF;
  --color-text-disabled: #9CA3AF;
  --color-border-default: #D1D5DB;
  --color-border-subtle: #E5E7EB;
  --color-border-strong: #9CA3AF;
  --color-action-primary-bg: #2563EB;
  --color-action-primary-bgHover: #1D4ED8;
  --color-action-primary-bgActive: #1E40AF;
  --color-action-primary-bgDisabled: #D1D5DB;
  --color-action-primary-text: #FFFFFF;
  --color-action-primary-border: #2563EB;
  --color-action-secondary-bg: #F3F4F6;
  --color-action-secondary-bgHover: #E5E7EB;
  --color-action-secondary-bgActive: #D1D5DB;
  --color-action-secondary-bgDisabled: #F3F4F6;
  --color-action-secondary-text: #111827;
  --color-action-secondary-border: #D1D5DB;
  --color-action-ghost-bgHover: #F3F4F6;
  --color-action-ghost-bgActive: #E5E7EB;
  --color-action-ghost-text: #374151;
  --color-action-danger-bg: #DC2626;
  --color-action-danger-bgHover: #B91C1C;
  --color-action-danger-bgActive: #991B1B;
  --color-action-danger-bgDisabled: #D1D5DB;
  --color-action-danger-text: #FFFFFF;
  --color-action-danger-border: #DC2626;
  --color-status-success-bg: #059669;
  --color-status-success-bgSubtle: #D1FAE5;
  --color-status-success-text: #065F46;
  --color-status-success-border: #6EE7B7;
  --color-status-warning-bg: #EAB308;
  --color-status-warning-bgSubtle: #FEF9C3;
  --color-status-warning-text: #854D0E;
  --color-status-warning-border: #FDE047;
  --color-status-error-bg: #DC2626;
  --color-status-error-bgSubtle: #FEE2E2;
  --color-status-error-text: #991B1B;
  --color-status-error-border: #FCA5A5;
  --color-status-info-bg: #2563EB;
  --color-status-info-bgSubtle: #DBEAFE;
  --color-status-info-text: #1E40AF;
  --color-status-info-border: #93C5FD;
  --color-overlay-scrim: rgba(0, 0, 0, 0.4);
  --color-overlay-tooltipBg: #111827;
  --color-overlay-tooltipText: #FFFFFF;
  --color-overlay-popoverBg: #FFFFFF;
  --color-chart-1: #3B82F6;
  --color-chart-2: #10B981;
  --color-chart-3: #A855F7;
  --color-chart-4: #EAB308;
  --color-chart-5: #EF4444;
  --color-chart-6: #93C5FD;
  --color-chart-7: #22C55E;
  --color-chart-8: #D8B4FE;
  --color-chart-9: #FDE047;
  --color-chart-10: #FCA5A5;
  --color-chart-11: #6EE7B7;
  --color-chart-12: #1D4ED8;
  --color-chart-grid: #E5E7EB;
  --color-chart-axis: #9CA3AF;
  --color-chart-positive: #059669;
  --color-chart-negative: #DC2626;
  --font-family-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-family-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-family-mono: 'Fira Code', 'Roboto Mono', 'Courier New', monospace;
  --font-size-body-sm: 14px;
  --font-size-body-md: 16px;
  --font-size-body-lg: 18px;
  --font-size-heading-h1: 36px;
  --font-size-heading-h2: 30px;
  --font-size-heading-h3: 24px;
  --font-size-heading-h4: 20px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-lineHeight-tight: 1.25;
  --font-lineHeight-normal: 1.5;
  --font-lineHeight-relaxed: 1.75;
  --space-pagePadding: 24px;
  --space-sectionGap: 32px;
  --space-cardPadding: 16px;
  --space-formGap: 16px;
  --space-controlGap: 8px;
  --space-listGap: 8px;
  --space-inlineGap: 8px;
  --space-iconGap: 8px;
  --size-controlHeight-sm: 36px;
  --size-controlHeight-md: 40px;
  --size-controlHeight-lg: 48px;
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 24px;
  --size-icon-xl: 32px;
  /* Boff UI: softer modern geometry */
  --radius-card: 12px;
  --radius-button: 8px;
  --radius-input: 8px;
  /* Light-mode elevation — layered, soft, neutral-slate tinted */
  --shadow-elevation-0: none;
  --shadow-elevation-1: 0 1px 2px 0 rgba(15, 23, 42, 0.06), 0 1px 3px -1px rgba(15, 23, 42, 0.08);
  --shadow-elevation-2: 0 2px 4px -1px rgba(15, 23, 42, 0.07), 0 8px 16px -6px rgba(15, 23, 42, 0.10);
  --shadow-elevation-3: 0 8px 20px -6px rgba(15, 23, 42, 0.12), 0 16px 32px -12px rgba(15, 23, 42, 0.12);
  --shadow-elevation-4: 0 16px 32px -10px rgba(15, 23, 42, 0.16), 0 24px 56px -20px rgba(15, 23, 42, 0.18);
  --shadow-elevation-5: 0 24px 56px -16px rgba(15, 23, 42, 0.22), 0 40px 88px -32px rgba(15, 23, 42, 0.24);
  --shadow-focus: 0 0 0 3px color-mix(in oklab, var(--color-action-primary-bg) 28%, transparent);
  /* Boff UI semantic elevation aliases (used by redesigned surfaces) */
  --shadow-card: var(--shadow-elevation-1);
  --shadow-float: var(--shadow-elevation-3);
  --shadow-overlay: var(--shadow-elevation-5);
  --shadow-glow: 0 0 0 1px color-mix(in oklab, var(--color-action-primary-bg) 28%, transparent), 0 10px 28px -10px color-mix(in oklab, var(--color-action-primary-bg) 30%, transparent);
  /* Boff UI glass + accent wash + focus ring (theme-aware) */
  --color-surface-glass: rgba(255, 255, 255, 0.72);
  --color-border-glass: rgba(15, 23, 42, 0.08);
  --color-accent-soft: color-mix(in oklab, var(--color-action-primary-bg) 10%, transparent);
  --color-accent-softHover: color-mix(in oklab, var(--color-action-primary-bg) 16%, transparent);
  --color-focus-ring: var(--color-action-primary-bg);
  --blur-glass: 16px;
  /* Boff UI 2.0 — gloss finish, accent washes, 3D-pop shadow, seam border (theme-aware) */
  --gradient-gloss-card: linear-gradient(
    180deg,
    var(--gloss-sheen-light) 0%,
    transparent 38%,
    transparent 82%,
    var(--gloss-rim-light) 100%
  );
  --gradient-accent-wash: linear-gradient(
    135deg,
    color-mix(in oklab, var(--color-action-primary-bg) 14%, transparent),
    color-mix(in oklab, var(--color-action-primary-bg) 4%, transparent)
  );
  --gradient-hero-mesh: radial-gradient(
    120% 120% at 0% 0%,
    color-mix(in oklab, var(--color-action-primary-bg) 12%, transparent),
    transparent 60%
  );
  --color-brand-primary: var(--color-action-primary-bg);
  --color-brand-secondary: var(--color-action-primary-bgHover);
  /* 3D-pop composite: elevation float + accent-tinted 1px glow rim, ONE token */
  --shadow-pop: var(--shadow-float),
    0 0 0 1px color-mix(in oklab, var(--color-action-primary-bg) 14%, transparent);
  /* Hover state of --shadow-pop — INTENSIFIES (keeps the float, adds accent glow)
   * so cards highlight on hover WITHOUT moving and WITHOUT losing their shadow. */
  --shadow-pop-hover: var(--shadow-float),
    0 0 0 1px color-mix(in oklab, var(--color-action-primary-bg) 26%, transparent),
    0 12px 32px -10px color-mix(in oklab, var(--color-action-primary-bg) 28%, transparent);
  /* Visible-but-subtle theme-aware seam border for seamless chrome edges */
  --color-border-seam: color-mix(in oklab, var(--color-border-subtle) 72%, transparent);
  /* Accent color tokens */
  --color-accent-blue: #2563EB;
  --color-accent-blue-hover: #1D4ED8;
  --color-accent-blue-subtle: #EFF6FF;
  --color-accent-purple: #9333EA;
  --color-accent-purple-hover: #7E22CE;
  --color-accent-purple-subtle: #FAF5FF;
  --color-accent-teal: #0D9488;
  --color-accent-teal-hover: #0F766E;
  --color-accent-teal-subtle: #F0FDFA;
  --color-accent-indigo: #4F46E5;
  --color-accent-indigo-hover: #4338CA;
  --color-accent-indigo-subtle: #EEF2FF;
  /* Semantic aliases */
  --color-bg-muted: var(--color-bg-sunken);
  --color-border-hover: var(--color-border-strong);
  /* Status hover tokens */
  --color-status-success-text-hover: #047857;
  --color-status-warning-text-hover: #713F12;
  --color-status-error-text-hover: #7F1D1D;
  /* Backward compatibility aliases */
  --color-background-base: var(--color-bg-surface);
  --color-border-primary: var(--color-border-default);
  --color-accent-primary: var(--color-action-primary-bg);
  --color-accent-primary-hover: var(--color-action-primary-bgHover);
  --color-status-success: var(--color-status-success-bg);
  --color-status-success-subtle: var(--color-status-success-bgSubtle);
  --color-status-error: var(--color-status-error-bg);
  --color-status-error-subtle: var(--color-status-error-bgSubtle);
  --color-status-warning: var(--color-status-warning-bg);
  --color-status-warning-subtle: var(--color-status-warning-bgSubtle);
  --color-status-info: var(--color-status-info-bg);
  --color-status-info-subtle: var(--color-status-info-bgSubtle);
}

/* Semantic Tokens - Dark Mode - Auto-generated */
/* Supports both data-theme attribute and Tailwind .dark class */
[data-theme="dark"],
.dark,
:root.dark {
  /* Boff UI dark family — deep blue-charcoal with clear elevation steps */
  --color-bg-canvas: #0A0E16;
  --color-bg-surface: #121826;
  --color-bg-elevated: #1B2333;
  --color-bg-sunken: #070A11;
  --color-bg-inverse: #F9FAFB;
  --color-bg-overlay: rgba(3, 6, 12, 0.72);
  --color-bg-accent: #172554;
  --color-bg-accentSubtle: #1E3A8A;
  --color-bg-disabled: #1B2333;
  --color-text-primary: #F4F6FB;
  --color-text-secondary: #AEB6C5;
  --color-text-tertiary: #8B94A6;
  --color-text-muted: #8B94A6;
  --color-text-inverse: #111827;
  --color-text-link: #7AB6FF;
  --color-text-linkHover: #A8CFFF;
  --color-text-placeholder: #6B7587;
  --color-text-disabled: #5A6377;
  --color-border-default: #2A3343;
  --color-border-subtle: #1C2433;
  --color-border-strong: #3C4759;
  --color-action-primary-bg: #2563EB;
  --color-action-primary-bgHover: #1D4ED8;
  --color-action-primary-bgActive: #1E40AF;
  --color-action-primary-bgDisabled: #374151;
  --color-action-primary-text: #FFFFFF;
  --color-action-primary-border: #2563EB;
  --color-action-secondary-bg: #1F2937;
  --color-action-secondary-bgHover: #374151;
  --color-action-secondary-bgActive: #4B5563;
  --color-action-secondary-bgDisabled: #1F2937;
  --color-action-secondary-text: #F9FAFB;
  --color-action-secondary-border: #374151;
  --color-action-ghost-bgHover: #1F2937;
  --color-action-ghost-bgActive: #374151;
  --color-action-ghost-text: #D1D5DB;
  --color-action-danger-bg: #DC2626;
  --color-action-danger-bgHover: #B91C1C;
  --color-action-danger-bgActive: #991B1B;
  --color-action-danger-bgDisabled: #374151;
  --color-action-danger-text: #FFFFFF;
  --color-action-danger-border: #DC2626;
  --color-status-success-bg: #059669;
  --color-status-success-bgSubtle: #022C22;
  --color-status-success-text: #6EE7B7;
  --color-status-success-border: #047857;
  --color-status-warning-bg: #CA8A04;
  --color-status-warning-bgSubtle: #422006;
  --color-status-warning-text: #FDE047;
  --color-status-warning-border: #A16207;
  --color-status-error-bg: #DC2626;
  --color-status-error-bgSubtle: #450A0A;
  --color-status-error-text: #FCA5A5;
  --color-status-error-border: #B91C1C;
  --color-status-info-bg: #2563EB;
  --color-status-info-bgSubtle: #172554;
  --color-status-info-text: #93C5FD;
  --color-status-info-border: #1D4ED8;
  --color-overlay-scrim: rgba(0, 0, 0, 0.7);
  --color-overlay-tooltipBg: #374151;
  --color-overlay-tooltipText: #FFFFFF;
  --color-overlay-popoverBg: #1F2937;
  --color-chart-1: #60A5FA;
  --color-chart-2: #34D399;
  --color-chart-3: #C084FC;
  --color-chart-4: #FACC15;
  --color-chart-5: #F87171;
  --color-chart-6: #2563EB;
  --color-chart-7: #4ADE80;
  --color-chart-8: #9333EA;
  --color-chart-9: #CA8A04;
  --color-chart-10: #DC2626;
  --color-chart-11: #059669;
  --color-chart-12: #93C5FD;
  --color-chart-grid: #1F2937;
  --color-chart-axis: #4B5563;
  --color-chart-positive: #34D399;
  --color-chart-negative: #F87171;
  /* Accent color tokens - dark mode */
  --color-accent-blue: #60A5FA;
  --color-accent-blue-hover: #93C5FD;
  --color-accent-blue-subtle: #172554;
  --color-accent-purple: #C084FC;
  --color-accent-purple-hover: #D8B4FE;
  --color-accent-purple-subtle: #581C87;
  --color-accent-teal: #2DD4BF;
  --color-accent-teal-hover: #5EEAD4;
  --color-accent-teal-subtle: #042F2E;
  --color-accent-indigo: #818CF8;
  --color-accent-indigo-hover: #A5B4FC;
  --color-accent-indigo-subtle: #312E81;
  /* Boff UI dark elevation — deeper ambient + faint top highlight so cards
   * read as lifted on dark surfaces (light-mode shadows are invisible here) */
  --shadow-elevation-1: 0 1px 0 0 rgba(255, 255, 255, 0.03), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-elevation-2: 0 1px 0 0 rgba(255, 255, 255, 0.03), 0 10px 24px -8px rgba(0, 0, 0, 0.5);
  --shadow-elevation-3: 0 1px 0 0 rgba(255, 255, 255, 0.04), 0 18px 44px -12px rgba(0, 0, 0, 0.56);
  --shadow-elevation-4: 0 1px 0 0 rgba(255, 255, 255, 0.04), 0 28px 64px -16px rgba(0, 0, 0, 0.62);
  --shadow-elevation-5: 0 1px 0 0 rgba(255, 255, 255, 0.05), 0 40px 96px -24px rgba(0, 0, 0, 0.7);
  --shadow-card: var(--shadow-elevation-1);
  --shadow-float: var(--shadow-elevation-3);
  --shadow-overlay: var(--shadow-elevation-5);
  --shadow-glow: 0 0 0 1px color-mix(in oklab, var(--color-action-primary-bg) 36%, transparent), 0 12px 32px -10px color-mix(in oklab, var(--color-action-primary-bg) 40%, transparent);
  /* Boff UI glass + accent wash + focus ring - dark mode */
  --color-surface-glass: rgba(20, 27, 41, 0.66);
  --color-border-glass: rgba(255, 255, 255, 0.08);
  --color-accent-soft: color-mix(in oklab, var(--color-action-primary-bg) 22%, transparent);
  --color-accent-softHover: color-mix(in oklab, var(--color-action-primary-bg) 30%, transparent);
  --color-focus-ring: var(--color-action-primary-bg);
  /* Boff UI 2.0 — dark gloss finish (sheen/rim flip; color-mix gradients recompute) */
  --gradient-gloss-card: linear-gradient(
    180deg,
    var(--gloss-sheen-dark) 0%,
    transparent 40%,
    transparent 84%,
    var(--gloss-rim-dark) 100%
  );
  /* Semantic aliases - dark mode */
  --color-bg-muted: var(--color-bg-sunken);
  --color-border-hover: var(--color-border-strong);
  /* Status hover tokens - dark mode */
  --color-status-success-text-hover: #34D399;
  --color-status-warning-text-hover: #FDE047;
  --color-status-error-text-hover: #FCA5A5;
  /* Backward compatibility aliases */
  --color-background-base: var(--color-bg-surface);
  --color-border-primary: var(--color-border-default);
  --color-accent-primary: var(--color-action-primary-bg);
  --color-accent-primary-hover: var(--color-action-primary-bgHover);
  --color-status-success: var(--color-status-success-bg);
  --color-status-success-subtle: var(--color-status-success-bgSubtle);
  --color-status-error: var(--color-status-error-bg);
  --color-status-error-subtle: var(--color-status-error-bgSubtle);
  --color-status-warning: var(--color-status-warning-bg);
  --color-status-warning-subtle: var(--color-status-warning-bgSubtle);
  --color-status-info: var(--color-status-info-bg);
  --color-status-info-subtle: var(--color-status-info-bgSubtle);
}

/* Compact Density - Auto-generated */
[data-density="compact"] {
  --space-pagePadding: 16px;
  --space-sectionGap: 24px;
  --space-cardPadding: 12px;
  --space-formGap: 12px;
  --space-controlGap: 4px;
  --space-listGap: 4px;
  --space-inlineGap: 4px;
  --space-iconGap: 4px;
  --size-controlHeight-sm: 32px;
  --size-controlHeight-md: 34px;
  --size-controlHeight-lg: 40px;
}

/* Boff UI Spacious Density — touch-friendly / public-facing screens */
[data-density="spacious"] {
  --space-pagePadding: 32px;
  --space-sectionGap: 40px;
  --space-cardPadding: 20px;
  --space-formGap: 20px;
  --space-controlGap: 12px;
  --space-listGap: 12px;
  --space-inlineGap: 12px;
  --space-iconGap: 10px;
  --size-controlHeight-sm: 40px;
  --size-controlHeight-md: 44px;
  --size-controlHeight-lg: 52px;
}

/* Large Typography Scale - Auto-generated */
[data-typography="large"] {
  --font-size-body-sm: 16px;
  --font-size-body-md: 18px;
  --font-size-body-lg: 20px;
  --font-size-heading-h1: 42px;
  --font-size-heading-h2: 36px;
  --font-size-heading-h3: 28px;
  --font-size-heading-h4: 24px;
}

/* Boff UI Small Typography Scale — dense power-user screens */
[data-typography="small"] {
  --font-size-body-sm: 13px;
  --font-size-body-md: 14px;
  --font-size-body-lg: 16px;
  --font-size-heading-h1: 30px;
  --font-size-heading-h2: 24px;
  --font-size-heading-h3: 20px;
  --font-size-heading-h4: 18px;
}