/* regenalpha-design-tokens.css — Dark Terminal Layer Design System
   Encodes Plan 84 v4: 4-color cap, Inter typography, grid, interaction tokens.
   Imported by all regenalpha pages. Validated by t4-guard-rails.py and review worker V1-V7.
*/
:root {
  /* ─── Color Tokens (4-color cap — Plan 84 §2) ─── */
  --color-bg-canvas: #0a0a0a;
  --color-brand-neon: #7FFF00;
  --color-text-primary: #FFFFFF;
  --color-accent-orange: #FF6B35;
  --color-text-secondary: #888888;
  --color-card-bg: #111111;
  --color-border: #222222;
  --color-c2pa-gold: #DAA520;

  /* ─── Typography (Inter, 4 weights — Plan 84 §2) ─── */
  --font-family: 'Inter', system-ui, sans-serif;
  --font-h1-size: 28px;
  --font-h1-weight: 700;
  --font-h2-size: 20px;
  --font-h2-weight: 600;
  --font-body-size: 16px;
  --font-body-weight: 400;
  --font-caption-size: 14px;
  --font-caption-weight: 400;
  --font-mobile-floor: 14px;

  /* ─── Layout (2-col → 1-col at 900px — Plan 84 §2) ─── */
  --grid-columns: 2;
  --grid-gap: 1.5rem;
  --breakpoint-mobile: 900px;
  --card-padding: 1.25rem;
  --card-radius: 8px;
  --card-shadow: 0 2px 12px rgba(0,0,0,0.4);

  /* ─── Interaction Tokens (Plan 84 §2) ─── */
  --transition-speed: 0.2s;
  --accordion-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --button-radius: 6px;
  --badge-radius: 4px;
}

/* ─── Global Reset ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--color-bg-canvas);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-size: var(--font-body-size);
  font-weight: var(--font-body-weight);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ─── Typography Scale ─── */
h1 { font-size: var(--font-h1-size); font-weight: var(--font-h1-weight); }
h2 { font-size: var(--font-h2-size); font-weight: var(--font-h2-weight); }
h1 span, h2 span { color: var(--color-brand-neon); }
.caption { font-size: var(--font-caption-size); color: var(--color-text-secondary); }

/* ─── Module Grid ─── */
.module-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (max-width: 900px) {
  .module-grid { grid-template-columns: 1fr; }
}

/* ─── Card ─── */
.card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
  transition: border-color var(--transition-speed);
}
.card:hover { border-color: var(--color-brand-neon); }

/* ─── Badges ─── */
.badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.6rem; border-radius: var(--badge-radius);
  font-size: var(--font-caption-size); font-weight: 600;
}
.badge-live { background: rgba(127,255,0,0.1); color: var(--color-brand-neon); }
.badge-warning { background: rgba(255,107,53,0.1); color: var(--color-accent-orange); }
.badge-pending { background: rgba(136,136,136,0.1); color: var(--color-text-secondary); }

/* ─── Accordion (Inspect Reasoning — T1, T2) ─── */
.accordion { border-top: 1px solid var(--color-border); }
.accordion-trigger {
  width: 100%; padding: 0.75rem; background: none; border: none;
  color: var(--color-text-primary); font-family: var(--font-family);
  font-size: var(--font-body-size); cursor: pointer; text-align: left;
  display: flex; justify-content: space-between; align-items: center;
  transition: color var(--transition-speed);
}
.accordion-trigger:hover { color: var(--color-brand-neon); }
.accordion-trigger::after { content: '▸'; transition: transform var(--transition-speed); }
.accordion-trigger.open::after { transform: rotate(90deg); }
.accordion-panel {
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s var(--accordion-ease);
}
.accordion-panel.open { max-height: 600px; }

/* ─── C2PA Seal (T10a, T10b) ─── */
.c2pa-seal {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; border: 2px solid var(--color-c2pa-gold);
  border-radius: var(--button-radius); background: rgba(218,165,32,0.05);
  color: var(--color-c2pa-gold); cursor: pointer;
  font-size: var(--font-caption-size); font-weight: 600;
  transition: all var(--transition-speed);
}
.c2pa-seal:hover { background: rgba(218,165,32,0.15); }
.c2pa-seal::before { content: '🔒'; }

/* ─── Dissent Ledger (T9) ─── */
.dissent {
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.dissent-title { color: var(--color-accent-orange); font-weight: 600; }
.dissent-body { color: var(--color-text-secondary); font-size: var(--font-caption-size); }

/* ─── Severity Matrix Display ─── */
.severity-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem;
  max-width: 400px; margin: 1rem 0;
}
.severity-cell {
  padding: 0.75rem; border-radius: 4px; text-align: center;
  font-size: var(--font-caption-size);
}
.severity-4 { background: rgba(255,0,0,0.15); color: #FF4444; }
.severity-3 { background: rgba(255,107,53,0.15); color: var(--color-accent-orange); }
.severity-2 { background: rgba(127,255,0,0.05); color: var(--color-text-secondary); }
.severity-1 { background: rgba(127,255,0,0.03); color: var(--color-text-secondary); }

/* ─── Browser Default Override (V7) ─── */
a { color: var(--color-brand-neon); text-decoration: none; }
a:visited { color: var(--color-brand-neon); }  /* kills purple-visited browser default */
a:hover { text-decoration: underline; }
button { font-family: var(--font-family); cursor: pointer; }
input, select, textarea {
  font-family: var(--font-family); font-size: var(--font-body-size);
  background: var(--color-card-bg); color: var(--color-text-primary);
  border: 1px solid var(--color-border); border-radius: var(--button-radius);
  padding: 0.5rem 0.75rem;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--color-brand-neon);
  box-shadow: 0 0 0 2px rgba(127,255,0,0.2);
}