/* Red-led theme (D-058). Skin only: colours, font, radii, shadows. No layout, field, text or flow is changed here.
   Loaded after app.css (and today.css / branch-plan.css) on every page. All tokens are in :root below; change them here and nowhere else.
   Every text and background pair is checked by tests/test_theme_contrast.py (WCAG AA). */
@font-face { font-family:"Poppins"; font-weight:400; font-style:normal; font-display:swap; src:url("poppins-400.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-weight:500; font-style:normal; font-display:swap; src:url("poppins-500.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-weight:600; font-style:normal; font-display:swap; src:url("poppins-600.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-weight:700; font-style:normal; font-display:swap; src:url("poppins-700.woff2") format("woff2"); }

:root {
  /* font: Poppins is a placeholder until the Client's own brand font is known; change this one line to swap it */
  --font: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* colours */
  --primary:#D50000;          /* actions, header, selected state; white text on it passes AA */
  --accent:#E40000;           /* brand accent, large elements only (no small text on it) */
  --ink:#1A1A1A; --muted:#6B6B6B; --line:#E6E6E6; --field-line:#BDBDBD;
  --page:#F5F5F7; --card:#FFFFFF;
  --ok:#1E8E3E;               /* success: borders, icons and large figures (4.2:1 on white, so not for small text) */
  --ok-text:#17692C;          /* success as small text */
  --warn:#B06000;             /* warning text on white; on a tint use ink */
  --tint-red:#FDE7E7; --tint-ok:#E4F4E8; --tint-warn:#FFF0DA; --tint-grey:#EDEDF0;
  --radius-card:12px; --radius-input:10px; --shadow:0 1px 3px rgba(0,0,0,.08);
  /* the older tokens of app.css, pointed at the new ones */
  --dark:var(--primary); --mid:var(--muted); --soft:var(--tint-grey); --bg:var(--page);
}

body { font-family:var(--font); background:var(--page); color:var(--ink); }

/* header bar: solid red, white bold title, text wordmark */
.bar { background:var(--primary); color:#fff; }
.bar h1 { color:#fff; font-weight:700; }
.bar h1::before { content:"Virgo One"; display:block; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; line-height:1.2; }
.bar .tag, .tag { color:#fff; }

/* cards and lists: white, 12px radius, soft shadow, 16px padding */
.cards li, .card, .card.strong, .qcard, .qcard.late, .linecard, .box, .kpi, .strip, .tile, .dtile, .dashed, .radio {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow);
}
.cards li, .card, .qcard, .linecard, .kpi, .strip { padding:16px; }
.cards .qcard { padding:16px; }
.qcard.late, .card.strong, .card.bad { border:2px solid var(--primary); }
.dashed { border-style:dashed; background:var(--tint-grey); box-shadow:none; }
.readonly, .calc-box { border:1.5px dashed var(--field-line); border-radius:var(--radius-input); background:var(--tint-grey); color:var(--muted); }
.readonly.set, .calc-box.set { color:var(--ink); }
.callout { background:var(--primary); color:#fff; border-radius:var(--radius-input); }
.callout.light { background:var(--card); color:var(--ink); border:1px solid var(--line); }
.msg, .msgs li { background:var(--primary); color:#fff; border-radius:8px; }
.ok { background:var(--tint-ok); border:1.5px solid var(--ok); color:var(--ink); border-radius:var(--radius-input); }
.radio { border:1.5px solid var(--field-line); box-shadow:none; }
.radio.on { border:2px solid var(--primary); background:var(--tint-red); }
table.t { background:var(--card); }
table.t th, table.t td { border:1px solid var(--line); }
table.t th { background:var(--tint-grey); }

/* tiles and figures: big bold numbers, small muted uppercase labels */
.tile b, .kpi .v, .tile .big, .dtile a.num { font-weight:700; color:var(--ink); }
.tile span, .tile .k, .tile .sq, .tile .s, .kpi .t, .dtile > span, .dtile small { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.tile, .dtile { background:var(--card); }
.dtile a.num { text-decoration:none; }

/* buttons: pills; primary filled red, secondary white with a red 1.5px border */
button, a.btn { border-radius:999px; font-family:var(--font); }
button { border:1.5px solid var(--primary); }
button.primary { background:var(--primary); color:#fff; font-weight:700; }
button.secondary, button.chip { background:var(--card); color:var(--primary); }
a.btn, a.btn.secondary-link { background:var(--card); color:var(--primary); border:1.5px solid var(--primary); font-weight:700; }
button:disabled { background:#C9C9CE; border-color:#C9C9CE; color:#fff; }
button.link, .link, a.link { color:var(--primary); border:0; background:none; border-radius:0; }
.small-btn { border-radius:999px; }

/* chips and tags: pills; selected = red fill; status chips tinted with dark text */
.chip, .badge, .src, .tag2, .ruletag { border-radius:999px; border:1px solid var(--field-line); background:var(--card); color:var(--ink); }
.chip.pick, .chip.calc, .badge, .src.pick, .src.calc, .tag2.soft { background:var(--tint-grey); border-color:var(--tint-grey); color:var(--ink); }
.chip.typed, .badge.dark, .src.typed, .tag2.dark { background:var(--tint-red); border-color:var(--tint-red); color:var(--ink); }
.badge.out, .src.sap { background:var(--card); border-color:var(--field-line); color:var(--ink); }
.chip.on, .chips button[aria-pressed="true"] { background:var(--primary); border-color:var(--primary); color:#fff; }
.chips button { background:var(--card); color:var(--primary); border:1.5px solid var(--primary); border-radius:999px; }
.pill { border-radius:999px; }
.rank { background:var(--primary); color:#fff; }

/* inputs: 10px radius, 1.5px #BDBDBD border, red 2px focus ring */
input, select, textarea { font-family:var(--font); border:1.5px solid var(--field-line); border-radius:var(--radius-input); background:var(--card); color:var(--ink); }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.field.bad input, .field.bad select, .field.bad textarea { border-color:var(--primary); border-width:2px; }
.pill select { border:0; }

/* navigation */
.tabs { background:var(--card); border-top:1px solid var(--line); }
.tabs a { color:var(--ink); }
.tabs a.on { color:var(--primary); box-shadow:inset 0 3px 0 var(--primary); }
.side a.on { background:var(--primary); color:#fff; }
.side { background:var(--card); }
.bar-row .track { background:var(--tint-grey); border-radius:9px; overflow:hidden; }
.bar-row .fill { background:var(--field-line); }
.bar-row .fill.dark { background:var(--primary); }
a { color:var(--primary); }
.ttl, .tile a, a.tile, .dtile a.num, .bar-row, .tabs a, .side a, a.btn, .qcard a.btn { text-decoration-color:currentColor; }
.ttl { color:var(--ink); }