/* File: frontend/css/tokens.css */
/* Version: 0.4.0 */
/* Change: Add textarea style used for scenario notes. */
:root{
  --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-serif: Georgia, "Times New Roman", Times, serif;
  --size-12: 12px; --size-13: 13px; --size-14: 14px; --size-15: 15px;
  --size-16: 16px; --size-18: 18px; --size-20: 20px; --size-24: 24px; --size-28: 28px;

  --gap-4: 4px; --gap-6: 6px; --gap-8: 8px; --gap-12: 12px; --gap-16: 16px; --gap-20: 20px; --gap-24: 24px; --gap-32: 32px;
  --radius-8: 8px; --radius-12: 12px;

  --bg: #ffffff; --fg: #121212; --muted: #6b7280; --rule: #E5E7EB;
  --card: #ffffff; --accent: #0a4b8f;

  --ctrl-bg: #ffffff; --ctrl-border: #D1D5DB; --ctrl-focus: #0a4b8f1a;

  --stroke-thin: 1px; --stroke-normal: 1.25px;
  --container: 1080px;
  /* Consistent figure height for section images */
  --figure-h: 180px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-sans);font-size:var(--size-14);line-height:1.45}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gap-16)}
.hstack{display:flex;gap:var(--gap-12);align-items:center}
.vstack{display:flex;flex-direction:column;gap:var(--gap-12)}
.rule{border-bottom:1px solid var(--rule)}
.small{color:var(--muted);font-size:var(--size-13)}
.note{color:var(--muted)}

.card{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-12);padding:var(--gap-16)}

.input{padding:8px 10px;border:1px solid var(--ctrl-border);border-radius:var(--radius-8);background:var(--ctrl-bg);color:var(--fg);width:100%}
.input:focus{outline:none;box-shadow:0 0 0 3px var(--ctrl-focus)}
.textarea{padding:8px 10px;border:1px solid var(--ctrl-border);border-radius:var(--radius-8);background:var(--ctrl-bg);color:var(--fg);width:100%;min-height:96px;resize:vertical}
.textarea:focus{outline:none;box-shadow:0 0 0 3px var(--ctrl-focus)}

.btn{appearance:none;border:1px solid var(--ctrl-border);background:#fff;color:var(--accent);padding:8px 12px;border-radius:var(--radius-8);cursor:pointer;font-weight:500}
.btn:hover{background:#fafafa}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.primary:hover{filter:brightness(0.98)}

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

.h1,.h2,.h3{font-family:var(--font-serif);font-weight:500;letter-spacing:.1px;margin:0}
.h1{font-size:clamp(28px,4vw,32px);line-height:1.1}
.h2{font-size:var(--size-24);line-height:1.2}
.h3{font-size:var(--size-20);line-height:1.25}

.label{color:var(--muted);font-size:var(--size-12);margin-bottom:4px}
.deck{color:#4b5563;font-size:var(--size-16);line-height:1.35;margin:4px 0 10px 0}
.readtime{color:var(--muted);font-size:var(--size-12);text-transform:uppercase;letter-spacing:.08em}