/* INSIEME Dashboard — theme tokens.
 * Source of truth: docs/BRANDING.md (tokens) + docs/ADRs/0009-theming.md (behaviour).
 * No hard-coded hex values outside this file.
 */

/* ── tokens: light ──────────────────────────────────────────────────────── */
[data-theme='light'] {
  --brand:         #6C6FA9;
  --brand-strong:  #54578C;
  --brand-soft:    #E9EAF4;
  --bg:            #FAFAFC;
  --bg-elevated:   #FFFFFF;
  --bg-sunken:     #F2F3F8;
  --fg:            #1A1A24;
  --fg-muted:      #54566A;
  --fg-on-brand:   #FFFFFF;
  --border:        #E0E1EA;
  --focus-ring:    #6C6FA9;
  --rag-green:     #2E7D32;
  --rag-amber:     #F9A825;
  --rag-red:       #C62828;
  --accent-teal:   #3FB6A1;

  --mat-0: var(--bg-sunken);
  --mat-1: var(--brand-soft);
  --mat-2: #C9CBE6;
  --mat-3: #9094D0;
  --mat-4: #6C6FA9;
  --mat-5: #54578C;

  /* cross-border strength 0..3 (BRANDING §2.3) — aliases, no new hex */
  --cb-0: var(--bg-sunken);
  --cb-1: var(--brand-soft);
  --cb-2: var(--mat-3);
  --cb-3: var(--mat-5);
}

/* ── tokens: dark ───────────────────────────────────────────────────────── */
[data-theme='dark'] {
  --brand:         #9094D0;
  --brand-strong:  #B4B7E0;
  --brand-soft:    #262849;
  --bg:            #13141F;
  --bg-elevated:   #1E2030;
  --bg-sunken:     #0E0F18;
  --fg:            #E6E7F0;
  --fg-muted:      #A0A2B5;
  --fg-on-brand:   #13141F;
  --border:        #2A2C3F;
  --focus-ring:    #9094D0;
  --rag-green:     #5EAE63;
  --rag-amber:     #F6C76B;
  --rag-red:       #E97A7A;
  --accent-teal:   #69D2BD;

  --mat-0: var(--bg-sunken);
  --mat-1: var(--brand-soft);
  --mat-2: #3D4068;
  --mat-3: #6C6FA9;
  --mat-4: #9094D0;
  --mat-5: #B4B7E0;

  /* cross-border strength 0..3 (BRANDING §2.3) — aliases, no new hex */
  --cb-0: var(--bg-sunken);
  --cb-1: var(--brand-soft);
  --cb-2: var(--mat-3);
  --cb-3: var(--mat-5);
}

/* ── spacing + type ─────────────────────────────────────────────────────── */
:root {
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 28px;  --space-8: 32px;

  --text-xs:   12px / 16px;
  --text-sm:   14px / 20px;
  --text-base: 16px / 24px;
  --text-lg:   18px / 28px;
  --text-xl:   22px / 28px;
  --text-2xl:  28px / 36px;
  --text-3xl:  36px / 44px;

  --font-sans: "Inter", "Segoe UI", Roboto, -apple-system, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;

  --content-max: 1200px;
  --radius:      8px;
}

/* ── reset-ish base ─────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { color-scheme: light dark; }
body {
  margin: 0;
  font: 16px/1.5 var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-strong); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }

/* ── layout primitives ──────────────────────────────────────────────────── */
.container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-6); }
header, main, section, footer { padding: var(--space-6); max-width: var(--content-max); margin: 0 auto; }

/* ── top nav ────────────────────────────────────────────────────────────── */
.topnav {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.topnav__inner {
  display: flex; align-items: center; gap: var(--space-6);
  max-width: var(--content-max); margin: 0 auto;
  padding: var(--space-3) var(--space-6);
}
.topnav__logo img { height: 28px; display: block; }
.topnav__links { display: flex; gap: var(--space-5); }
.topnav__links a { color: var(--fg); font-weight: 500; }
.topnav__spacer { flex: 1; }
.topnav__theme-toggle, .topnav__signin {
  background: transparent; color: var(--fg); border: 1px solid var(--border);
  padding: 6px 10px; border-radius: var(--radius);
  font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.topnav__theme-toggle:hover { background: var(--brand-soft); }

/* ── cards ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);
}

/* ── rag pips ───────────────────────────────────────────────────────────── */
.rag { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; vertical-align: middle; margin-left: .25rem; }
.rag-green { background: var(--rag-green); }
.rag-amber { background: var(--rag-amber); }
.rag-red   { background: var(--rag-red); }

/* ── heatmap ────────────────────────────────────────────────────────────── */
table.heatmap { border-collapse: collapse; width: 100%; }
table.heatmap th, table.heatmap td {
  border: 1px solid var(--border);
  padding: 4px 8px;
  text-align: center;
  min-width: 32px;
  color: var(--fg);
}
.mat-0 { background: var(--mat-0); }
.mat-1 { background: var(--mat-1); }
.mat-2 { background: var(--mat-2); }
.mat-3 { background: var(--mat-3); color: var(--fg-on-brand); }
.mat-4 { background: var(--mat-4); color: var(--fg-on-brand); }
.mat-5 { background: var(--mat-5); color: var(--fg-on-brand); }

/* ── cross-border matrix ────────────────────────────────────────────────── */
.matrix-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-4); font: var(--text-sm) var(--font-sans); color: var(--fg-muted); }
.matrix-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.matrix-legend__swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border); }
.matrix-empty { color: var(--fg-muted); }

table.matrix { border-collapse: collapse; font: var(--text-sm) var(--font-sans); }
table.matrix th, table.matrix td {
  border: 1px solid var(--border);
  padding: 3px 6px;
  text-align: center;
  min-width: 26px;
  color: var(--fg);
}
table.matrix th[scope='row'] { text-align: left; white-space: nowrap; font-weight: 500; }
.cb-0 { background: var(--cb-0); }
.cb-1 { background: var(--cb-1); }
.cb-2 { background: var(--cb-2); color: var(--fg-on-brand); }
.cb-3 { background: var(--cb-3); color: var(--fg-on-brand); }
.cb-self { background: var(--bg-sunken); color: var(--fg-muted); }

/* ── timeline ───────────────────────────────────────────────────────────── */
ol.timeline { list-style: none; padding: 0; }
ol.timeline li { padding: var(--space-2) var(--space-3); border-left: 3px solid var(--border); }
ol.timeline li.ms-done    { border-color: var(--rag-green); }
ol.timeline li.ms-current { border-color: var(--rag-amber); font-weight: 600; }
ol.timeline li.ms-future  { border-color: var(--fg-muted); opacity: .8; }

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  color: var(--fg-muted);
  font: var(--text-sm) var(--font-sans);
}
.site-footer__grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer img.eu { height: 24px; vertical-align: middle; margin-right: 8px; }

/* ── eyebrow + headings ─────────────────────────────────────────────────── */
.eyebrow {
  display: inline-block;
  font: 12px/16px var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--space-2);
}
h1 { font: 600 28px/36px var(--font-sans); margin: 0 0 var(--space-3); }
h2 { font: 600 22px/28px var(--font-sans); margin: var(--space-6) 0 var(--space-2); }
h3 { font: 600 18px/24px var(--font-sans); margin: var(--space-5) 0 var(--space-2); }

/* ── forms ──────────────────────────────────────────────────────────────── */
input, select, textarea, button {
  font: inherit;
  color: var(--fg);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
}
button[type='submit'], .btn-primary {
  background: var(--brand);
  color: var(--fg-on-brand);
  border-color: var(--brand);
  cursor: pointer;
}
button[type='submit']:hover, .btn-primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
button[disabled] { opacity: .5; cursor: not-allowed; }