/* ============================================================
   TRUMP BANK — design tokens
   ------------------------------------------------------------
   The bank in daylight. Everything is sampled from the photo:
   the blue sky, the warm marble, the black lacquer signage and
   the polished gold letterforms. The PAGE is the marble; the
   NUMBERS live on black signage panels, exactly like the
   building.
   ============================================================ */

:root {
  /* ---- Marble — the page ---------------------------------- */
  --paper: #f2e9d6;
  --paper-2: #eadfc6;
  --paper-3: #e0d2b4;
  --paper-hi: #faf4e6;
  --vein: rgba(150, 126, 88, 0.14);

  /* ---- Sky — the top of the photo ------------------------- */
  --sky: #7db7e8;
  --sky-soft: #b9d8f1;
  --sky-wash: #d9eafa;

  /* ---- Black lacquer — the signage ------------------------ */
  --lacq-950: #070607;
  --lacq-900: #0d0c0e;
  --lacq-850: #121114;
  --lacq-800: #191719;
  --lacq-700: #232025;
  --lacq-line: rgba(245, 197, 66, 0.28);

  /* ---- Ink on marble -------------------------------------- */
  --ink: #17130d;
  --ink-soft: #57503f;
  --ink-faint: #8b8168;

  /* ---- Polished gold -------------------------------------- */
  --gold-800: #6b4708;
  --gold-700: #8a5d0c;
  --gold-600: #a97414;
  --gold-500: #c9881a;
  --gold-400: #e0a924;
  --gold-300: #f5c542;
  --gold-200: #f9dd8c;
  --gold-100: #fff6d5;

  /* The gradient that makes gold read as polished metal: bright crown, dark
     equator, bright base. The dark band is the whole trick. */
  --foil: linear-gradient(
    180deg,
    #fff6d5 0%,
    #f7d774 13%,
    #e8b93c 30%,
    #c9881a 47%,
    #8a5d0c 55%,
    #d9a52e 68%,
    #f7d774 86%,
    #fff6d5 100%
  );
  --foil-flat: linear-gradient(180deg, #f5c542 0%, #d99a1e 52%, #a97414 100%);
  --foil-rule: linear-gradient(90deg, transparent, var(--gold-500) 22%, var(--gold-200) 50%, var(--gold-500) 78%, transparent);

  /* ---- Signals -------------------------------------------- */
  --up: #128a47;          /* money green, dark enough for marble */
  --up-bright: #35c47a;   /* the same green on black signage     */
  --down: #c8102e;        /* the tie */
  --live: #22c55e;

  /* ---- Borders & shadows on marble ------------------------ */
  --rule: rgba(138, 93, 12, 0.32);
  --rule-strong: rgba(169, 116, 20, 0.55);
  --rule-dim: rgba(87, 80, 63, 0.16);

  --shadow: 0 22px 48px rgba(87, 60, 16, 0.18), 0 4px 12px rgba(87, 60, 16, 0.1);
  --shadow-sm: 0 8px 20px rgba(87, 60, 16, 0.14);
  --shadow-lacq: 0 24px 56px rgba(23, 19, 13, 0.36);
  --glow-gold: 0 0 26px rgba(224, 169, 36, 0.35);

  /* ---- Type ----------------------------------------------- */
  --font-display: "Cinzel", "Times New Roman", serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-h1: clamp(2.2rem, 4.6vw, 3.9rem);
  --t-d1: clamp(1.6rem, 3.1vw, 2.6rem);
  --t-body: clamp(0.95rem, 1vw, 1.06rem);
  --t-small: 0.82rem;
  --t-micro: 0.67rem;

  --t-clock: clamp(3.2rem, 7.4vw, 6rem);
  --t-stat: clamp(1.5rem, 2.9vw, 2.4rem);

  /* ---- Space ---------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;

  --shell: 1280px;
  --rail: 68px;
  --tape-h: 38px;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.34, 1.4, 0.64, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--paper-2);
}

body,
h1, h2, h3, h4,
p, figure, dl, dd, table, th, td, fieldset, legend {
  margin: 0;
  padding: 0;
}

fieldset { border: 0; }

ul[class],
ol[class] {
  list-style: none;
  margin: 0;
  padding: 0;
}

img, svg, canvas {
  display: block;
  max-width: 100%;
}

/* width/height attributes are presentational hints, and aspect-ratio is
   ignored when BOTH resolve to a length — without this, setting only a CSS
   width leaves the attribute height in force and the image renders wrong. */
img { height: auto; }

button, input, select {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

table {
  border-collapse: collapse;
  width: 100%;
}

a { color: inherit; }

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

:focus-visible {
  outline: 2px solid var(--gold-600);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* The UA rule is only `[hidden] { display: none }`, which ANY author
   `display` beats on specificity. Restore the intent. */
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}