/*
  MDE Design System — browser-ready design tokens
  GENERATED from MDE_DesignSystem_Tailwind (the design department's file). Do not
  edit by hand: regenerate from that file instead.

  The original is a Tailwind v4 build input. Browsers ignore `@theme`, `@source`
  and `@import "tailwindcss"`, so loaded as-is it defines no variables. This file
  is the same token set with exactly two mechanical changes:
    1. `@theme { ... }` became `:root { ... }`
    2. the Tailwind-only `@import` / `@source` lines were removed
  Every token name and value is unchanged, including the dark-mode overrides.

  Component classes from MDE_DesignSystem_Theme are deliberately NOT included:
  they cannot reach inside Lightning Web Components (shadow DOM), and generic
  names such as .card, .input, .field and .select would risk restyling
  Salesforce's own chat UI. Components use the tokens via var() instead.
*/

/*
  MDE Design System — Tailwind v4 Theme
  Maps MDE design tokens to Tailwind CSS custom properties.
*/

:root {
  /* ─── Typography ──────────────────────────────────────── */
  --font-base: "Mobile Youth Base", system-ui, sans-serif;
  --font-hero: "Mobile Youth Hero", system-ui, sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --text-pagetitle: 2rem; /* 32px */
  --text-headline-lg: 1.5rem; /* 24px */
  --text-headline-hero: 1.25rem; /* 20px */
  --text-headline: 1.25rem; /* 20px */
  --text-title: 1rem; /* 16px */
  --text-subtitle: 0.875rem; /* 14px */
  --text-label-lg: 1rem; /* 16px */
  --text-label: 0.875rem; /* 14px */
  --text-copy-lg: 1rem; /* 16px */
  --text-copy: 0.875rem; /* 14px */
  --text-meta: 0.75rem; /* 12px */

  --leading-pagetitle: 2.5rem;
  --leading-headline-lg: 2rem;
  --leading-headline-hero: 1.75rem;
  --leading-headline: 1.75rem;
  --leading-title: 1.25rem;
  --leading-subtitle: 1.25rem;
  --leading-label-lg: 1.5rem;
  --leading-label: 1.25rem;
  --leading-copy-lg: 1.5rem;
  --leading-copy: 1.25rem;
  --leading-meta: 1.25rem;

  /* ─── Spacing ─────────────────────────────────────────── */
  --spacing-none: 0px;
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-s: 8px;
  --spacing-sm: 12px;
  --spacing-m: 16px;
  --spacing-l: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --spacing-xxxl: 64px;

  /* ─── Border Radius ───────────────────────────────────── */
  --radius-form-sm: 6px;
  --radius-form: 8px;
  --radius-image: 8px;
  --radius-content: 12px;
  --radius-bg: 16px;
  --radius-full: 9999px;

  /* ─── Border Width ────────────────────────────────────── */
  --border-component: 1.5px;

  /* ─── Colors: Background ──────────────────────────────── */
  --color-bg-primary: #ffffff;
  --color-bg-highlight: #f5f7fa;
  --color-bg-secondary: #e6eaf0;
  --color-bg-contrast: #d5dae0;

  /* ─── Colors: Content (text) ──────────────────────────── */
  --color-content-lead: #1b1b21;
  --color-content-secondary: #5d616b;
  --color-content-silent: #7e838f;
  --color-content-on: #ffffff;

  /* ─── Colors: Action (orange) ─────────────────────────── */
  --color-action: #db3000;
  --color-action-on: #ffffff;
  --color-action-bg: #ffeee5;
  --color-action-content: #db3000;

  /* ─── Colors: Feature (purple) ────────────────────────── */
  --color-feature: #350051;
  --color-feature-on: #ffffff;
  --color-feature-bg: #f3deff;
  --color-feature-content: #350051;

  /* ─── Colors: Accent (blue) ───────────────────────────── */
  --color-accent: #465991;
  --color-accent-on: #ffffff;
  --color-accent-bg: #bad5ff;
  --color-accent-content: #344175;

  /* ─── Colors: Success ─────────────────────────────────── */
  --color-success: #35855a;
  --color-success-on: #ffffff;
  --color-success-bg: #e8fcf1;
  --color-success-content: #256141;

  /* ─── Colors: Warning ─────────────────────────────────── */
  --color-warning: #edc568;
  --color-warning-on: #000000;
  --color-warning-bg: #faeec8;
  --color-warning-content: #85550d;

  /* ─── Colors: Error ───────────────────────────────────── */
  --color-error: #ad2300;
  --color-error-on: #ffffff;
  --color-error-bg: #ffeee5;
  --color-error-content: #ad2300;

  /* ─── Colors: Clarity / Overlays ─────────────────────── */
  --color-translucent: #edeef0b2;
  --color-overlay: #0a0e1a47;
  --color-emphasise: #060c1f12;
  --color-picture-interface: #0a0d147a;
  --color-picture-overlay: #04060ae5;

  /* ─── Colors: Hover ───────────────────────────────────── */
  --color-hover-bg-primary: #f5f7fa;
  --color-hover-bg-highlight: #e6eaf0;
  --color-hover-bg-secondary: #d5dae0;
  --color-hover-bg-contrast: #b9bfc7;
  --color-hover-content-lead: #14141a;
  --color-hover-content-secondary: #42454f;
  --color-hover-content-silent: #5d616b;
  --color-hover-action-content: #ad2300;
  --color-hover-accent-content: #242c59;
  --color-hover-feature-content: #240038;
  --color-hover-success-content: #19422c;
  --color-hover-warning-content: #633c09;
  --color-hover-error-content: #801500;

  /* ─── Component: Button ───────────────────────────────── */
  --color-btn-primary-bg: #db3000;
  --color-btn-primary-border: #db3000;
  --color-btn-primary-label: #ffffff;
  --color-btn-highlight-bg: #350051;
  --color-btn-highlight-border: #350051;
  --color-btn-highlight-label: #ffffff;
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-border: #68298a;
  --color-btn-secondary-label: #4f166e;
  --color-btn-alert-bg: #801500;
  --color-btn-alert-border: #801500;
  --color-btn-alert-label: #ffffff;
  --color-btn-success-bg: #35855a;
  --color-btn-success-border: #35855a;
  --color-btn-success-label: #ffffff;
  --color-btn-disabled-bg: #e6eaf0;
  --color-btn-disabled-border: #9ea4ad;
  --color-btn-disabled-label: #7e838f;

  /* ─── Component: Input ────────────────────────────────── */
  --color-input-bg: #ffffff;
  --color-input-border: #7e838f;
  --color-input-disabled-bg: #f5f7fa;
  --color-input-disabled-border: #b9bfc7;
  --color-input-disabled-content: #9ea4ad;
  --color-input-error-bg: #ffeee5;
  --color-input-error-border: #801500;

  /* ─── Component: Field ────────────────────────────────── */
  --color-field-bg: #ffffff;
  --color-field-border: #b9bfc7;
  --color-field-active-border: #68298a;
  --color-field-disabled-bg: #f5f7fa;
  --color-field-disabled-border: #d5dae0;
  --color-field-error-bg: #ffeee5;
  --color-field-error-border: #ad2300;

  /* ─── Component: Select ───────────────────────────────── */
  --color-select-bg: #e6eaf0;
  --color-select-border: #7e838f;
  --color-select-error-bg: #ffeee5;
  --color-select-error-border: #801500;

  /* ─── Component: Check / Checkbox ────────────────────── */
  --color-check-bg: #ffffff;
  --color-check-border: #7e838f;
  --color-checked-bg: #350051;
  --color-checked-border: #350051;
  --color-checked-disabled-bg: #9ea4ad;
  --color-checked-error-bg: #ad2300;

  /* ─── Component: Focus ────────────────────────────────── */
  --color-focus-outline: #350051;

  /* ─── Component: Toggle ───────────────────────────────── */
  --color-toggle-bg: #7e838f;
  --color-toggle-handler: #ffffff;
  --color-toggle-active-bg: #350051;
  --color-toggle-success-bg: #35855a;

  /* ─── AI Palette ──────────────────────────────────────── */
  --color-ai-100: #bfd4ff;
  --color-ai-150: #91b4f2;
  --color-ai-200: #b5b2ff;
  --color-ai-250: #a7a6f7;
  --color-ai-300: #ac73e5;
  --color-ai-350: #9f70e0;
  --color-ai-400: #923ac1;
  --color-ai-450: #9153a6;
  --color-ai-500: #7c2a8c;
  --color-ai-550: #6c0d80;

  --color-ai-sec-100: #ebf4ff;
  --color-ai-sec-200: #e5e8ff;
  --color-ai-sec-300: #ece3fc;
  --color-ai-sec-400: #eadaed;
  --color-ai-sec-500: #381f4d;
  --color-ai-sec-600: #31165a;
  --color-ai-sec-700: #2a1659;
  --color-ai-sec-800: #1b234d;
}

/*
  ─── Color mode strategy ────────────────────────────────────
  LIGHT MODE = default. All --color-* variables above are the
  light values. No class or attribute needed on <html>.

  DARK MODE = opt-in. Add class="dark" OR data-theme="dark"
  to the <html> element. The overrides below replace only the
  values that differ — everything else inherits from light.

  DO NOT use Tailwind's `dark:` variant prefix — it conflicts
  with this setup. Use the CSS variables directly; they
  automatically switch when the .dark class is present.
  ────────────────────────────────────────────────────────── */
.dark,
[data-theme="dark"] {
  --color-bg-primary: #1b1b21;
  --color-bg-highlight: #14141a;
  --color-bg-secondary: #101014;
  --color-bg-contrast: #2a2b33;

  --color-content-lead: #e6eaf0;
  --color-content-secondary: #b9bfc7;
  --color-content-silent: #7e838f;

  --color-action-bg: #590900;
  --color-action-content: #ff6c3b;

  --color-feature: #68298a;
  --color-feature-bg: #350051;
  --color-feature-content: #e2abff;

  --color-accent-bg: #242c59;
  --color-accent-content: #bad5ff;

  --color-success-bg: #19422c;
  --color-success-content: #76c99c;

  --color-warning-bg: #452606;
  --color-warning-content: #e0a836;

  --color-error-bg: #590900;
  --color-error-content: #ff6c3b;

  --color-translucent: #101114b2;
  --color-overlay: #0a0d14a3;
  --color-emphasise: #ffffff1f;

  --color-hover-bg-primary: #2a2b33;
  --color-hover-bg-highlight: #1b1b21;
  --color-hover-bg-secondary: #14141a;
  --color-hover-bg-contrast: #5d616b;
  --color-hover-content-lead: #ffffff;
  --color-hover-content-secondary: #d5dae0;
  --color-hover-content-silent: #9ea4ad;
  --color-hover-accent-content: #d4e5ff;
  --color-hover-feature-content: #e9c5fc;
  --color-hover-success-content: #95d5b2;
  --color-hover-warning-content: #edc568;
  --color-hover-error-content: #ff8f66;

  --color-btn-highlight-bg: #68298a;
  --color-btn-highlight-border: #68298a;
  --color-btn-secondary-border: #975cb8;
  --color-btn-secondary-label: #e2abff;
  --color-btn-disabled-bg: #5d616b;
  --color-btn-disabled-border: #7e838f;
  --color-btn-disabled-label: #9ea4ad;

  --color-input-bg: #1b1b21;
  --color-input-disabled-bg: #2a2b33;
  --color-input-disabled-border: #42454f;
  --color-input-disabled-content: #5d616b;
  --color-input-error-bg: #380400;
  --color-input-error-border: #db3000;

  --color-field-bg: #1b1b21;
  --color-field-border: #42454f;
  --color-field-active-border: #975cb8;
  --color-field-disabled-bg: #42454f;
  --color-field-disabled-border: #42454f;
  --color-field-error-bg: #380400;
  --color-field-error-border: #db3000;

  --color-select-bg: #2a2b33;
  --color-select-error-bg: #380400;
  --color-select-error-border: #db3000;

  --color-check-bg: #1b1b21;
  --color-checked-bg: #975cb8;
  --color-checked-border: #975cb8;
  --color-checked-disabled-bg: #5d616b;
  --color-checked-error-bg: #db3000;

  --color-focus-outline: #e9c5fc;
  --color-toggle-active-bg: #975cb8;
}