/* ShortsForge design tokens — calm, readable, WCAG AA in both themes.
   Semantic names are shared by Tailwind (see base.html) and this file; components never use raw hex. */
:root {
  --bg: #F6F8FB; --surface: #FFFFFF; --muted: #EEF2F7; --fg: #0F172A; --fg-2: #334155; --fg-3: #64748B;
  --primary: #1E40AF; --primary-hover: #1E3A8A; --on-primary: #FFFFFF; --primary-soft: #E0E8FF;
  --accent: #B45309; --accent-soft: #FEF3C7;
  --ok: #15803D; --ok-soft: #DCFCE7; --ok-strong: #15803D; --ok-hover: #166534; --on-ok: #FFFFFF; --warn: #B45309; --warn-soft: #FEF3C7; --danger: #B91C1C; --danger-soft: #FEE2E2;
  --info: #1D4ED8; --info-soft: #DBEAFE;
  --border: #E2E8F0; --ring: #2563EB; --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0B1220; --surface: #121A2B; --muted: #1A2438; --fg: #E5E9F0; --fg-2: #C3CCDA; --fg-3: #8B97AA;
  --primary: #6B9BFF; --primary-hover: #8DB2FF; --on-primary: #0B1220; --primary-soft: #1B2A4A;
  --accent: #F2B444; --accent-soft: #3A2C10;
  --ok: #4ADE80; --ok-soft: #12321F; --ok-strong: #22C55E; --ok-hover: #4ADE80; --on-ok: #052E16; --warn: #FBBF24; --warn-soft: #3A2C10; --danger: #F87171; --danger-soft: #3B1616;
  --info: #7AA7FF; --info-soft: #182744;
  --border: #243049; --ring: #8DB2FF; --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  color-scheme: dark;
}
html, body { background: var(--bg); color: var(--fg); font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; }
body { font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body h1, body h2, body h3 { color: var(--fg); letter-spacing: -0.01em; }  /* body-scoped: beats Tailwind's reset */
body h1 { font-weight: 700; } body h2, body h3 { font-weight: 650; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.num { font-variant-numeric: tabular-nums; }
a { color: inherit; }
.link { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; padding: 0 1rem;
       border-radius: 10px; font-weight: 600; font-size: .925rem; border: 1px solid var(--border); background: var(--surface);
       color: var(--fg); cursor: pointer; transition: background-color .15s ease-out, border-color .15s ease-out, transform .1s; }
/* Every variant defines its own hover so text/background contrast never breaks (was: white-on-white Resume). */
.btn:hover { background: var(--muted); border-color: var(--fg-3); color: var(--fg); }
.btn:active { transform: scale(.98); }
.btn[disabled], .btn.htmx-request, button[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); }
.btn-danger { background: var(--surface); border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.btn-ok { background: var(--ok-strong); border-color: var(--ok-strong); color: var(--on-ok); }
.btn-ok:hover { background: var(--ok-hover); border-color: var(--ok-hover); color: var(--on-ok); }
.btn-sm { min-height: 36px; padding: 0 .75rem; font-size: .85rem; border-radius: 8px; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

input, select, textarea { background: var(--surface); border: 1px solid var(--border); color: var(--fg); border-radius: 10px;
                          min-height: 44px; padding: .5rem .75rem; width: 100%; font: inherit; }
input:focus, select:focus, textarea:focus { border-color: var(--ring); outline: 2px solid color-mix(in srgb, var(--ring) 35%, transparent); }
textarea { min-height: 120px; font-family: ui-monospace, Menlo, monospace; font-size: .85rem; }
input[type=checkbox], input[type=radio] { min-height: auto; width: 1.1rem; height: 1.1rem; flex: none; padding: 0; margin-top: .2rem;
                                          accent-color: var(--primary); }
label { color: var(--fg-2); font-size: .875rem; font-weight: 500; display: inline-block; margin-bottom: .25rem; }

.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; font-size: .75rem;
         font-weight: 600; background: var(--muted); color: var(--fg-2); white-space: nowrap; }
.b-ok { background: var(--ok-soft); color: var(--ok); } .b-warn { background: var(--warn-soft); color: var(--warn); }
.b-danger { background: var(--danger-soft); color: var(--danger); } .b-info { background: var(--info-soft); color: var(--info); }
.b-pink { background: var(--primary-soft); color: var(--primary); }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; color: var(--fg-3); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
th, td { padding: .7rem .7rem; border-bottom: 1px solid var(--border); vertical-align: top; }
tr.row-link { cursor: pointer; transition: background-color .12s; } tr.row-link:hover, tr.row-link.sel { background: var(--muted); }

.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; overflow-x: auto; }
.tab { padding: .7rem 1rem; font-weight: 600; font-size: .925rem; color: var(--fg-3); border-bottom: 2px solid transparent;
       white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; gap: .4rem; }
.tab:hover { color: var(--fg); } .tab[aria-current="page"] { color: var(--primary); border-color: var(--primary); }

.skeleton { background: linear-gradient(90deg, var(--muted), var(--surface), var(--muted)); background-size: 200% 100%;
            animation: sk 1.2s ease-in-out infinite; border-radius: 8px; }
@keyframes sk { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
.htmx-indicator { display: none; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-flex; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Theme switch (segmented control) */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; padding: 2px; background: var(--muted); }
.seg button { display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; padding: 0 .6rem; border-radius: 8px;
              font-size: .8rem; font-weight: 600; color: var(--fg-3); cursor: pointer; }
.seg button:hover { color: var(--fg); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: var(--shadow); }
/* Clickable cards (quick actions) */
.card-action { transition: background-color .15s ease-out, border-color .15s ease-out; cursor: pointer; }
.card-action:hover { background: var(--muted); border-color: var(--primary); }
details > summary::-webkit-details-marker { display: none; }
/* segmented radio groups (Create page): the span after a visually-hidden radio acts as the segment */
.seg label > span { border-radius: 8px; color: var(--fg-2); font-weight: 600; font-size: .9rem; }
.seg label:hover > span { color: var(--fg); }
.seg label > input:checked + span { background: var(--surface); color: var(--fg); box-shadow: var(--shadow); }
.seg label > input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 1px; }
/* Stat cells and cards never force the page wider than the screen */
.badge-wrap { white-space: normal; text-align: left; }
section[id], .scroll-anchor { scroll-margin-top: 5rem; }
/* Sliders: big readable value + live explanation underneath (see macros.slider, app.js HINTS) */
input[type=range] { min-height: 32px; height: 32px; padding: 0; border: 0; background: transparent; accent-color: var(--primary); cursor: pointer; }
input[type=range]:focus { outline: none; } input[type=range]:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.slider output { font-size: 1rem; }