/* ============================================================================
   SOC Design System  ·  soc.css  ·  v1.0
   One source of truth for the Stream of Consciousness / Gemixx Hub surfaces.
   Brand: Gemixx gold. Type: Archivo (UI/display) + Hanken Grotesk (body).
   Dark is the default; light is a deliberate warm-cream theme. Both are driven
   entirely by the tokens in :root so a page only ever styles through them.
   Load AFTER the font <link> and BEFORE any page-specific <style>.
   ========================================================================== */

:root{
  /* ---- brand ---- */
  --brand:#e8a33d; --brand-strong:#f2b659; --brand-ink:#1b1206;
  /* ---- neutrals (warm, gold-biased — never a flat grey) ---- */
  --bg:#141109; --surface:#1d190f; --surface-2:#262016; --surface-3:#2f281b;
  --ink:#f4efe4; --muted:#a79c88; --faint:#6f6757;
  --line:rgba(240,220,180,.10); --line-2:rgba(240,220,180,.16);
  /* ---- semantic status (separate from brand) ---- */
  --ok:#46c98a; --warn:#e8b84b; --danger:#ef5a4c; --info:#63a8f2;
  --ok-bg:rgba(70,201,138,.13); --warn-bg:rgba(232,184,75,.14);
  --danger-bg:rgba(239,90,76,.14); --info-bg:rgba(99,168,242,.14);
  /* ---- type ---- */
  --font-ui:'Archivo','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-body:'Hanken Grotesk','Segoe UI',system-ui,-apple-system,sans-serif;
  --t-xs:11px; --t-sm:12.5px; --t-base:14px; --t-md:16px; --t-lg:19px; --t-xl:24px; --t-2xl:30px;
  /* ---- shape / depth / motion ---- */
  --r-sm:8px; --r:11px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --sp:4px;
  --shadow-1:0 1px 2px rgba(0,0,0,.28);
  --shadow-2:0 8px 24px -12px rgba(0,0,0,.5);
  --shadow-3:0 24px 60px -28px rgba(0,0,0,.65);
  --ring:0 0 0 3px rgba(232,163,61,.45);
  --ease:.16s cubic-bezier(.4,0,.2,1);
  --tap:44px;              /* min touch target */
}
/* light theme: explicit choice wins over OS, OS dark wins over bare light */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; } }
:root[data-theme="light"],
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]){
  --brand:#b4791e; --brand-strong:#a86d16; --brand-ink:#ffffff;
  --bg:#f6f3ec; --surface:#ffffff; --surface-2:#efe9dd; --surface-3:#e7dfcf;
  --ink:#221d14; --muted:#6b6153; --faint:#9a9081;
  --line:rgba(40,30,10,.12); --line-2:rgba(40,30,10,.18);
  --ok:#17804c; --danger:#bf2114; --info:#2f6fd0;
  --ok-bg:rgba(23,128,76,.1); --warn-bg:rgba(180,121,30,.14);
  --danger-bg:rgba(191,33,20,.09); --info-bg:rgba(47,111,208,.1);
  --shadow-2:0 8px 24px -14px rgba(60,45,15,.28);
  --shadow-3:0 24px 60px -30px rgba(60,45,15,.32);
} }
:root[data-theme="light"]{
  --brand:#b4791e; --brand-strong:#a86d16; --brand-ink:#ffffff;
  --bg:#f6f3ec; --surface:#ffffff; --surface-2:#efe9dd; --surface-3:#e7dfcf;
  --ink:#221d14; --muted:#6b6153; --faint:#9a9081;
  --line:rgba(40,30,10,.12); --line-2:rgba(40,30,10,.18);
  --ok:#17804c; --danger:#bf2114; --info:#2f6fd0; color-scheme:light;
}

/* ---- reset / base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:var(--t-base);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-ui);font-weight:700;line-height:1.2;letter-spacing:-.01em;text-wrap:balance;margin:0}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

/* ---- eyebrow / labels ---- */
.sds-eyebrow{font-family:var(--font-ui);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brand)}
.sds-label{font-family:var(--font-ui);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}

/* ---- buttons ---- */
.sds-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap);padding:0 18px;font-family:var(--font-ui);font-weight:600;
  font-size:var(--t-base);border-radius:var(--r);border:1px solid transparent;
  cursor:pointer;transition:background var(--ease),border-color var(--ease),transform var(--ease);
  user-select:none;white-space:nowrap}
.sds-btn:active{transform:translateY(1px)}
.sds-btn:disabled{opacity:.5;cursor:default;transform:none}
.sds-btn--primary{background:var(--brand);color:var(--brand-ink)}
.sds-btn--primary:hover{background:var(--brand-strong)}
.sds-btn--ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}
.sds-btn--ghost:hover{border-color:var(--brand);color:var(--brand)}
.sds-btn--subtle{background:var(--surface-2);color:var(--ink);border-color:var(--line)}
.sds-btn--subtle:hover{background:var(--surface-3)}
.sds-btn--danger{background:var(--danger);color:#fff}
.sds-btn--block{width:100%}

/* ---- fields ---- */
.sds-field{display:block;text-align:left;margin-bottom:12px}
.sds-field>span{display:block;font-family:var(--font-ui);font-size:var(--t-sm);
  font-weight:600;color:var(--muted);margin-bottom:6px}
.sds-input{width:100%;min-height:var(--tap);background:var(--surface-2);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;
  font-family:var(--font-body);font-size:var(--t-md);transition:border-color var(--ease)}
.sds-input::placeholder{color:var(--faint)}
.sds-input:hover{border-color:var(--line-2)}

/* ---- card ---- */
.sds-card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-1)}
.sds-card--raised{box-shadow:var(--shadow-2)}

/* ---- pills / status badges ---- */
.sds-pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-ui);
  font-size:var(--t-xs);font-weight:700;letter-spacing:.03em;padding:3px 10px;
  border-radius:var(--r-pill);background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.sds-pill--ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.sds-pill--warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.sds-pill--danger{background:var(--danger-bg);color:var(--danger);border-color:transparent}
.sds-pill--info{background:var(--info-bg);color:var(--info);border-color:transparent}

/* ---- app bar ---- */
.sds-appbar{display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:var(--surface);border-bottom:1px solid var(--line);
  padding-top:calc(14px + env(safe-area-inset-top))}
.sds-appbar .sds-mark{width:32px;height:32px;border-radius:9px;flex:0 0 auto}
.sds-appbar b{font-family:var(--font-ui);font-size:var(--t-md);font-weight:700}

/* ---- loading skeleton ---- */
.sds-skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);
  background-size:400% 100%;animation:sds-shimmer 1.3s ease infinite;border-radius:var(--r-sm);min-height:14px}
@keyframes sds-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ---- spinner ---- */
.sds-spin{width:20px;height:20px;border:2.5px solid var(--line-2);border-top-color:var(--brand);
  border-radius:50%;animation:sds-rot .7s linear infinite;display:inline-block}
@keyframes sds-rot{to{transform:rotate(360deg)}}

/* ---- empty state ---- */
.sds-empty{text-align:center;padding:40px 20px;color:var(--muted)}
.sds-empty .sds-empty__ic{font-size:30px;opacity:.6;margin-bottom:10px}

/* ============================================================================
   ACCESSIBILITY — applies to every surface that loads this file
   ========================================================================== */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-sm)}
.sds-btn:focus-visible,.sds-input:focus-visible{outline:none;box-shadow:var(--ring);border-color:var(--brand)}
.sds-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}