/* ============================================================
   SplitWing tokens v2 — light/dark aware, AA floor / AAA body
   Roles resolve per mode via light-dark(). Accent is a ROLE:
   different hex per mode because contrast demands it.
   Ratios annotated from script-computed WCAG values (2026-06-11).
   ============================================================ */

:root { color-scheme: light dark; }
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"]  { color-scheme: dark; }

:root {
  /* surfaces */
  --surface:      light-dark(#faf8f5, #11161c);
  --card:         light-dark(#ffffff, #1a2230);
  --surface-warm: light-dark(#f5f0e8, #161d27);
  --hairline:     light-dark(rgba(26,35,50,.09), rgba(236,231,223,.12));
  --bar:          light-dark(#0f1419, #060809);   /* app chrome: dark in BOTH modes */
  --on-bar:       #ffffff;

  /* ink — body AAA in both modes */
  --ink:           light-dark(#1a2332, #ece7df);  /* 14.9 / 14.8 AAA */
  --ink-strong:    light-dark(#0f1419, #ffffff);  /* 17.5 / 18.2 AAA */
  --ink-secondary: light-dark(#4a5568, #a8b3c2);  /*  7.1 /  8.6 AAA */
  --ink-muted:     light-dark(#5f6b7e, #8c95a6);  /*  4.7 /  6.0 — AA small text both modes */

  /* accent — Magenta Line (DECIDED 2026-06-11) */
  --accent-fill:  light-dark(#c2447f, #e07ba8);   /* fills & graphics */
  --accent-text:  light-dark(#8c2a58, #ea9bbd);   /* 7.7 / 8.6 AAA — text-safe step */
  --on-accent:    light-dark(#ffffff, #11161c);   /* 4.7 AA / 6.6 AA — button labels */
  --accent-soft:  light-dark(rgba(194,68,127,.07), rgba(224,123,168,.13));

  /* semantics (reserved: savings / errors) */
  --success-text: light-dark(#1f6e3f, #7cc69d);   /* 5.9 AA / 9.0 AAA */
  --success-soft: light-dark(#e7f1ea, rgba(124,198,157,.14));
  --error-text:   light-dark(#c0392f, #e8625f);   /* 5.4 AA / 5.5 AA */
  --error-soft:   light-dark(#fdf1f0, rgba(232,98,95,.12));
  --warn-text:    light-dark(#8a5a12, #d9a648);
  --warn-soft:    light-dark(#fbf4e4, rgba(217,166,72,.12));

  /* type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Source Sans 3", "Segoe UI", sans-serif;
  --text-xs: 0.778rem; --text-sm: 0.889rem; --text-base: 1rem;
  --text-lg: 1.111rem; --text-xl: 1.333rem; --text-2xl: 1.778rem;
  --text-3xl: 2.222rem; --text-4xl: 3.111rem;

  /* geometry & motion */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px;
  --shadow-sm: 0 1px 2px light-dark(rgba(15,20,25,.08), rgba(0,0,0,.4));
  --shadow-md: 0 4px 12px light-dark(rgba(15,20,25,.12), rgba(0,0,0,.5));
  --focus-ring: 0 0 0 3px var(--accent-fill), 0 0 0 6px var(--ink-strong);
  --ease: cubic-bezier(.25,.6,.3,1); /* needle settling */
}

/* ---------- calm base ---------- */
* { box-sizing: border-box; }
html { font-size: 18px; }
body {
  margin: 0; font-family: var(--font-body); color: var(--ink);
  background: var(--surface); line-height: 1.55;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; color: var(--ink-strong); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.card {
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.microlabel {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-secondary);
}
.display-num {
  font-family: var(--font-display); font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums; color: var(--ink-strong); line-height: 1.15;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .55rem 1.4rem; border-radius: var(--radius-md);
  font: 600 var(--text-sm) var(--font-body); border: 2px solid transparent;
  cursor: pointer; text-decoration: none; transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.btn-accent { background: var(--accent-fill); color: var(--on-accent); }
.btn-accent:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--ink-muted); }

/* in-app appearance switch (issue #50) */
.theme-switch { display: inline-flex; gap: .3rem; align-items: center; margin-right: .5rem; }
.theme-switch button {
  border: 1.5px solid rgba(255,255,255,.4); background: transparent; color: var(--on-bar);
  border-radius: var(--radius-full); padding: .2rem .6rem; min-height: 32px;
  cursor: pointer; font: 700 var(--text-xs) var(--font-body);
}
.theme-switch button.on { background: var(--on-bar); color: var(--bar); }