/* Boff UI — Expressive & Accessibility Themes
 *
 * These four themes extend the light/dark base defined in semantic.css. They
 * are selected via `data-theme="<name>"` on the document root and live in the
 * `themes` CSS @layer (imported AFTER `brands` in tokens.css), so an expressive
 * theme may set its own accent (--color-action-primary-*) and win over the
 * per-brand accent. forest/ocean/sunset/high-contrast are all dark-family; the
 * host ThemeProvider also adds the Tailwind `.dark` class for them, so any
 * token a theme does NOT override inherits the dark base (and var()/color-mix
 * derived tokens — accent-soft, focus ring, shadow glow, back-compat aliases —
 * recompute automatically against the theme's accent).
 *
 * Rule: never change spacing, type scale, layout, or component behavior per
 * theme — only color/surface/elevation/glass/accent/focus.
 */

/* ============================ FOREST ============================ *
 * Immersive farm / nature. Deep green-charcoal surfaces, green accent. */
[data-theme='forest'] {
  color-scheme: dark;

  --color-bg-canvas: #0A130D;
  --color-bg-surface: #122019;
  --color-bg-elevated: #192C22;
  --color-bg-sunken: #060C09;
  --color-bg-inverse: #EDF6F0;
  --color-bg-overlay: rgba(4, 10, 7, 0.72);
  --color-bg-accent: #0E2A1B;
  --color-bg-accentSubtle: #0B3D26;
  --color-bg-disabled: #192C22;

  --color-text-primary: #EDF6F0;
  --color-text-secondary: #B0C7B9;
  --color-text-tertiary: #87A292;
  --color-text-muted: #87A292;
  --color-text-inverse: #0A130D;
  --color-text-link: #6EE7A8;
  --color-text-linkHover: #9CF0C2;
  --color-text-placeholder: #6A8576;
  --color-text-disabled: #56705F;

  --color-border-default: #294437;
  --color-border-subtle: #1B2E24;
  --color-border-strong: #3B5A49;

  /* Deeper green so WHITE button text is legible (vivid #22C55E only takes dark
   * text — which reads poorly on the saturated fill). #22C55E stays the chart/
   * accent-icon hue below. */
  --color-action-primary-bg: #15803D;
  --color-action-primary-bgHover: #1B9E4B;
  --color-action-primary-bgActive: #0F5C2E;
  --color-action-primary-bgDisabled: #1F3A2C;
  --color-action-primary-text: #FFFFFF;
  --color-action-primary-border: #15803D;

  --color-action-secondary-bg: #19271F;
  --color-action-secondary-bgHover: #21342A;
  --color-action-secondary-bgActive: #2A4234;
  --color-action-secondary-bgDisabled: #19271F;
  --color-action-secondary-text: #EDF6F0;
  --color-action-secondary-border: #294437;

  --color-action-ghost-bgHover: #19271F;
  --color-action-ghost-bgActive: #21342A;
  --color-action-ghost-text: #B0C7B9;

  --color-overlay-tooltipBg: #21342A;
  --color-overlay-popoverBg: #19271F;
  --color-surface-glass: rgba(18, 32, 25, 0.66);

  /* Brand accent palette follows the theme accent in expressive themes, so
   * components that used the vibecontrols purple now adopt the theme hue. */
  --color-accent-purple: var(--color-action-primary-bg);
  --color-accent-purple-hover: var(--color-action-primary-bgHover);
  --color-accent-purple-subtle: var(--color-accent-soft);

  --color-chart-1: #22C55E;
  --color-chart-2: #2DD4BF;
  --color-chart-positive: #34D399;
}

/* ============================ OCEAN ============================ *
 * Analytical / calm. Deep blue surfaces, blue accent. */
[data-theme='ocean'] {
  color-scheme: dark;

  --color-bg-canvas: #091018;
  --color-bg-surface: #10192A;
  --color-bg-elevated: #182740;
  --color-bg-sunken: #060B12;
  --color-bg-inverse: #EEF3FB;
  --color-bg-overlay: rgba(3, 8, 16, 0.72);
  --color-bg-accent: #0E2440;
  --color-bg-accentSubtle: #0B335C;
  --color-bg-disabled: #182740;

  --color-text-primary: #EEF3FB;
  --color-text-secondary: #AAB9CE;
  --color-text-tertiary: #8493AB;
  --color-text-muted: #8493AB;
  --color-text-inverse: #091018;
  --color-text-link: #7AB6FF;
  --color-text-linkHover: #A8CFFF;
  --color-text-placeholder: #687893;
  --color-text-disabled: #586278;

  --color-border-default: #233246;
  --color-border-subtle: #172333;
  --color-border-strong: #34465E;

  --color-action-primary-bg: #2563EB;
  --color-action-primary-bgHover: #3B82F6;
  --color-action-primary-bgActive: #1D4ED8;
  --color-action-primary-bgDisabled: #1B2D4A;
  --color-action-primary-text: #FFFFFF;
  --color-action-primary-border: #2563EB;

  --color-action-secondary-bg: #16243A;
  --color-action-secondary-bgHover: #1E3150;
  --color-action-secondary-bgActive: #26406A;
  --color-action-secondary-bgDisabled: #16243A;
  --color-action-secondary-text: #EEF3FB;
  --color-action-secondary-border: #233246;

  --color-action-ghost-bgHover: #16243A;
  --color-action-ghost-bgActive: #1E3150;
  --color-action-ghost-text: #AAB9CE;

  --color-overlay-tooltipBg: #1E3150;
  --color-overlay-popoverBg: #182740;
  --color-surface-glass: rgba(16, 25, 42, 0.66);

  --color-accent-purple: var(--color-action-primary-bg);
  --color-accent-purple-hover: var(--color-action-primary-bgHover);
  --color-accent-purple-subtle: var(--color-accent-soft);

  --color-chart-1: #3B82F6;
  --color-chart-2: #22D3EE;
  --color-chart-positive: #34D399;
}

/* ============================ SUNSET ============================ *
 * Warm / energetic. Plum-warm surfaces, orange accent. */
[data-theme='sunset'] {
  color-scheme: dark;

  --color-bg-canvas: #15101C;
  --color-bg-surface: #20182A;
  --color-bg-elevated: #2C2138;
  --color-bg-sunken: #0F0B16;
  --color-bg-inverse: #F6EEF3;
  --color-bg-overlay: rgba(12, 7, 18, 0.72);
  --color-bg-accent: #3A1E12;
  --color-bg-accentSubtle: #4A2410;
  --color-bg-disabled: #2C2138;

  --color-text-primary: #F6EEF3;
  --color-text-secondary: #C8B6C6;
  --color-text-tertiary: #A290A0;
  --color-text-muted: #A290A0;
  --color-text-inverse: #15101C;
  --color-text-link: #FBA56A;
  --color-text-linkHover: #FDC9A0;
  --color-text-placeholder: #82707F;
  --color-text-disabled: #6B5C69;

  --color-border-default: #3A2C44;
  --color-border-subtle: #251B30;
  --color-border-strong: #4E3C5A;

  /* Deeper orange so WHITE button text is legible (vivid #F97316 only takes
   * dark text). #F97316 stays the chart/accent-icon hue below. */
  --color-action-primary-bg: #C2410C;
  --color-action-primary-bgHover: #EA580C;
  --color-action-primary-bgActive: #9A3412;
  --color-action-primary-bgDisabled: #45301F;
  --color-action-primary-text: #FFFFFF;
  --color-action-primary-border: #C2410C;

  --color-action-secondary-bg: #271B30;
  --color-action-secondary-bgHover: #33243F;
  --color-action-secondary-bgActive: #3F2D4E;
  --color-action-secondary-bgDisabled: #271B30;
  --color-action-secondary-text: #F6EEF3;
  --color-action-secondary-border: #3A2C44;

  --color-action-ghost-bgHover: #271B30;
  --color-action-ghost-bgActive: #33243F;
  --color-action-ghost-text: #C8B6C6;

  --color-overlay-tooltipBg: #33243F;
  --color-overlay-popoverBg: #2C2138;
  --color-surface-glass: rgba(32, 24, 42, 0.66);

  --color-accent-purple: var(--color-action-primary-bg);
  --color-accent-purple-hover: var(--color-action-primary-bgHover);
  --color-accent-purple-subtle: var(--color-accent-soft);

  --color-chart-1: #F97316;
  --color-chart-2: #FB7185;
  --color-chart-positive: #34D399;
}

/* ======================= HIGH CONTRAST ======================= *
 * Accessibility-first. Pure black/white, vivid green accent, yellow focus.
 * No translucency / blur (solid surfaces for maximum legibility). */
[data-theme='high-contrast'] {
  color-scheme: dark;

  --color-bg-canvas: #000000;
  --color-bg-surface: #0A0A0A;
  --color-bg-elevated: #141414;
  --color-bg-sunken: #000000;
  --color-bg-inverse: #FFFFFF;
  --color-bg-overlay: rgba(0, 0, 0, 0.85);
  --color-bg-accent: #052E16;
  --color-bg-accentSubtle: #06351A;
  --color-bg-disabled: #1A1A1A;

  --color-text-primary: #FFFFFF;
  --color-text-secondary: #EDEDED;
  --color-text-tertiary: #D4D4D4;
  --color-text-muted: #D4D4D4;
  --color-text-inverse: #000000;
  --color-text-link: #6FB3FF;
  --color-text-linkHover: #A8D1FF;
  --color-text-placeholder: #BFBFBF;
  --color-text-disabled: #8A8A8A;

  --color-border-default: #6B6B6B;
  --color-border-subtle: #4A4A4A;
  --color-border-strong: #9A9A9A;
  --color-border-hover: #9A9A9A;

  --color-action-primary-bg: #00E676;
  --color-action-primary-bgHover: #4DFF9D;
  --color-action-primary-bgActive: #00C853;
  --color-action-primary-bgDisabled: #1A1A1A;
  --color-action-primary-text: #000000;
  --color-action-primary-border: #00E676;

  --color-action-secondary-bg: #1A1A1A;
  --color-action-secondary-bgHover: #262626;
  --color-action-secondary-bgActive: #333333;
  --color-action-secondary-bgDisabled: #1A1A1A;
  --color-action-secondary-text: #FFFFFF;
  --color-action-secondary-border: #6B6B6B;

  --color-action-ghost-bgHover: #1A1A1A;
  --color-action-ghost-bgActive: #262626;
  --color-action-ghost-text: #EDEDED;

  --color-action-danger-bg: #FF453A;
  --color-action-danger-bgHover: #FF6961;
  --color-action-danger-bgActive: #E0352B;
  --color-action-danger-text: #000000;
  --color-action-danger-border: #FF453A;

  --color-status-success-bg: #00C853;
  --color-status-success-bgSubtle: #052E16;
  --color-status-success-text: #4DFF9D;
  --color-status-success-border: #00C853;
  --color-status-warning-bg: #FFB300;
  --color-status-warning-bgSubtle: #2E2305;
  --color-status-warning-text: #FFE000;
  --color-status-warning-border: #FFB300;
  --color-status-error-bg: #FF453A;
  --color-status-error-bgSubtle: #2E0606;
  --color-status-error-text: #FF8A80;
  --color-status-error-border: #FF453A;
  --color-status-info-bg: #2196F3;
  --color-status-info-bgSubtle: #06243A;
  --color-status-info-text: #6FB3FF;
  --color-status-info-border: #2196F3;

  --color-overlay-scrim: rgba(0, 0, 0, 0.85);
  --color-overlay-tooltipBg: #141414;
  --color-overlay-tooltipText: #FFFFFF;
  --color-overlay-popoverBg: #141414;

  --color-chart-1: #00E676;
  --color-chart-2: #29B6F6;
  --color-chart-3: #FFEE58;
  --color-chart-4: #FF7043;
  --color-chart-5: #EC407A;
  --color-chart-grid: #4A4A4A;
  --color-chart-axis: #BFBFBF;
  --color-chart-positive: #4DFF9D;
  --color-chart-negative: #FF8A80;

  /* Solid surfaces — no glass/blur in high contrast */
  --color-surface-glass: #0A0A0A;
  --color-border-glass: #6B6B6B;
  --blur-glass: 0px;

  /* Brand accent palette follows the theme accent (solid, no translucency) */
  --color-accent-purple: #00E676;
  --color-accent-purple-hover: #4DFF9D;
  --color-accent-purple-subtle: #06351A;

  /* Vivid yellow focus ring */
  --color-focus-ring: #FFFF00;
  --shadow-focus: 0 0 0 3px rgba(255, 255, 0, 0.55);

  /* Boff UI 2.0 — high-contrast HARD-disables glass/gloss/glow/3D (a11y) */
  --gradient-gloss-card: none;
  --gradient-accent-wash: none;
  --gradient-hero-mesh: none;
  --shadow-pop: var(--shadow-elevation-2); /* opaque, no accent glow rim */
  --shadow-pop-hover: var(--shadow-elevation-3);
  --shadow-glow: var(--shadow-elevation-3);
  --color-border-seam: var(--color-border-strong); /* solid, fully visible */
  --color-surface-glass: var(--color-bg-elevated); /* opaque */
  --blur-glass: 0px;
  --pop-lift-y: 0px; /* no 3D lift */
}