/*
 * Brandbook tokens — Revolut Metal × Apple Liquid Glass × Swiss minimalism
 * Import on :root. See BRANDBOOK.md for the design system behind each token.
 */

:root {
  /* ─── Stage (dark foundation) ───────────────────────────────────── */
  --stage-black:    #0A0A0B;
  --stage-graphite: #151518;
  --stage-steel:    #1F2024;
  --stage-line:     #2A2B30;
  --stage-ink:      #5C5E66;
  --stage-chrome:   #B8BAC0;
  --stage-white:    #F5F5F7;

  /* ─── Field (light Swiss surface) ───────────────────────────────── */
  --field-white:    #FFFFFF;
  --field-bone:     #F5F5F7;
  --field-ink:      #0A0A0B;
  --field-muted:    #6E6F76;

  /* ─── Glass (translucent foreground) ────────────────────────────── */
  --glass-bubble:         rgba(255, 255, 255, 0.08);
  --glass-bubble-strong:  rgba(255, 255, 255, 0.14);
  --glass-border:         rgba(255, 255, 255, 0.18);
  --glass-field:          rgba(10, 10, 11, 0.06);
  --glass-backdrop:       blur(22px) saturate(160%);

  /* ─── Accents (use one, deliberately) ───────────────────────────── */
  --accent-platinum: #D9DBDC;
  --accent-electric: #4DA1FF;

  /* ─── Gradients (only two exist) ────────────────────────────────── */
  --grad-stage: radial-gradient(
    120% 80% at 15% 10%,
    #1C1D22 0%,
    #0A0A0B 55%,
    #050506 100%
  );
  --grad-metal: linear-gradient(
    135deg,
    #2A2B30 0%,
    #161619 48%,
    #0C0C0E 100%
  );

  /* ─── Radii ──────────────────────────────────────────────────────── */
  --radius-pill:   9999px;
  --radius-card:   20px;
  --radius-pane:   28px;
  --radius-chip:   4px;

  /* ─── Spacing (8px baseline) ────────────────────────────────────── */
  --s-1:  8px;
  --s-2:  16px;
  --s-3:  24px;
  --s-4:  32px;
  --s-5:  48px;
  --s-6:  64px;
  --s-7:  96px;
  --s-8:  120px;
  --s-9:  160px;
  --s-10: 200px;

  /* ─── Type ───────────────────────────────────────────────────────── */
  --font-display: "Fraunces", "GT Sectra", "Söhne Breit", Georgia, ui-serif, serif;
  --font-body:    "Geist", "Söhne", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "Berkeley Mono", ui-monospace, monospace;

  --fs-display-xxl: clamp(48px, 8vw, 96px);
  --fs-display-xl:  clamp(40px, 6vw, 72px);
  --fs-display-l:   clamp(32px, 4.5vw, 56px);
  --fs-heading-m:   clamp(24px, 2.8vw, 32px);
  --fs-heading-s:   clamp(20px, 1.8vw, 22px);
  --fs-body:        17px;
  --fs-small:       14px;
  --fs-micro:       11px;

  --lh-tight:  1.05;
  --lh-normal: 1.55;
  --tr-tight:  -0.02em;
  --tr-wide:   0.08em;

  /* ─── Motion ─────────────────────────────────────────────────────── */
  --ease-glass:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-page:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-liquid: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast:    200ms;
  --dur-med:     400ms;
  --dur-slow:    600ms;

  /* ─── Elevation ──────────────────────────────────────────────────── */
  --shadow-metal:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 1px 0 rgba(0,0,0,0.6),
    0 24px 60px -24px rgba(0,0,0,0.8);
  --shadow-glass:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 8px 32px rgba(0,0,0,0.25);
}

/* ─── Base reset hooks ─────────────────────────────────────────────── */

body {
  background: var(--grad-stage);
  color: var(--stage-white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

.slab { padding: clamp(96px, 14vw, 200px) clamp(24px, 6vw, 120px); }
.slab-stage { background: var(--grad-stage); color: var(--stage-white); }
.slab-field { background: var(--field-white); color: var(--field-ink); }
.slab > .content { max-width: 1120px; margin: 0 auto; }

.metal-card {
  background: var(--grad-metal);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-metal);
  padding: var(--s-4);
  color: var(--stage-white);
}

.glass-bubble {
  background: var(--glass-bubble);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-glass);
  padding: 12px 20px;
  color: var(--stage-white);
  transition: background var(--dur-fast) var(--ease-glass),
              transform var(--dur-fast) var(--ease-glass);
}
.glass-bubble:hover { background: var(--glass-bubble-strong); }

.glass-pane {
  background: var(--glass-bubble);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pane);
  box-shadow: var(--shadow-glass);
  padding: var(--s-4);
}

.hairline {
  height: 1px;
  background: var(--stage-line);
  opacity: 0.6;
}

h1, .display-xxl {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-xxl);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
}
.micro-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--stage-ink);
}