/* ---------- Theme Tokens ---------- */
/*
   Two layers:
   1. `:root` — global tokens consumed by the builders and as defaults elsewhere.
   2. `.survey-body`, `.trainee-report` — form-scoped default theme (PCL light mode).

   Named themes (ocean / forest / amber) inject over the form-scoped layer via
   inline <style> in live_forms.html and trainee_report_fragment.html, sourced
   from static/src/shared/palettes.js.
*/

:root {
  /* ── Surface / text (builder UI — dark mode) ── */
  --bg: #1f1f1f;
  --bg-rgb: 31 31 31;
  --card: #2a2a2a;
  --text: #eaeaea;
  --muted: #b5b5b5;

  /* ── Accent ── */
  --accent: #6aa6ff;
  --accent-hover: #5a96ef;
  --accent-text: #0b6274;
  --text-on-accent: #0b0b0b;

  /* ── Borders ── */
  --border: #3a3a3a;
  --border-light: #333;

  /* ── Inputs ── */
  --input-bg: #222;
  --input-bg-focus: #262626;
  --input-border: #3a3a3a;
  --input-border-focus: #4a4a4a;
  --placeholder: #8a8a8a;

  /* ── Feedback ── */
  --danger: #e89894;
  --error: #e89894;
  --disabled: #666;

  /* ── Radii ── */
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 10px;
  --radius-full: 9999px;

  /* ── Layout ── */
  --gap: 24px;

  /* ── Shadows ── */
  --shadow-card:       0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-button:     0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-modal:      0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-focus-ring: 0 0 0 3px;

  /* ── Typography ── */
  --type-display-size: 2.5rem;          /* 40px */
  --type-display-weight: 700;
  --type-display-line: 1.2;
  --type-display-spacing: -0.02em;

  --type-form-title-size: 2rem;         /* 32px */
  --type-form-title-weight: 700;
  --type-form-title-line: 1.25;
  --type-form-title-spacing: -0.015em;

  --type-section-title-size: 1.5rem;    /* 24px */
  --type-section-title-weight: 700;
  --type-section-title-line: 1.3;
  --type-section-title-spacing: -0.01em;

  --type-question-size: 1.125rem;       /* 18px */
  --type-question-weight: 400;
  --type-question-line: 1.4;

  --type-label-size: 0.875rem;          /* 14px */
  --type-label-weight: 400;
  --type-label-line: 1.5;

  --type-helper-size: 0.8125rem;        /* 13px */
  --type-helper-weight: 400;
  --type-helper-line: 1.4;

  --type-score-large-size: 4rem;        /* 64px */
  --type-score-large-weight: 700;
  --type-score-large-line: 1;
  --type-score-large-spacing: -0.02em;

  --type-button-size: 0.9375rem;        /* 15px */
  --type-button-weight: 400;
  --type-button-line: 1;

  --type-body-size: 1rem;               /* 16px */
  --type-body-weight: 400;
  --type-body-line: 1.6;

  /* ── Spacing scale (4px base) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ── Motion ── */
  --duration-fast:    120ms;
  --duration-base:    150ms;
  --duration-slow:    180ms;
  --duration-slower:  250ms;
  --easing-standard:    cubic-bezier(0.4, 0, 0.2, 1);
  --easing-emphasized:  cubic-bezier(0.4, 0, 0, 1);
  --easing-decelerate:  cubic-bezier(0, 0, 0.2, 1);
  --easing-accelerate:  cubic-bezier(0.4, 0, 1, 1);
}

@media (max-width: 600px) {
  :root {
    --type-display-size:       1.875rem;  /* 30px — was 40px */
    --type-form-title-size:    1.5rem;    /* 24px — was 32px */
    --type-section-title-size: 1.25rem;   /* 20px — was 24px */
    --type-score-large-size:   2.5rem;    /* 40px — was 64px */
  }
}

/* ── Form-scoped default theme (PCL brand, light mode) ── */
.survey-body,
.trainee-report {
  --form-bg:                  #ffffff;
  --form-shadow:              #f5f5f5;
  --form-card:                #f9f9f9;
  --form-field:               #ffffff;
  --form-accent:              #6aa6ff;
  --form-accent-hover:        #5a96ef;
  --form-input:               #ffffff;
  --form-input-border:        #d4d4d4;
  --form-input-border-focus:  #6aa6ff;
  --form-text:                #0a0a0a;
  --form-muted:               #666666;
  --form-placeholder:         #999999;
  --form-hover-bg:            rgba(106, 166, 255, 0.04);
  --form-selected-bg:         rgba(106, 166, 255, 0.08);
  --form-border:              #e5e5e5;
  --form-border-strong:       #d4d4d4;
}