/* ============================================================================
   Sovereign Systems — design tokens
   Premium dark trading-infrastructure aesthetic. One system, light + dark.
   Dark is the default look; a light palette is defined for completeness.
   ============================================================================ */

:root {
  /* --- Surfaces: deep graphite, layered ------------------------------------ */
  --bg:            #07080b;   /* page ground */
  --bg-soft:       #0a0c11;   /* faint panels, hero wells */
  --surface:       #10131b;   /* cards */
  --surface-2:     #161a24;   /* raised / hover */
  --surface-3:     #1d2230;   /* inputs, pressed */

  --line:          rgba(255,255,255,0.07);   /* hairline */
  --line-bright:   rgba(255,255,255,0.13);   /* emphasised border */

  /* --- Primary: quiet blue-violet ---------------------------------------- */
  --primary:       #6d7cff;
  --primary-bright:#8b97ff;
  --primary-dim:   rgba(109,124,255,0.14);
  --primary-line:  rgba(109,124,255,0.30);

  /* --- Secondary: restrained sovereign gold ----------------------------- */
  --gold:          #c9a463;
  --gold-bright:   #e6cd97;
  --gold-dim:      rgba(201,164,99,0.13);
  --gold-line:     rgba(201,164,99,0.28);

  /* --- Status --------------------------------------------------------------- */
  --ok:            #4fd39a;   /* successful execution */
  --ok-dim:        rgba(79,211,154,0.14);
  --warn:          #f0b25e;   /* warnings */
  --warn-dim:      rgba(240,178,94,0.14);
  --danger:        #f0837e;   /* errors / rejections */
  --danger-dim:    rgba(240,131,126,0.14);
  --info:          var(--primary);
  --info-dim:      var(--primary-dim);

  /* --- Text -------------------------------------------------------------- */
  --text:          #f2f0ec;
  --text-soft:     #b7b3ab;
  --text-muted:    #8a857c;
  --text-faint:    #625d55;
  --text-on-accent:#0a0710;

  /* --- Typography ------------------------------------------------------- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;

  --step--1: 0.8125rem;   /* 13px  captions, meta */
  --step-0:  0.9375rem;   /* 15px  body */
  --step-1:  1.0625rem;   /* 17px  lead */
  --step-2:  1.375rem;    /* 22px  h4/h3 */
  --step-3:  1.75rem;     /* 28px  h2 small */
  --step-4:  clamp(1.9rem, 3vw, 2.6rem);    /* h2 */
  --step-5:  clamp(2.3rem, 4.6vw, 3.6rem);  /* h1 */

  /* --- Space (4px base) ------------------------------------------------- */
  --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; --sp-10: 128px;

  /* --- Radius --------------------------------------------------------------- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 100px;

  /* --- Elevation (soft, restrained) ----------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 8px 20px -14px rgba(0,0,0,.6);
  --shadow-md: 0 1px 0 rgba(255,255,255,.03) inset, 0 20px 50px -26px rgba(0,0,0,.8);
  --shadow-lg: 0 1px 0 rgba(255,255,255,.045) inset, 0 36px 80px -30px rgba(0,0,0,.85);
  --shadow-primary: 0 18px 50px -22px rgba(109,124,255,.45);
  --shadow-gold:    0 18px 50px -22px rgba(201,164,99,.35);

  /* --- Layout --------------------------------------------------------------- */
  --maxw: 1180px;
  --maxw-prose: 720px;
  --nav-h: 68px;

  --ease: cubic-bezier(.2,.8,.2,1);
}

/* The product is dark, deliberately and consistently — a trading-terminal
   look, not a theme that follows the OS. Light is an explicit opt-in only
   (data-theme="light"), kept legible for print and a possible future toggle. */
:root[data-theme="light"] {
  --bg:#f6f6f4; --bg-soft:#eeeeeb; --surface:#ffffff; --surface-2:#f4f4f2; --surface-3:#e9e9e6;
  --line:rgba(10,12,20,0.10); --line-bright:rgba(10,12,20,0.18);
  --primary:#4a55d6; --primary-bright:#3a44c4; --primary-dim:rgba(74,85,214,0.10); --primary-line:rgba(74,85,214,0.28);
  --gold:#9c7c3e; --gold-bright:#82632c; --gold-dim:rgba(156,124,62,0.12); --gold-line:rgba(156,124,62,0.30);
  --ok:#1f9d63; --ok-dim:rgba(31,157,99,0.12);
  --warn:#b9791f; --warn-dim:rgba(185,121,31,0.12);
  --danger:#c4443f; --danger-dim:rgba(196,68,63,0.12);
  --text:#14161c; --text-soft:#3d4048; --text-muted:#5f626b; --text-faint:#8b8d95; --text-on-accent:#ffffff;
  --shadow-sm:0 1px 2px rgba(10,12,20,.08), 0 8px 20px -16px rgba(10,12,20,.25);
  --shadow-md:0 12px 40px -22px rgba(10,12,20,.28);
  --shadow-lg:0 28px 70px -30px rgba(10,12,20,.32);
}
@media print {
  :root { --bg:#fff; --surface:#fff; --text:#000; --text-soft:#222; --text-muted:#444; }
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 900px 500px at 12% -10%, rgba(109,124,255,0.08), transparent 70%),
    radial-gradient(ellipse 700px 500px at 92% 4%, rgba(201,164,99,0.05), transparent 70%);
}
:root[data-theme="light"] body::before { opacity: .5; }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--primary-dim); color: var(--primary-bright); }
:focus-visible { outline: 2px solid var(--primary-bright); outline-offset: 3px; border-radius: 3px; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p  { text-wrap: pretty; }