/* openroar — Design System V1 semantic tokens, verbatim from
   openroar-web-proto/design-system-v1/openroar-design-system/openroar design system.dc.html
   (lines 15-206). Do not hand-edit values here — extend with new semantic
   tokens in components.css/sections.css, per DESIGN-SYSTEM.md §15. */
/* ============ RESET ============ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#F2EEE7;color:#28211C;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;margin:0;border:0;background:none;cursor:pointer}
input,textarea{font:inherit}
a{color:var(--accent-deep,#8C6826);text-decoration:none}
a:hover{color:var(--accent,#B68A3C)}
::selection{background:rgba(182,138,60,.28)}
:focus-visible{outline:var(--focus-w,2px) solid var(--focus,#B68A3C);outline-offset:2px;border-radius:3px}

/* ============ PRIMITIVE PALETTE (locked, palette.md Option A) ============ */
.oros{
  --p-bone:#F2EEE7; --p-bone2:#EAE3D6; --p-espresso:#28211C; --p-ink:#1F1A15;
  --p-green:#6D8060; --p-sage:#9FB08C; --p-forest:#4A5A45;
  --p-clay:#B8907A; --p-gold:#B68A3C; --p-gold-deep:#8C6826; --p-saffron:#E0A43B;
  --p-coral:#D77450; --p-coral-deep:#B4512F; --p-lav:#6B6A8A; --p-lav-deep:#54536F;
  --p-teal:#1F6F6B; --p-navy:#1B2A4A; --p-olive:#7E7A4E; --p-dusk:#9E3B5E;
}

/* ============ SEMANTIC TOKENS — LIGHT (default) ============ */
.oros{
  --bg:#F2EEE7; --bg-2:#EAE3D6;
  --surface:#FBF7EF; --surface-2:#F3ECDC; --surface-3:#E9DFCC;
  --ink:#28211C; --ink-2:#4A4038;
  --muted:rgba(40,33,28,.64); --faint:rgba(40,33,28,.40); --hair:rgba(40,33,28,.07); --hair-2:rgba(40,33,28,.18);
  --accent:#B68A3C; --accent-deep:#8C6826; --accent-soft:rgba(182,138,60,.14); --on-accent:#F7F3EA;
  --ok:#5E7049; --danger:#C0563D; --info:#1F6F6B;
  --glass-bg:rgba(251,249,244,.55); --glass-brd:rgba(255,255,255,.65); --glass-hi:rgba(255,255,255,.5);
  --glass-blur:30px; --glass-sat:155%;
  --shadow-1:0 1px 2px rgba(40,33,28,.05),0 4px 16px rgba(40,33,28,.07);
  --shadow-2:0 10px 34px rgba(40,33,28,.13),0 2px 6px rgba(40,33,28,.06);
  --shadow-in:inset 0 1px 2px rgba(40,33,28,.08);
  --focus:#B68A3C; --focus-w:2px;
  --tsc:1; --lh-body:1.62; --lh-tight:1.18;
  --ctl:44px; --ring:0;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:72px;
  --wob-btn:13px 15px 12px 14px/14px 12px 15px 13px;
  --wob-pill:23px 26px 22px 25px/25px 22px 26px 23px;
  --wob-card:30px 37px 32px 35px/35px 32px 37px 30px;
  --wob-in:16px 19px 15px 18px/18px 15px 19px 16px;
  --wob-seg:18px 21px 17px 20px/20px 17px 21px 18px;
  --wob-tilt:0deg;
  --mo-fast:150ms; --mo-mid:280ms; --mo-slow:480ms;
  --ease-spring:cubic-bezier(.34,1.56,.64,1); --ease-out:cubic-bezier(.22,.61,.25,1); --ease-in:cubic-bezier(.55,0,.8,.4);
  color:var(--ink);
}

/* ============ DARK ============ */
.oros[data-or-theme="dark"]{
  --bg:#1B1712; --bg-2:#221C16;
  --surface:#26201A; --surface-2:#2E2720; --surface-3:#363029;
  --ink:#F2EEE7; --ink-2:#CFC6B8;
  --muted:rgba(242,238,231,.66); --faint:rgba(242,238,231,.40); --hair:rgba(242,238,231,.08); --hair-2:rgba(242,238,231,.2);
  --accent:#CBA24E; --accent-deep:#E0A43B; --accent-soft:rgba(203,162,78,.18); --on-accent:#1B1712;
  --ok:#9FB08C; --danger:#E08a72; --info:#5FB3AE;
  --glass-bg:rgba(38,32,26,.5); --glass-brd:rgba(242,238,231,.14); --glass-hi:rgba(242,238,231,.08);
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.4);
  --shadow-2:0 14px 40px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);
  --shadow-in:inset 0 1px 2px rgba(0,0,0,.4);
}

/* ============ ACCENT VARIANTS (one accent, held back) ============ */
.oros[data-or-accent="green"]{ --accent:#6D8060; --accent-deep:#4A5A45; --accent-soft:rgba(109,128,96,.16); --on-accent:#F7F3EA; --focus:#6D8060; }
.oros[data-or-accent="coral"]{ --accent:#D77450; --accent-deep:#B4512F; --accent-soft:rgba(215,116,80,.15); --on-accent:#FBF6F0; --focus:#D77450; }
.oros[data-or-accent="clay"]{ --accent:#B8907A; --accent-deep:#8F6A55; --accent-soft:rgba(184,144,122,.16); --on-accent:#2B1F16; --focus:#B8907A; }
.oros[data-or-accent="lavender"]{ --accent:#6B6A8A; --accent-deep:#54536F; --accent-soft:rgba(107,106,138,.16); --on-accent:#F5F3F7; --focus:#6B6A8A; }
.oros[data-or-accent="teal"]{ --accent:#1F6F6B; --accent-deep:#155450; --accent-soft:rgba(31,111,107,.15); --on-accent:#EEF6F5; --focus:#1F6F6B; }
.oros[data-or-theme="dark"][data-or-accent="green"]{ --accent:#9FB08C; --accent-deep:#6D8060; --on-accent:#1B1712; }
.oros[data-or-theme="dark"][data-or-accent="coral"]{ --accent:#E7936F; --accent-deep:#D77450; --on-accent:#1B1712; }
.oros[data-or-theme="dark"][data-or-accent="clay"]{ --accent:#CDA791; --accent-deep:#B8907A; --on-accent:#1B1712; }
.oros[data-or-theme="dark"][data-or-accent="lavender"]{ --accent:#9897B5; --accent-deep:#6B6A8A; --on-accent:#1B1712; }
.oros[data-or-theme="dark"][data-or-accent="teal"]{ --accent:#4FB3AD; --accent-deep:#1F6F6B; --on-accent:#0E2422; }

/* ============ DENSITY ============ */
.oros[data-or-density="compact"]{ --sp-3:9px; --sp-4:12px; --sp-5:18px; --sp-6:24px; --sp-7:36px; --sp-8:52px; --ctl:38px; --lh-body:1.5; }

/* ============ TEXT SCALE (large / elderly) ============
   FIX 2026-07-06 (a11y bug #1, AG-caught): 1.22x read as a token nudge, not a
   real accessibility bump. Raised to 1.5x (>=1.4x floor), paired with deeper
   line-height and bigger controls/spacing so paragraphs and controls visibly
   reflow, not just grow in place. Always paired with contrast:on by "easy
   read" (js/conductor.js) — the two travel together by design. */
.oros[data-or-text="large"]{ --tsc:1.5; --lh-body:1.85; --ctl:56px; --sp-3:16px; --sp-4:24px; --sp-5:34px; --sp-6:40px; }

/* ============ HIGH CONTRAST ============
   FIX (a11y bug #1, cont'd): stronger separation from body ink, thicker
   hairlines, near-opaque glass, heavier focus ring — a real low-vision mode. */
.oros[data-or-contrast="on"]{ --muted:var(--ink); --faint:rgba(40,33,28,.82); --hair:rgba(40,33,28,.55); --hair-2:rgba(40,33,28,.75); --focus-w:3px; --glass-blur:4px; --glass-bg:rgba(251,249,244,.92); }
.oros[data-or-theme="dark"][data-or-contrast="on"]{ --faint:rgba(242,238,231,.85); --hair:rgba(242,238,231,.55); --hair-2:rgba(242,238,231,.75); --glass-bg:rgba(38,32,26,.92); }

/* ============ COLOR-SAFE (Okabe–Ito status; hue never the only signal) ============ */
.oros[data-or-colorsafe="on"]{ --ok:#009E73; --danger:#D55E00; --info:#0072B2; }

/* ============ CHARACTER / THE WOBBLE ============ */
.oros[data-or-wob="crisp"]{ --wob-btn:10px; --wob-pill:999px; --wob-card:18px; --wob-in:11px; --wob-seg:999px; --wob-tilt:0deg; }
.oros[data-or-wob="hand"]{ --wob-btn:12px 16px 11px 15px/15px 11px 16px 12px; --wob-pill:22px 28px 21px 26px/26px 21px 28px 22px; --wob-card:30px 40px 32px 37px/37px 32px 40px 30px; --wob-in:9px 19px 8px 16px/16px 8px 19px 10px; --wob-seg:12px 26px 11px 23px/22px 12px 27px 13px; --wob-tilt:-1deg; }

/* ============ MOTION ============ */
.oros[data-or-motion="reduced"] *,.oros[data-or-motion="reduced"] *::before,.oros[data-or-motion="reduced"] *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
@media (prefers-reduced-motion:reduce){.oros:not([data-or-motion="full-force"]) *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ============ APP SCAFFOLD (responsive — the one thing inline can't do) ============ */
.oros{overflow-x:clip}                     /* never a sideways scroll on any device */
.oros *{min-width:0}                        /* flex/grid children may shrink, no blow-out */
.oros img{max-width:100%;height:auto}
.or-shell{display:grid;grid-template-columns:1fr;min-height:100vh}
.or-side{display:none}
.or-main{min-width:0}
.or-cols{display:grid;gap:var(--sp-4);grid-template-columns:1fr}
.or-cols.two{grid-template-columns:1fr}
.or-cols.wide{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.or-mw{display:grid;gap:var(--sp-4);grid-template-columns:1fr}
@media (min-width:900px){
  .or-shell{grid-template-columns:248px 1fr}
  .or-side{display:block}
  .or-cols.two{grid-template-columns:1fr 1fr}
  .or-cols.wide{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
  .or-mw{grid-template-columns:auto 1fr}
  .or-sidetoggle{display:none!important}
}
/* phone — keep the conductor calm and everything tappable ≥44px */
@media (max-width:560px){
  .or-cols.wide{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  .or-conductor-accentlabel{display:none}
  .or-conductor-row{gap:8px !important}
  .or-conductor-row .seg button{padding:0 9px}
}
/* segmented active state driven purely by root world-state — no per-button holes */
.seg [data-k]{transition:background var(--mo-fast) var(--ease-out),color var(--mo-fast)}
.oros[data-or-theme="light"] .seg [data-k="theme"][data-v="light"],
.oros[data-or-theme="dark"] .seg [data-k="theme"][data-v="dark"],
.oros[data-or-density="comfortable"] .seg [data-k="density"][data-v="comfortable"],
.oros[data-or-density="compact"] .seg [data-k="density"][data-v="compact"],
.oros[data-or-wob="crisp"] .seg [data-k="wob"][data-v="crisp"],
.oros[data-or-wob="soft"] .seg [data-k="wob"][data-v="soft"],
.oros[data-or-wob="hand"] .seg [data-k="wob"][data-v="hand"],
.oros[data-or-text="normal"] .seg [data-k="text"][data-v="normal"],
.oros[data-or-text="large"] .seg [data-k="text"][data-v="large"],
.oros[data-or-motion="full"] .seg [data-k="motion"][data-v="full"],
.oros[data-or-motion="reduced"] .seg [data-k="motion"][data-v="reduced"],
.oros[data-or-contrast="off"] .seg [data-k="contrast"][data-v="off"],
.oros[data-or-contrast="on"] .seg [data-k="contrast"][data-v="on"],
.oros[data-or-colorsafe="off"] .seg [data-k="colorsafe"][data-v="off"],
.oros[data-or-colorsafe="on"] .seg [data-k="colorsafe"][data-v="on"]{background:var(--accent);color:var(--on-accent);font-weight:600}
.oros[data-or-text="large"][data-or-contrast="on"] .or-a11y-easy,.oros[data-or-colorsafe="on"] .or-a11y-safe{background:var(--accent) !important;color:var(--on-accent) !important;border-color:transparent !important;font-weight:600}
.oros[data-or-accent="gold"] [data-k="accent"][data-v="gold"],
.oros[data-or-accent="green"] [data-k="accent"][data-v="green"],
.oros[data-or-accent="coral"] [data-k="accent"][data-v="coral"],
.oros[data-or-accent="clay"] [data-k="accent"][data-v="clay"],
.oros[data-or-accent="lavender"] [data-k="accent"][data-v="lavender"],
.oros[data-or-accent="teal"] [data-k="accent"][data-v="teal"]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink);transform:scale(1.12)}
/* active nav link */
.or-navlink.on{background:var(--accent-soft);color:var(--accent-deep);font-weight:600}
/* quick-access a11y pills — active state driven by world-state */
.oros[data-or-text="large"][data-or-contrast="on"] .or-a11y-easy,
.oros[data-or-colorsafe="on"] .or-a11y-safe{background:var(--accent) !important;color:var(--on-accent) !important;border-color:var(--accent) !important;font-weight:600}
/* keyframes */
@keyframes or-pulse{0%{transform:scale(.9);opacity:.5}100%{transform:scale(1);opacity:1}}
@keyframes or-check{0%{stroke-dashoffset:22}100%{stroke-dashoffset:0}}
@keyframes or-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes or-spin{to{transform:rotate(360deg)}}
@keyframes or-rise{0%{transform:translateY(14px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes or-think{0%,100%{opacity:.28;transform:scale(.6)}45%{opacity:1;transform:scale(1)}}
.oros[data-or-motion="reduced"] .or-think-dot{animation:none !important;opacity:.85;transform:none}
/* primary (theme-flipping) token + form controls */
.oros{--solid:#28211C;--on-solid:#F7F3EA;--mark-url:url("../assets/brand/mark_espresso.svg");--voice:#4A5A45;--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.oros[data-or-theme="dark"]{--solid:#F2EEE7;--on-solid:#1B1712;--mark-url:url("../assets/brand/mark_bone_on_dark.svg");--voice:#9FB08C}
.oros input,.oros textarea,.oros select{font-family:'Inter',sans-serif;color:var(--ink)}
.oros input[type=checkbox],.oros input[type=radio],.oros input[type=range]{accent-color:var(--accent)}
.oros ::placeholder{color:var(--faint)}
.or-field{width:100%;background:var(--surface-2);border:1px solid var(--hair-2);border-radius:var(--wob-in);padding:0 14px;height:var(--ctl);color:var(--ink);font-size:calc(14px*var(--tsc));outline:none;transition:border-color var(--mo-fast) var(--ease-out),box-shadow var(--mo-fast) var(--ease-out)}
textarea.or-field{padding:11px 14px;height:auto;line-height:1.5;resize:vertical}
.or-field:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.or-field:disabled{opacity:.5;cursor:not-allowed}
.or-switch{position:relative;display:inline-flex;width:48px;height:28px;flex:none;vertical-align:middle}
.or-switch>input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer;z-index:2}
.or-switch>.tk{position:relative;flex:1;border-radius:var(--wob-pill);background:var(--hair-2);transition:background var(--mo-mid) var(--ease-out)}
.or-switch>.tk::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:var(--wob-seg);background:var(--surface);box-shadow:var(--shadow-1);transition:transform var(--mo-mid) var(--ease-spring)}
.or-switch>input:checked + .tk{background:var(--accent)}
.or-switch>input:checked + .tk::after{transform:translateX(20px)}
.or-switch>input:focus-visible + .tk{outline:var(--focus-w) solid var(--focus);outline-offset:2px}
.or-range{width:100%;accent-color:var(--accent);height:var(--ctl)}
.or-lab{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:calc(14px*var(--tsc));color:var(--ink)}
.or-lab input{width:18px;height:18px;cursor:pointer}
/* organic life — motion over ornament, never gradient-blobs */
@keyframes or-breathe{0%,100%{transform:rotate(-4deg) scale(1)}50%{transform:rotate(-4deg) scale(1.055)}}
.or-pulse{animation:or-breathe 4.6s ease-in-out infinite;transform-origin:center}
.oros.or-anim .or-rev{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);will-change:opacity,transform}
.oros.or-anim .or-rev.in{opacity:1;transform:none}
.oros[data-or-motion="reduced"] .or-rev{opacity:1 !important;transform:none !important;transition:none !important}
.oros[data-or-motion="reduced"] .or-pulse{animation:none}
/* warm paper grain — tactile, never a gradient-blob */
.or-grain{position:fixed;inset:0;z-index:60;pointer-events:none;background-image:var(--grain);background-size:140px;mix-blend-mode:multiply;opacity:.05}
.oros[data-or-theme="dark"] .or-grain{mix-blend-mode:overlay;opacity:.05}
.oros[data-or-contrast="on"] .or-grain{display:none}