/* SHTF Prep Tracker — tactical/utilitarian theme tokens + components. Light and dark share one design system (olive / amber / charcoal). Dark mode is toggled by class="dark" on (Tailwind class strategy). */ :root { --bg: #eceee6; --bg-grid: rgba(90, 107, 47, 0.05); --surface: #ffffff; --surface-2: #f4f5ef; --border: #d3d8c8; --border-strong: #b9c0a8; --text: #1e2328; --text-muted:#5c6470; --accent: #5a6b2f; /* olive */ --accent-strong:#47571f; --amber: #b5781a; --amber-soft:#fbf1dd; --danger: #b23a2e; --danger-soft:#fbe6e3; --ok: #4d7c2f; --ring-track:#e2e5da; --shadow: 0 1px 2px rgba(30,35,40,.06), 0 1px 3px rgba(30,35,40,.04); --font-data: ui-monospace, "SFMono-Regular", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace; } html.dark { --bg: #101215; --bg-grid: rgba(139, 160, 74, 0.045); --surface: #1a1d22; --surface-2: #22262c; --border: #2c313a; --border-strong: #3a414c; --text: #d8dce2; --text-muted:#8b929e; --accent: #9db553; /* brighter olive for dark */ --accent-strong:#b6cd66; --amber: #e0a83b; --amber-soft:#2a2417; --danger: #e26a5c; --danger-soft:#2c1a18; --ok: #7ba24a; --ring-track:#2c313a; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3); } body { background-color: var(--bg); background-image: linear-gradient(var(--bg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px); background-size: 28px 28px; color: var(--text); } /* Typography helpers */ .font-data { font-family: var(--font-data); font-variant-numeric: tabular-nums; } .tracking-label { letter-spacing: .08em; text-transform: uppercase; } .muted { color: var(--text-muted); } /* Surfaces */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: .5rem; box-shadow: var(--shadow); } .card-2 { background: var(--surface-2); border: 1px solid var(--border); border-radius: .5rem; } /* Nav */ .nav { background: var(--surface); border-bottom: 1px solid var(--border); backdrop-filter: saturate(1.1); } .nav a, .nav button { color: var(--text-muted); transition: color .12s; } .nav a:hover, .nav button:hover { color: var(--accent); } .nav a.active { color: var(--accent); font-weight: 600; } .brand { color: var(--text); } .brand .brand-accent { color: var(--accent); } /* Buttons */ .btn { display:inline-flex; align-items:center; gap:.4rem; border-radius:.4rem; padding:.5rem .85rem; font-size:.875rem; font-weight:600; cursor:pointer; border:1px solid transparent; transition:background .12s,border-color .12s,color .12s; min-height:2.25rem; } .btn-primary { background: var(--accent); color:#fff; } html:not(.dark) .btn-primary { color:#fff; } html.dark .btn-primary { color:#12140f; } .btn-primary:hover { background: var(--accent-strong); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn-ghost:hover { background: var(--surface-2); } .link { color: var(--accent); } .link:hover { text-decoration: underline; } .link-danger { color: var(--danger); } .link-danger:hover { text-decoration: underline; } /* Form fields */ .field { width: 100%; background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text); border-radius: .4rem; padding: .5rem .7rem; font-size: .9rem; min-height: 2.25rem; } .field:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } .field::placeholder { color: var(--text-muted); } label .lbl, .lbl { display:block; font-size:.75rem; font-weight:600; color: var(--text-muted); letter-spacing:.04em; text-transform:uppercase; margin-bottom:.25rem; } /* Tables */ .tbl { width:100%; border-collapse:collapse; font-size:.875rem; } .tbl thead th { background: var(--surface-2); color: var(--text-muted); text-align:left; padding:.6rem .7rem; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; border-bottom:1px solid var(--border); } .tbl tbody td { padding:.6rem .7rem; border-top:1px solid var(--border); } .tbl tbody tr:hover { background: var(--surface-2); } /* Badges */ .badge { display:inline-block; padding:.15rem .55rem; border-radius:999px; font-size:.7rem; font-weight:600; letter-spacing:.03em; border:1px solid transparent; } .badge-critical { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); } .badge-important { background: var(--amber-soft); color: var(--amber); border-color: var(--amber); } .badge-desirable { background: var(--surface-2); color: var(--text-muted); border-color: var(--border-strong); } /* Alert box */ .alert { background: var(--amber-soft); border:1px solid var(--amber); border-radius:.5rem; } .alert-title { color: var(--amber); } /* Category icons */ .cat-icon { width:1.5rem; height:1.5rem; stroke: var(--accent); stroke-width:1.75; fill:none; stroke-linecap:round; stroke-linejoin:round; flex:none; } .cat-icon-lg { width:2rem; height:2rem; } /* Status ring (dashboard) */ .ring-wrap { position:relative; width:64px; height:64px; flex:none; } .ring-wrap svg { transform: rotate(-90deg); } .ring-track { stroke: var(--ring-track); } .ring-num { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-data); font-weight:700; font-size:.8rem; } /* status color helper set via inline var --st */ .st-ok { --st: var(--ok); } .st-warn { --st: var(--amber); } .st-low { --st: var(--danger); } /* Theme toggle */ .theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:2.1rem; height:2.1rem; border-radius:.4rem; border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text-muted); cursor:pointer; } .theme-toggle:hover { color:var(--accent); } .theme-toggle svg { width:1.1rem; height:1.1rem; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } html.dark .icon-sun { display:block; } html.dark .icon-moon { display:none; } html:not(.dark) .icon-sun { display:none; } html:not(.dark) .icon-moon { display:block; } /* Manual risk-level gauge banners - Feature C */ .risk-banner { border-width: 1px; border-style: solid; } .risk-atencao { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); } .risk-alerta { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); } .risk-critico { background: #4a0f0a; border-color: #8a2318; color: #ffb3a3; }