:root {
  --accent:           #c8401a;
  --bg:               #F8F7F4;
  --color-text:           #1a1a1a;
  --color-text-muted:     #1a1a1a;
  --color-text-tertiary:  #8C8078;
  --color-border:         #e0ddd8;
  --color-border-tertiary: rgba(26,22,18,0.06);
  --color-white:      #ffffff;
  --font-heading:     'Bebas Neue', sans-serif;
  --font-body:        'Abel', 'Nunito Sans', sans-serif;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.5rem;
  --text-2xl:   2rem;
  --text-3xl:   3rem;
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;
  --radius: 0;
  --shadow: 0 2px 8px rgba(0,0,0,0.08);

  /* ── Layout tokens ──────────────────────────────────────── */
  /* Standard content-canvas width. Used by results, the setup
     wizard form, and the participant welcome / question pages.
     Intentional outliers (compare cards 960, info form 540,
     wizard progress chrome 960, intro screens 640) opt out. */
  --canvas-width: 900px;
  /* Templates flow canvas — used by templates/start + templates/confirm.
     Wider than --canvas-width so the per-section criterion cards have
     room on a 1440px+ display without losing readable line length on
     phones (the start/confirm CSS still pads + scales below this width). */
  --tpl-canvas-width: 1100px;

  /* ── Templates pill-toggle chrome ───────────────────────── */
  /* Single source for the .tpl-pill-toggle border-radius across
     templates/start.blade.php and templates/confirm.blade.php. Soft
     corners — visibly rounded but not capsule. Class definition
     itself lives in public/css/templates.css. */
  --tpl-pill-radius: 10px;

  /* ── Form / input tokens ────────────────────────────────── */
  --color-card-border:   #e5e7eb;
  --color-divider:       #f3f4f6;
  --color-section:       #9ca3af;
  --color-label:         #6b7280;
  --color-field-border:  #d1d5db;
  --color-error:         #ef4444;
  --color-preset-text:   #4b5563;
  --color-field-row-bg:  #fafafa;

  /* ── Brand accents ──────────────────────────────────────
     Canonical red + green used platform-wide for primary CTAs,
     positive/negative state, multi-section template headings,
     and results bar fills. --accent (red) is also used by the
     required-field marker, field-required asterisk, and ICE
     Impact criterion. --success (green) is also referenced from
     the navigation-button tokens below. Reference these tokens
     directly rather than re-hardcoding the hex values. */
  --success:   #7ab648;

  /* ── Navigation button tokens ──────────────────────────── */
  --bip-win:   var(--success);
  --bip-lose:  var(--accent);

  /* ── Results bar height ─────────────────────────────────
     Single source for the bar-track height used by every
     results template (ICE table, ICE breakdown grid, SWOT
     items, and any future template). Set by the ICE table
     bar size; SWOT and breakdown grid match it. Apply via
     var(--bar-height) on the track element — never
     hardcode a per-template override. */
  --bar-height: 13px;

  /* ── Template colour palette ────────────────────────────
     Canonical colours used by every results template. All
     template-specific colours live HERE — slot files,
     templates.css, and TemplateResultsBuilder must reference
     these tokens (e.g. var(--crit-impact)) rather than carry
     hex values directly. New templates add their own
     --<template>-<concept> tokens, referencing the --crit-*
     tokens where the colour is shared. Decision: D-CSS-colours. */

  /* ICE criterion colours — Impact / Confidence / Ease. The --crit-4
     slot extends the palette for decision-matrix templates that carry
     more than three criteria (e.g. MCA's five), so the 4th criterion
     never has to reach into a multi-section token to find a colour. */
  --crit-impact:        #c8401a;
  --crit-confidence:    #1d5fa0;
  --crit-ease:          #7a5200;
  --crit-4:             #4a7c59;

  /* Multi-section palette — positional tokens used by any template
     whose sections each carry their own item list (SWOT today, future
     equivalents). Names are position-indexed (1..4), not section-
     concept-named, because the rendering layer is index-driven and
     does not know whether a slot represents a SWOT quadrant or
     something else. Three slots reference the --crit-* tokens so a
     palette change to ICE propagates automatically. */
  --ms-1:               var(--crit-impact);
  --ms-2:               var(--crit-confidence);
  --ms-3:               var(--crit-4);
  --ms-4:               var(--crit-ease);
  --ms-5:               #6f4e7c;
  --ms-6:               #ca7e7e;

  /* SWOT quadrant colours — retained as setup-screen aliases. The
     multi-section results path no longer reads these; new code
     should reference --ms-* (results) or --crit-* (criteria) instead. */
  --swot-strengths:     var(--crit-impact);
  --swot-weaknesses:    var(--crit-confidence);
  --swot-opportunities: var(--crit-4);
  --swot-threats:       var(--crit-ease);
}

/* Standard content canvas — pairs the canvas-width token with the
   centering rule. Pages with extra inline padding/flex still set
   max-width directly via var(--canvas-width); use this class when
   max-width + margin auto is the entire wrapper rule. */
.canvas { max-width: var(--canvas-width, 900px); margin: 0 auto; }

/* Required-field marker — single source for the red asterisk that
   appears next to every required label across every form on the
   platform. Apply .field-required to the LABEL element (alongside
   any other label class like .field-label); ::after inserts the
   asterisk so the markup stays clean. Uses var(--accent) as the
   project's red token (defined above in :root).

   For mode-conditional required fields (e.g. group_name only required
   in Group mode), toggle the class with the field's visibility — never
   leave the asterisk on a hidden field. */
.field-required::after {
  content: " *";
  color: var(--accent);
}

/* Site footer — shared across every page that extends
   layouts/participant.blade.php. Single centred row of nav links
   above a muted copyright line, on the platform's dark ink. The
   hex literals (#1A1612 background, white-alpha link / copy
   colours) are local to the dark band — no light-mode equivalent
   exists in :root yet, so they live inline here rather than as
   tokens. */
.site-footer {
  background: #1A1612;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 28px 24px;
  margin-top: 48px;
  text-align: center;
}
.site-footer-nav {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px;
}
.site-footer-link {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.15s ease;
}
.site-footer-link:hover,
.site-footer-link:focus-visible {
  color: rgba(255,255,255,0.92);
}
.site-footer-copy {
  margin-top: 14px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.3);
}
@media (max-width: 480px) {
  .site-footer-nav { gap: 18px; }
}