/* ==========================================================================
   Team Discovery Coach : design tokens
   Version 1.0
   Single source of truth for color, radius, spacing and type.
   Rule: no hard-coded hex value anywhere else in the codebase.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Brand primitives
   Raw brand values. Never referenced directly by components.
   Components read the semantic tokens in section 2 and 3 only.
   -------------------------------------------------------------------------- */
:root {
  --brand-navy: #25318D;
  --brand-orange: #FF6816;
  --brand-blue: #434BE7;
  --brand-gray: #F2F2F2;
}

/* --------------------------------------------------------------------------
   2. Semantic tokens : light mode (default)
   -------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  /* Surfaces */
  --surface-page: #F2F2F2;
  --surface-card: #FFFFFF;
  --surface-subtle: #EEF0FA;   /* selected rows, alternating table fills */
  --surface-overlay: rgba(37, 49, 141, 0.45); /* modal scrim, navy tinted */

  /* Text */
  --text-primary: #25318D;     /* headings, labels          11.0:1 on card */
  --text-body: #2E3348;        /* paragraphs                12.4:1 on card */
  --text-secondary: #6B7191;   /* hints, metadata            4.8:1 on card */
  --text-disabled: #A4A8BE;
  --text-on-dark: #FFFFFF;

  /* Borders */
  --border: #D8DAE5;
  --border-strong: #B9BDD0;
  --border-selected: #25318D;

  /* Interactive */
  --interactive: #434BE7;       /* links, focus               6.2:1 */
  --interactive-hover: #3038C4;
  --interactive-subtle: #EEF0FA;

  /* Accent : fills and signals only, never body text */
  --accent: #FF6816;            /* 2.9:1 on white : not a text color */
  --accent-hover: #E85A0E;
  --accent-text: #C2410C;       /* use when text must be orange  5.2:1 */
  --on-accent: #2A1002;         /* text placed on an accent fill */

  /* Primary action */
  --action-primary-bg: #25318D;
  --action-primary-bg-hover: #1B2570;
  --action-primary-text: #FFFFFF;

  /* States */
  --danger: #C4271F;
  --danger-bg: #FDECEA;
  --success: #0F7A5A;
  --success-bg: #E7F5F0;

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(67, 75, 231, 0.28);

  /* Charts : categorical sequence, colorblind safe (blue vs orange) */
  --chart-1: #25318D;
  --chart-2: #FF6816;
  --chart-3: #434BE7;
  --chart-4: #7C83F0;
  --chart-5: #FFA366;
  --chart-6: #8A90A8;
}

/* --------------------------------------------------------------------------
   3. Semantic tokens : dark mode
   Not an inversion. Brand hues are lightened so they stay legible,
   elevation is expressed by lighter surfaces instead of shadows.
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --surface-page: #0E1120;
  --surface-card: #171B2E;
  --surface-subtle: #1E2340;
  --surface-overlay: rgba(6, 8, 18, 0.65);

  --text-primary: #EDEFF7;      /* 15.1:1 on card, never pure white */
  --text-body: #DDE0EE;
  --text-secondary: #9AA0BD;    /* 6.0:1 on card */
  --text-disabled: #656C8C;
  --text-on-dark: #EDEFF7;

  --border: #2A2F49;
  --border-strong: #3B4166;
  --border-selected: #6E77FF;

  --interactive: #8E95FF;       /* 6.8:1 on card */
  --interactive-hover: #A9AEFF;
  --interactive-subtle: #1E2340;

  --accent: #FF8442;            /* 7.4:1 on card */
  --accent-hover: #FF9861;
  --accent-text: #FFA366;
  --on-accent: #2A1002;

  /* In dark mode the primary action flips to the accent :
     contrast is measured against a dark surface, so it becomes viable. */
  --action-primary-bg: #FF8442;
  --action-primary-bg-hover: #FF9861;
  --action-primary-text: #2A1002;

  --danger: #FF6B63;
  --danger-bg: #33161A;
  --success: #3DC79E;
  --success-bg: #10312B;

  --focus-ring: 0 0 0 3px rgba(142, 149, 255, 0.32);

  --chart-1: #8E95FF;
  --chart-2: #FF8442;
  --chart-3: #6E77FF;
  --chart-4: #B4B9FF;
  --chart-5: #FFB183;
  --chart-6: #7B819E;
}

/* --------------------------------------------------------------------------
   4. Shape, spacing, type
   Mode independent.
   -------------------------------------------------------------------------- */
:root {
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --text-display: 32px;
  --text-title: 24px;
  --text-heading: 18px;
  --text-body-size: 16px;
  --text-label: 14px;
  --text-caption: 13px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --leading-tight: 1.25;
  --leading-normal: 1.6;

  --duration: 160ms;
  --easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   5. Automatic dark mode when the user has made no explicit choice
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-page: #0E1120;
    --surface-card: #171B2E;
    --surface-subtle: #1E2340;
    --surface-overlay: rgba(6, 8, 18, 0.65);
    --text-primary: #EDEFF7;
    --text-body: #DDE0EE;
    --text-secondary: #9AA0BD;
    --text-disabled: #656C8C;
    --text-on-dark: #EDEFF7;
    --border: #2A2F49;
    --border-strong: #3B4166;
    --border-selected: #6E77FF;
    --interactive: #8E95FF;
    --interactive-hover: #A9AEFF;
    --interactive-subtle: #1E2340;
    --accent: #FF8442;
    --accent-hover: #FF9861;
    --accent-text: #FFA366;
    --on-accent: #2A1002;
    --action-primary-bg: #FF8442;
    --action-primary-bg-hover: #FF9861;
    --action-primary-text: #2A1002;
    --danger: #FF6B63;
    --danger-bg: #33161A;
    --success: #3DC79E;
    --success-bg: #10312B;
    --focus-ring: 0 0 0 3px rgba(142, 149, 255, 0.32);
    --chart-1: #8E95FF;
    --chart-2: #FF8442;
    --chart-3: #6E77FF;
    --chart-4: #B4B9FF;
    --chart-5: #FFB183;
    --chart-6: #7B819E;
  }
}

/* --------------------------------------------------------------------------
   6. Base component rules
   Copy into the app stylesheet, or keep here as the shared layer.
   -------------------------------------------------------------------------- */
body {
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--leading-normal);
}

h1, h2, h3, h4, h5 {
  color: var(--text-primary);
  line-height: var(--leading-tight);
  font-weight: var(--weight-semibold);
}

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

:focus-visible {
  outline: 2px solid var(--interactive);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

.card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-4);
}

.btn-primary {
  background: var(--action-primary-bg);
  color: var(--action-primary-text);
  border: none;
  border-radius: var(--radius-control);
  padding: 10px 20px;
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--duration) var(--easing);
}
.btn-primary:hover { background: var(--action-primary-bg-hover); }

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  padding: 10px 20px;
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.btn-secondary:hover { background: var(--surface-subtle); }

.progress-track {
  height: 6px;
  background: var(--surface-page);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
[data-theme="dark"] .progress-track { background: #262B45; }

.progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width var(--duration) var(--easing);
}

.option-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: var(--space-3);
  cursor: pointer;
}
.option-card:hover { border-color: var(--border-strong); }
.option-card[aria-selected="true"],
.option-card.is-selected {
  border: 2px solid var(--border-selected);
  background: var(--surface-subtle);
  padding: calc(var(--space-3) - 1px);
}

.badge-accent {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
}

.field {
  background: var(--surface-card);
  color: var(--text-body);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 10px 12px;
  font-size: var(--text-label);
  width: 100%;
}
.field:focus {
  border-color: var(--interactive);
  box-shadow: var(--focus-ring);
  outline: none;
}
.field[aria-invalid="true"] { border-color: var(--danger); }

.field-error {
  color: var(--danger);
  font-size: var(--text-caption);
  margin-top: var(--space-1);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}