/* ==========================================================================
   rally.css — Rally Form design token layer + shared shell (spec 11, P4-T1)
   --------------------------------------------------------------------------
   ONE token system (colour, type, spacing, motion) applied across the three
   surfaces at three intensities: projector maximal, phone tactile, host calm.
   Must load AFTER Bootstrap so the overrides win the cascade (base.html ties
   it after the CDN stylesheet). No remote fonts, no CDN of any kind here.

   Contents
     1. Token layer (:root) — colour / type / spacing / radius / motion
     2. Base shell (body, headings, links, selection)
     3. Bootstrap 5 dark override (buttons, cards, forms, focus rings,
        tables, alerts, badges) — so it does not read as stock Bootstrap
     4. Reduced-motion — neutralises the motion tokens (durations -> 0),
        keeps every element interactive (spec 11 'the test').
   ========================================================================== */

/* ---- 1. Token layer ------------------------------------------------------ */

:root {
  /* 1.1 Colour — saturated, bright, confident dark stage + vivid accents. */
  --rf-bg-0: #0c0916;                     /* deepest stage */
  --rf-bg-1: #150f26;                     /* mid stage */
  --rf-bg-2: #241a3a;                     /* top glow (phone) */
  --rf-bg-2-hi: #2a1c4a;                  /* top glow (projector) */
  --rf-ink: #f2eefb;                      /* primary ink */
  --rf-ink-strong: #ffffff;               /* headline ink */
  --rf-ink-hi: #e9e3ff;                   /* option/button ink */
  --rf-ink-soft: #d7cff7;                 /* chip/metadata ink */
  --rf-ink-body: #cfc6ee;                 /* body-copy ink */
  --rf-muted: #b9aef0;                    /* muted ink */
  --rf-muted-dim: #8a80b8;                /* dimmed / placeholders */
  --rf-surface-0: #131021;                /* inset / input / track */
  --rf-surface-1: #1d1730;                /* card surface */
  --rf-surface-2: #221b38;                /* raised chip surface */
  --rf-surface-3: #3b2a72;                /* raised/selected surface */
  --rf-wash-1: rgba(255, 255, 255, 0.04); /* card wash */
  --rf-wash-2: rgba(255, 255, 255, 0.06); /* track wash */
  --rf-wash-3: rgba(255, 255, 255, 0.09); /* hairline wash */
  --rf-wash-4: rgba(255, 255, 255, 0.12); /* strong hairline */
  --rf-wash-5: rgba(255, 255, 255, 0.14); /* focus/lead wash */
  --rf-line-1: rgba(255, 255, 255, 0.06); /* fine divider */
  --rf-line-2: rgba(255, 255, 255, 0.08); /* standard divider */
  --rf-border-1: #342957;                 /* quiet border */
  --rf-border-2: #3a2f5e;                 /* loud border */
  --rf-accent-violet: #8a5cff;            /* primary action accent */
  --rf-accent-violet-deep: #4c2f9e;       /* pressed / selected */
  --rf-accent-violet-soft: #c5b8ff;       /* soft violet ink */
  --rf-accent-amethyst: #b890ff;          /* highlight violet */
  --rf-accent-amber: #ffd166;
  --rf-accent-coral: #ff8a5c;
  --rf-accent-rose: #ff5c8a;
  --rf-accent-teal: #3fd6c9;
  --rf-success: #7be3a0;
  --rf-danger: #ff7d8f;
  --rf-glow-violet: rgba(138, 92, 255, 0.35);
  --rf-shadow-1: rgba(0, 0, 0, 0.4);

  /* 1.2 Type — display face (theatrical, legible at 50 ft), body face (clean
     system stack, local-only / offline-capable) + size/weight/line-height. */
  --rf-font-display: "Trebuchet MS", "Arial Rounded MT Bold", ui-rounded,
    "Segoe UI", system-ui, sans-serif;
  --rf-font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
    Roboto, Arial, sans-serif;

  --rf-fs-xs: 12px;      /* post-author */
  --rf-fs-sm: 13px;      /* labels / counts */
  --rf-fs-md: 15px;      /* body / context */
  --rf-fs-lg: 16px;      /* options / buttons */
  --rf-fs-xl: 18px;      /* leads / numbers */
  --rf-fs-2xl: 22px;     /* cohort labels */
  --rf-fs-3xl: 26px;     /* phone prompt */
  --rf-fs-4xl: 56px;     /* projector prompt */
  --rf-fs-code: 20px;    /* room code (phone) */
  --rf-fs-hero: 92px;    /* lobby code (projector) */

  --rf-fw-normal: 400;
  --rf-fw-semibold: 600;
  --rf-fw-bold: 700;
  --rf-fw-heavy: 800;

  --rf-lh-tight: 1.1;
  --rf-lh-snug: 1.25;
  --rf-lh-body: 1.4;
  --rf-lh-relaxed: 1.55;
  --rf-lh-loose: 1.6;

  /* 1.3 Spacing scale */
  --rf-space-1: 4px;
  --rf-space-2: 8px;
  --rf-space-3: 12px;
  --rf-space-4: 16px;
  --rf-space-5: 20px;
  --rf-space-6: 24px;
  --rf-space-7: 40px;
  --rf-space-8: 56px;

  /* 1.4 Radius */
  --rf-radius-sm: 8px;
  --rf-radius-md: 12px;
  --rf-radius-lg: 14px;
  --rf-radius-xl: 18px;
  --rf-radius-2xl: 28px;
  --rf-radius-full: 999px;

  /* 1.5 Motion — named durations + curling easings (spec 11: ease with
     character, never linear). */
  --rf-dur-0: 0ms;
  --rf-dur-fast: 120ms;   /* press / micro feedback */
  --rf-dur-med: 260ms;    /* hover / state swaps */
  --rf-dur-slow: 520ms;   /* breathing / fills / arrivals */
  --rf-ease-snap: cubic-bezier(0.2, 0.8, 0.2, 1);     /* quick + decisive */
  --rf-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);   /* springy overshoot */
  --rf-ease-settle: cubic-bezier(0.22, 1, 0.36, 1);   /* decelerate + land */
  --rf-ease-breathe: ease-in-out;                     /* ambient idle */
}

/* ---- 2. Base shell -------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--rf-font-body);
  background-color: var(--rf-bg-0);
  color: var(--rf-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--rf-font-display); letter-spacing: 0.01em; }

a { color: var(--rf-accent-violet-soft); }
a:hover { color: var(--rf-accent-violet); }

::selection { background: var(--rf-accent-violet); color: var(--rf-ink-strong); }

/* ---- 3. Bootstrap 5 dark override ----------------------------------------- */

/* Buttons — rounded, branded, press-responsive (spec 11: reward the tap). */
.btn {
  font-family: var(--rf-font-body);
  font-weight: var(--rf-fw-semibold);
  border-width: 2px;
  border-radius: var(--rf-radius-lg);
  transition:
    transform var(--rf-dur-fast) var(--rf-ease-snap),
    background-color var(--rf-dur-med) var(--rf-ease-snap),
    border-color var(--rf-dur-med) var(--rf-ease-snap),
    color var(--rf-dur-med) var(--rf-ease-snap),
    box-shadow var(--rf-dur-med) var(--rf-ease-snap);
}
.btn:active { transform: scale(0.96); }

.btn-primary {
  --bs-btn-bg: var(--rf-accent-violet);
  --bs-btn-border-color: var(--rf-accent-violet);
  --bs-btn-hover-bg: var(--rf-accent-violet-deep);
  --bs-btn-hover-border-color: var(--rf-accent-violet-deep);
  --bs-btn-active-bg: var(--rf-accent-violet-deep);
  --bs-btn-active-border-color: var(--rf-accent-violet);
  --bs-btn-disabled-bg: var(--rf-accent-violet);
  --bs-btn-disabled-border-color: var(--rf-accent-violet);
  --bs-btn-color: var(--rf-ink-strong);
  --bs-btn-hover-color: var(--rf-ink-strong);
  --bs-btn-active-color: var(--rf-ink-strong);
  --bs-btn-focus-shadow-rgb: 138, 92, 255;
}

.btn-secondary,
.btn-outline-secondary {
  --bs-btn-color: var(--rf-ink-soft);
  --bs-btn-bg: var(--rf-surface-0);
  --bs-btn-border-color: var(--rf-border-2);
  --bs-btn-hover-bg: var(--rf-surface-1);
  --bs-btn-hover-border-color: var(--rf-accent-violet);
  --bs-btn-hover-color: var(--rf-ink-strong);
  --bs-btn-active-bg: var(--rf-surface-3);
  --bs-btn-active-border-color: var(--rf-accent-violet);
  --bs-btn-active-color: var(--rf-ink-strong);
  --bs-btn-focus-shadow-rgb: 138, 92, 255;
}

.btn-success {
  --bs-btn-bg: var(--rf-success);
  --bs-btn-border-color: var(--rf-success);
  --bs-btn-color: #10241a;
  --bs-btn-hover-bg: #5fd889;
  --bs-btn-hover-border-color: #5fd889;
  --bs-btn-active-bg: var(--rf-bg-1);
  --bs-btn-active-border-color: var(--rf-success);
  --bs-btn-active-color: var(--rf-success);
  --bs-btn-focus-shadow-rgb: 123, 227, 160;
}

.btn-warning {
  --bs-btn-bg: var(--rf-accent-amber);
  --bs-btn-border-color: var(--rf-accent-amber);
  --bs-btn-color: #261a04;
  --bs-btn-hover-bg: #f5c34e;
  --bs-btn-hover-border-color: #f5c34e;
  --bs-btn-active-bg: var(--rf-bg-1);
  --bs-btn-active-border-color: var(--rf-accent-amber);
  --bs-btn-active-color: var(--rf-accent-amber);
  --bs-btn-focus-shadow-rgb: 255, 209, 102;
}

.btn-danger {
  --bs-btn-bg: var(--rf-danger);
  --bs-btn-border-color: var(--rf-danger);
  --bs-btn-color: #32111a;
  --bs-btn-hover-bg: #ff90a0;
  --bs-btn-hover-border-color: #ff90a0;
  --bs-btn-active-bg: var(--rf-bg-1);
  --bs-btn-active-border-color: var(--rf-danger);
  --bs-btn-active-color: var(--rf-danger);
  --bs-btn-focus-shadow-rgb: 255, 125, 143;
}

.btn-outline-primary,
.btn-outline-success,
.btn-outline-info {
  --bs-btn-color: var(--rf-ink-soft);
  --bs-btn-border-color: var(--rf-border-2);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--rf-surface-1);
  --bs-btn-hover-border-color: var(--rf-accent-violet);
  --bs-btn-hover-color: var(--rf-ink-strong);
  --bs-btn-active-bg: var(--rf-surface-3);
  --bs-btn-active-border-color: var(--rf-accent-violet);
  --bs-btn-active-color: var(--rf-ink-strong);
  --bs-btn-focus-shadow-rgb: 138, 92, 255;
}

/* Cards — lit surfaces, generous radius. */
.card {
  --bs-card-bg: var(--rf-surface-1);
  --bs-card-border-color: var(--rf-border-1);
  --bs-card-cap-bg: var(--rf-surface-2);
  --bs-card-color: var(--rf-ink);
  border-radius: var(--rf-radius-xl);
  border-width: 1px;
}

/* Forms — dark insets with a brand glow on focus. */
.form-control,
.form-select {
  background-color: var(--rf-surface-0);
  border: 2px solid var(--rf-border-1);
  color: var(--rf-ink);
  border-radius: var(--rf-radius-md);
}
.form-control::placeholder { color: var(--rf-muted-dim); }
.form-control:focus,
.form-select:focus,
.form-control:focus-visible,
.form-select:focus-visible {
  background-color: var(--rf-surface-1);
  color: var(--rf-ink);
  border-color: var(--rf-accent-violet);
  box-shadow: 0 0 0 0.25rem var(--rf-glow-violet);
  outline: none;
}
.form-label { color: var(--rf-ink-soft); }
.form-text { color: var(--rf-muted); }

/* Focus rings — one brand-glow signature everywhere (accessibility). */
.btn:focus-visible,
.form-check-input:focus,
.form-check-input:focus-visible,
input:focus-visible:not(:focus),
a:focus-visible,
button:focus-visible:not(.rf-option):not(.rf-btn):not(.rf-stepper-btn) {
  outline: 3px solid var(--rf-accent-violet);
  outline-offset: 2px;
  box-shadow: 0 0 0 0.35rem var(--rf-glow-violet);
}

/* Tables — calm, tabular numbers for the admin reads. */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--rf-ink-soft);
  --bs-table-striped-color: var(--rf-ink-soft);
  --bs-table-hover-color: var(--rf-ink-strong);
  --bs-table-striped-bg: var(--rf-surface-2);
  --bs-table-hover-bg: var(--rf-surface-3);
  --bs-table-border-color: var(--rf-line-2);
  font-variant-numeric: tabular-nums;
}
.table thead th { color: var(--rf-muted); letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--rf-fs-sm); }

/* Alerts from the same accent family, not stock Bootstrap colours. */
.alert {
  --bs-alert-bg: var(--rf-surface-1);
  --bs-alert-border-color: var(--rf-border-2);
  --bs-alert-color: var(--rf-ink-soft);
  border-radius: var(--rf-radius-lg);
}

/* Badges — filled accent chips. */
.badge {
  background-color: var(--rf-surface-3);
  color: var(--rf-ink-soft);
  border-radius: var(--rf-radius-full);
  font-weight: var(--rf-fw-semibold);
}
.badge.text-bg-primary,
.badge.bg-primary {
  background-color: var(--rf-accent-violet) !important;
  color: var(--rf-ink-strong) !important;
}

/* Muted / secondary comes from the token scale, not Bootstrap grey. */
.text-muted { color: var(--rf-muted-dim) !important; }
.bg-secondary { background-color: var(--rf-surface-3) !important; color: var(--rf-ink-soft) !important; }
.text-bg-secondary { background-color: var(--rf-surface-3) !important; color: var(--rf-ink-soft) !important; }

/* Links/input groups get a hairline that matches the room, not stock grey. */
.input-group > .form-control { border-color: var(--rf-border-1); }
.nav-link { color: var(--rf-muted); }
.nav-link:hover { color: var(--rf-ink-strong); }
.nav-link.active { color: var(--rf-accent-violet-soft); }

/* ---- 4. Reduced motion ---------------------------------------------------- *
   Neutralise the motion tokens (durations -> 0) and disable transitions and
   animations. Nothing here hides or disables an element — the vote always
   works with juice off (spec 11 'the test'). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --rf-dur-fast: var(--rf-dur-0);
    --rf-dur-med: var(--rf-dur-0);
    --rf-dur-slow: var(--rf-dur-0);
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}