/* ────────────────────────────────────────────────────────────
   Rethink Culture — Design Tokens v2 (May 2026)
   Source of truth: design_handoff_ds_v2/Design System.html
   ──────────────────────────────────────────────────────────── */

:root {
  /* ── Scoring scale (Maslow-inspired 5-level culture health) ── */
  --color-thriving:   #347870;  /* score ≥ 85 */
  --color-healthy:    #50B0A2;  /* score ≥ 70 */
  --color-atrisk:     #F2B846;  /* score ≥ 55 */
  --color-critical:   #FF9E2D;  /* score ≥ 40 */
  --color-toxic:      #EC6444;  /* score <  40 */
  --color-neutral:    #6D727F;  /* N/A, skipped */

  /* ── Brand teal — CTA, focus ring, onboarding stepper, Merge pill
        DO NOT use for score thriving (use --color-thriving). ── */
  --teal:             #15C39A;
  --teal-dark:        #10A381;
  --teal-tint-bg:     rgba(21,195,154,0.06);
  --teal-tint-ring:   rgba(21,195,154,0.12);

  /* ── Slate scale (text + borders + neutral surfaces) ── */
  --ink:              #000000;
  --slate-7:          #374151;
  --slate-5:          #6b7280;
  --slate-4:          #9ca3af;
  --slate-2:          #e5e7eb;
  --slate-1:          #f9fafb;

  /* ── Semantic text + borders ── */
  --text-primary:     var(--ink);
  --text-secondary:   var(--slate-5);
  --text-hint:        var(--slate-4);
  --border-primary:   var(--slate-2);
  --border-secondary: #d1d5db;

  /* ── Brand accent (beta tag, brand mark only — NOT for danger) ── */
  --brand-orange:     #EC6444;

  /* ── Accent (inline title highlight, e.g. "Acme Corp?" in survey hero)
        Shares its hex with --color-critical by design — see Design System
        Color Palette callout for which token to use in which context. ── */
  --accent-orange:    #FF9E2D;

  /* ── Surfaces ── */
  --bg-page:          #ffffff;          /* default app bg */
  --bg-subtle:        var(--slate-1);   /* table headers, alt rows */
  --bg-warm:          #f5f5f3;          /* onboarding + login */
  --bg-dark-hero:     #000000;          /* app header surface */
  --bg-dark-button:   #282828;          /* on-dark control surface (.btn-dark) */

  /* ── On-dark borders ── */
  --border-on-dark:      rgba(255,255,255,0.25); /* control edges */
  --border-on-dark-soft: rgba(255,255,255,0.15); /* tab-nav separator */

  /* ── Status tints (paired bg + text) ── */
  --status-ok-bg:     #ECFDF5; --status-ok-text:   #065F46;
  --status-warn-bg:   #FFF7ED; --status-warn-text: #9A3412;
  --status-err-bg:    #FEF2F2; --status-err-text:  #991B1B;
  --status-info-bg:   rgba(80,176,162,0.10);
  --status-info-text: #065F46;

  /* ── Cohort matrix diff scale (greens/reds, lighter than score scale) ── */
  --cohort-pos-30:    #B2E8E3;
  --cohort-pos-20:    #CCF0ED;
  --cohort-pos-10:    #E6F8F6;
  --cohort-neg-10:    #FFF6F5;
  --cohort-neg-20:    #FFEFEB;
  --cohort-neg-30:    #FFE6E1;

  /* ── Shape ── */
  --shadow-card:      0 2px 4px rgba(0,0,0,0.06);
  --shadow-card-lg:   0 2px 12px rgba(0,0,0,0.06);
  --shadow-pill:      0 2px 8px rgba(21,195,154,0.25);
  --shadow-pill-hover:0 4px 14px rgba(21,195,154,0.32);
  --shadow-modal:     0 20px 60px rgba(0,0,0,0.20);
  --radius-button:    8px;
  --radius-input:     10px;
  --radius-card:      16px;
  --radius-card-lg:   20px;
  --radius-pill:      9999px;

  /* ── Type ── */
  --font-sans:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:        'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;

  /* ── Animation ── */
  --ease-out:         cubic-bezier(.4, 0, .2, 1);
  --dur-fast:         150ms;
  --dur-base:         200ms;
  --dur-slow:         300ms;

  /* ── Stat-tile tinted surfaces (Email Logs, App Logs, etc.) ── */
  --stat-blue-bg:      #EFF6FF;
  --stat-blue-border:  #BFDBFE;
  --stat-blue-fg:      #1D4ED8;
  --stat-blue-label:   #3B82F6;
  --stat-green-bg:     #ECFDF5;
  --stat-green-border: #A7F3D0;
  --stat-green-fg:     #047857;
  --stat-green-label:  #10B981;
  --stat-red-bg:       #FEF2F2;
  --stat-red-border:   #FECACA;
  --stat-red-fg:       #B91C1C;
  --stat-red-label:    #EF4444;
  --stat-yellow-bg:    #FEFCE8;
  --stat-yellow-border:#FDE68A;
  --stat-yellow-fg:    #A16207;
  --stat-yellow-label: #CA8A04;
}

/* ════════════════════════════════════════════════════════════════
   STAT TILES — admin metric callouts
   ════════════════════════════════════════════════════════════════ */

/* Base tile (use directly, or compose with a color variant) */
.stat {
  background: #ffffff;
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  padding: 16px 18px;
  text-align: center;
}
.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary, #000);
  line-height: 1.1;
}
.stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 6px;
}

/* Tinted variants — apply BOTH classes:  <div class="stat stat-red"> */
.stat-blue   { background: var(--stat-blue-bg);   border-color: var(--stat-blue-border); }
.stat-blue   .stat-value { color: var(--stat-blue-fg); }
.stat-blue   .stat-label { color: var(--stat-blue-label); }

.stat-green  { background: var(--stat-green-bg);  border-color: var(--stat-green-border); }
.stat-green  .stat-value { color: var(--stat-green-fg); }
.stat-green  .stat-label { color: var(--stat-green-label); }

.stat-red    { background: var(--stat-red-bg);    border-color: var(--stat-red-border); }
.stat-red    .stat-value { color: var(--stat-red-fg); }
.stat-red    .stat-label { color: var(--stat-red-label); }

.stat-yellow { background: var(--stat-yellow-bg); border-color: var(--stat-yellow-border); }
.stat-yellow .stat-value { color: var(--stat-yellow-fg); }
.stat-yellow .stat-label { color: var(--stat-yellow-label); }