/* ============================================================
   BEACON — AptonWorks Design System · Tokens & Foundations
   Cool blue-gray · blue primary · one orange accent · light + dark
   ============================================================ */

/* ---- LIGHT (default) ---- */
:root{
  /* canvas & surfaces */
  --canvas:#F4F7FB;
  --surface:#FFFFFF;
  --surface-raised:#EEF3FA;
  --inset:#E9EEF7;
  /* borders */
  --border-subtle:#E7ECF5;
  --border:#DCE4F0;
  --border-strong:#C2CCDE;
  /* text */
  --text:#0E1A30;
  --text-secondary:#3F4D67;
  --muted:#64718A;
  /* brand */
  --primary:#2B5AD3;
  --primary-hover:#1F46AE;
  --primary-press:#173A93;
  --primary-tint:#E3EAFB;
  --on-primary:#FFFFFF;
  --link:#2B5AD3;
  /* accent (orange) — always pairs with ink text */
  --accent:#FFB001;
  --accent-hover:#E89E00;
  --on-accent:#08090C;
  --accent-ink:#8A5A00;     /* amber text/icon on light */
  --accent-soft:#FFF4D8;
  --accent-line:#F3D592;
  /* focus */
  --focus:#2B5AD3;
  /* status */
  --info:#2B5AD3;    --info-soft:#E3EAFB;   --info-ink:#1F46AE;
  --success:#1E9E6A; --success-soft:#DBF3E8; --success-ink:#157A51;
  --warning:#FFB001; --warning-soft:#FFF4D8;--warning-ink:#8A5A00;
  --danger:#D64545;  --danger-soft:#FBE3E3; --danger-ink:#A32E2E;
  /* supporting brand */
  --deep-blue:#2144A0;
  --periwinkle:#BDCAF2;
  /* elevation */
  --shadow-1:0 1px 2px rgba(20,30,55,.06);
  --shadow-2:0 4px 16px -4px rgba(20,30,55,.12);
  --shadow-3:0 18px 44px -16px rgba(20,30,55,.22);
  --ring:0 0 0 4px rgba(43,90,211,.18);
}

/* ---- DARK ---- */
[data-theme="dark"]{
  --canvas:#08090C;
  --surface:#141620;
  --surface-raised:#1E212B;
  --inset:#0A0B10;
  --border-subtle:#1E212B;
  --border:#313542;
  --border-strong:#474C5B;
  --text:#FBFAFF;
  --text-secondary:#B2B8C6;
  --muted:#8B91A2;
  --primary:#2B5AD3;        /* fills stay Apton Blue */
  --primary-hover:#3F6AD7;
  --primary-press:#5077DB;
  --primary-tint:#16294A;
  --on-primary:#FFFFFF;
  --link:#7E9AE5;           /* lighter for small text on dark */
  --accent:#FFB001;
  --accent-hover:#FEBD2F;
  --on-accent:#08090C;
  --accent-ink:#FEBD2F;     /* amber text/icon on dark */
  --accent-soft:#2A2210;
  --accent-line:#4A3A18;
  --focus:#5077DB;
  --info:#5077DB;    --info-soft:#16294A;   --info-ink:#ACBDEE;
  --success:#2BB47C; --success-soft:#0F2A20; --success-ink:#7BE0B6;
  --warning:#FFB001; --warning-soft:#2A2210;--warning-ink:#FEBD2F;
  --danger:#E66A6A;  --danger-soft:#2C1414; --danger-ink:#F2A6A6;
  --deep-blue:#5077DB;
  --periwinkle:#BDCAF2;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 6px 20px -6px rgba(0,0,0,.55);
  --shadow-3:0 20px 50px -16px rgba(0,0,0,.7);
  --ring:0 0 0 4px rgba(80,119,219,.35);
}

/* ---- spacing / radius / type scale (theme-independent) ---- */
:root{
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;
  --r-sm:4px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-pill:999px;
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-text:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,0,0,1);
}

/* ---- reset / base ---- */
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{font-family:var(--font-text);background:var(--canvas);color:var(--text);
  transition:background .35s var(--ease),color .35s var(--ease);}
a{color:var(--link);text-decoration:none;}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}

/* ---- type utilities ---- */
.t-display{font-family:var(--font-display);font-weight:600;font-size:54px;line-height:1.06;letter-spacing:-.02em;}
.t-h1{font-family:var(--font-display);font-weight:600;font-size:34px;line-height:1.12;letter-spacing:-.018em;}
.t-h2{font-family:var(--font-display);font-weight:600;font-size:24px;line-height:1.18;letter-spacing:-.012em;}
.t-h3{font-family:var(--font-text);font-weight:600;font-size:19px;line-height:1.3;}
.t-body-lg{font-size:18px;line-height:1.6;font-weight:400;}
.t-body{font-size:16px;line-height:1.6;font-weight:400;}
.t-sm{font-size:14px;line-height:1.5;}
.t-caption{font-size:12.5px;line-height:1.45;font-weight:500;}
.t-label{font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;}
.t-mono{font-family:var(--font-mono);}
.muted{color:var(--muted);}
.secondary{color:var(--text-secondary);}