/* ==========================================================================
   Silver Glass — root tokens + base element styles.
   Source of truth for the visual language is DESIGN.md. Rebrand by editing
   tokens here only; components inherit automatically.
   ========================================================================== */

:root {
  /* Palette — white & silver */
  --white: #ffffff;
  --silver-050: #f6f8fb;
  --silver-100: #eef1f6;
  --silver-200: #e2e7ee;
  --silver-300: #d2d9e3;
  --silver-400: #b9c2d0;
  --silver-500: #9aa6b8;
  --silver-600: #78859a;

  /* Ink — text */
  --ink-900: #1b2430;
  --ink-700: #333f4f;
  --ink-500: #5a6676;
  --ink-400: #78859a;

  /* Accent & intent */
  --accent: #5b7189;
  --accent-strong: #3f5872;
  --accent-soft: rgba(91, 113, 137, .12);
  --sponsor: #d6336c;
  --sponsor-soft: rgba(214, 51, 108, .10);

  --ok: #1f7a54;
  --warn: #9a6b16;
  --danger: var(--sponsor);

  /* Transparent glass surfaces */
  --glass: rgba(255, 255, 255, .62);
  --glass-strong: rgba(255, 255, 255, .90);
  --glass-faint: rgba(255, 255, 255, .40);
  --glass-border: rgba(255, 255, 255, .75);
  --hairline: rgba(120, 133, 154, .28);
  --surface-solid: rgba(255, 255, 255, .98);
  --blur: saturate(160%) blur(14px);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(27, 36, 48, .06), 0 2px 8px rgba(27, 36, 48, .05);
  --shadow-md: 0 6px 22px rgba(27, 36, 48, .10);
  --shadow-lg: 0 18px 48px rgba(27, 36, 48, .16);

  /* Geometry */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --maxw: 1120px;
  --header-h: 64px;

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo,
    Consolas, "Liberation Mono", monospace;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-700);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Fixed, layered silver gradient backdrop */
  background-color: var(--silver-100);
  background-image:
    radial-gradient(1100px 620px at 12% -8%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 60%),
    radial-gradient(980px 560px at 92% 2%, rgba(255, 255, 255, .70), rgba(255, 255, 255, 0) 55%),
    radial-gradient(1200px 760px at 50% 118%, var(--silver-300), rgba(210, 217, 227, 0) 60%),
    linear-gradient(160deg, var(--silver-100) 0%, #dbe1ea 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

img {
  max-width: 100%;
  height: auto;
}

/* ---- Headings & text ---- */
h1,
h2,
h3,
h4 {
  color: var(--ink-900);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
}

h1 {
  font-size: clamp(2rem, 4.6vw, 3rem);
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
}

h3 {
  font-size: 1.2rem;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--accent-strong);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

strong {
  color: var(--ink-900);
}

hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 2rem 0;
}

ul,
ol {
  margin: 0 0 1rem;
  padding-left: 1.35rem;
}

li {
  margin: .3rem 0;
}

/* ---- Inline & block code (base; refined in components.css) ---- */
code {
  font-family: var(--mono);
  font-size: .88em;
}

/* ---- Visible focus for keyboard users ---- */
:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}