/* sovrgn design system — bundled tokens (fonts via index <link>; this is colors+type+spacing+base). Source: Claude Design handoff bundle. */

/* sovrgn — Web fonts
   NOTE: The real sovrgn.ai typefaces are not published. These are
   close Google Fonts substitutes chosen to match the brand's
   technical/institutional "protocol" character:
     - Space Grotesk  → display / wordmark / headlines
     - IBM Plex Sans   → body / UI
     - IBM Plex Mono   → data, code, tickers, base_url
   Flagged for replacement once the real brand fonts are provided. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* sovrgn — Color tokens
   A dark "sovereign infrastructure / financial-markets terminal" palette.
   Base page color #0A0D14 is taken from the real site's theme-color meta. */

:root {
  /* ---- Ink scale: page → surfaces → borders (dark, blue-black) ---- */
  --ink-950: #07090F;   /* deepest void, behind page */
  --ink-900: #0A0D14;   /* page background (brand theme-color) */
  --ink-850: #0D111A;   /* sunken wells, code blocks */
  --ink-800: #111723;   /* surface / panel */
  --ink-750: #161D2B;   /* secondary surface */
  --ink-700: #1C2433;   /* raised card */
  --ink-650: #232C3D;   /* hover surface */
  --ink-600: #2B3447;   /* strong border / divider on dark */

  /* ---- Hairlines (over dark) ---- */
  --line-1: rgba(233, 240, 252, 0.06);  /* faint divider */
  --line-2: rgba(233, 240, 252, 0.10);  /* default border */
  --line-3: rgba(233, 240, 252, 0.16);  /* emphasised border */

  /* ---- Foreground / text ---- */
  --fg-1: #EEF2F8;   /* primary text */
  --fg-2: #A7B2C4;   /* secondary text */
  --fg-3: #6E7A90;   /* muted / captions */
  --fg-4: #49536A;   /* disabled / faint glyphs */

  /* ---- Gold: the sovereign / energy signal (primary brand accent) ---- */
  --gold-300: #F4CE84;
  --gold-400: #ECBB5C;
  --gold-500: #E3A93B;   /* primary accent */
  --gold-600: #C68E26;
  --gold-700: #9C6F1B;
  --gold-soft: rgba(227, 169, 59, 0.12);   /* tint fill */
  --gold-line: rgba(227, 169, 59, 0.30);   /* tint border */

  /* ---- Azure: sovereign-route / links / info ---- */
  --azure-300: #9CC0FA;
  --azure-400: #6FA0F5;
  --azure-500: #4D8BF0;
  --azure-600: #3570DA;
  --azure-soft: rgba(77, 139, 240, 0.12);
  --azure-line: rgba(77, 139, 240, 0.32);

  /* ---- Market semantics: seller ▲ (up) vs buyer ▼ (down) ---- */
  --up-400: #5FD6A0;
  --up-500: #43C98A;     /* exporter / seller / positive */
  --up-soft: rgba(67, 201, 138, 0.12);
  --down-400: #F0787D;
  --down-500: #E8585E;   /* importer / buyer / negative */
  --down-soft: rgba(232, 88, 94, 0.12);

  /* ---- Live pulse (uses gold) ---- */
  --live-500: var(--gold-500);

  /* =========================================================
     SEMANTIC ALIASES — reach for these in product code
     ========================================================= */

  /* surfaces */
  --bg-page: var(--ink-900);
  --bg-void: var(--ink-950);
  --surface-1: var(--ink-800);
  --surface-2: var(--ink-750);
  --surface-raised: var(--ink-700);
  --surface-sunken: var(--ink-850);
  --surface-hover: var(--ink-650);

  /* borders */
  --border: var(--line-2);
  --border-faint: var(--line-1);
  --border-strong: var(--line-3);

  /* text */
  --text-primary: var(--fg-1);
  --text-secondary: var(--fg-2);
  --text-muted: var(--fg-3);
  --text-disabled: var(--fg-4);
  --text-on-accent: #1A1206;   /* dark ink for text on gold */

  /* accent / actions */
  --accent: var(--gold-500);
  --accent-hover: var(--gold-400);
  --accent-press: var(--gold-600);
  --accent-soft: var(--gold-soft);
  --accent-line: var(--gold-line);

  /* links */
  --link: var(--azure-400);
  --link-hover: var(--azure-300);

  /* status */
  --positive: var(--up-500);
  --positive-soft: var(--up-soft);
  --negative: var(--down-500);
  --negative-soft: var(--down-soft);
  --warning: var(--gold-500);
  --warning-soft: var(--gold-soft);
  --info: var(--azure-500);
  --info-soft: var(--azure-soft);

  /* focus */
  --focus-ring: rgba(227, 169, 59, 0.55);
}

/* sovrgn — Typography tokens */

:root {
  /* ---- Families ---- */
  --font-display: 'Space Grotesk', 'Space Grotesk Fallback', system-ui, sans-serif;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', ui-monospace, monospace;

  /* ---- Weights ---- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Type scale (px) ---- */
  --text-display-xl: 76px;   /* hero "Neverstranded." */
  --text-display-l: 56px;
  --text-display-m: 42px;    /* section heads */
  --text-title-l: 32px;
  --text-title-m: 25px;
  --text-title-s: 20px;
  --text-body-l: 18px;
  --text-body-m: 16px;       /* base body */
  --text-body-s: 14px;
  --text-caption: 13px;
  --text-micro: 11px;        /* eyebrow / mono labels */

  /* ---- Line heights ---- */
  --leading-tight: 1.04;     /* display */
  --leading-snug: 1.18;      /* titles */
  --leading-normal: 1.5;     /* body */
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-display: -0.02em;   /* tight display */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.18em;    /* UPPERCASE mono eyebrows */

  /* ---- Semantic roles ---- */
  --role-eyebrow-font: var(--font-mono);
  --role-eyebrow-size: var(--text-micro);
  --role-eyebrow-tracking: var(--tracking-eyebrow);

  --role-display-font: var(--font-display);
  --role-heading-font: var(--font-display);
  --role-body-font: var(--font-sans);
  --role-data-font: var(--font-mono);
}

/* sovrgn — Spacing, radius, shadow, layout tokens */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Radii — restrained, technical (not pill-by-default) ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---- Border widths ---- */
  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* ---- Shadows (dark UI: subtle depth) ---- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 20px 56px rgba(0, 0, 0, 0.55);

  /* ---- Glows / signal halos ---- */
  --glow-gold: 0 0 0 1px var(--gold-line), 0 10px 34px rgba(227, 169, 59, 0.16);
  --glow-azure: 0 0 0 1px var(--azure-line), 0 10px 34px rgba(77, 139, 240, 0.16);
  --inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* ---- Focus ---- */
  --focus-ring-width: 3px;
  --focus-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-wide: 1360px;
  --gutter: var(--space-6);
  --section-y: var(--space-24);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms;   /* @kind other */
  --dur-base: 200ms;   /* @kind other */
  --dur-slow: 360ms;   /* @kind other */
}

/* sovrgn — Base element defaults (applies tokens to the page) */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body-m);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
}

/* Display & headings default to the display family */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin: 0;
  color: var(--text-primary);
}

p { margin: 0; }

a {
  color: var(--link);
  text-decoration: none;
}
a:hover { color: var(--link-hover); }

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

::selection {
  background: var(--gold-soft);
  color: var(--gold-300);
}

/* Eyebrow / mono label utility */
.sov-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Thin scrollbars to match the terminal aesthetic */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--ink-600) transparent;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}