/* =============================================================
   Sequel Design System — shared tokens & primitives
   "A private screening after dark — a single warm lamp in an
   otherwise unlit cinema." Strictly achromatic (0% colorfulness):
   void black canvas, pure white text, three neutral grays, and a
   single warm off-white (lamp cream) reserved for primary actions.
   ============================================================= */
:root {
  /* Colors */
  --color-void-black: #000000;
  --color-pure-white: #ffffff;
  --color-charcoal: #202020;
  --color-graphite: #333333;
  --color-lamp-cream: #f5f5f0;
  --color-smoke: #999999;

  /* Hairlines / glass — never a 1px solid #fff */
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);
  --glass-fill: rgba(200, 200, 200, 0.08);
  --inset: #000000;
  --inset-hover: #181818;

  /* Typography — VisueltPro → Inter, Bradford → Playfair Display */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* Radius */
  --radius-lg: 10px;   /* cards, media */
  --radius-full: 9999px; /* buttons, badges, chips */
  --radius-input: 0px;   /* inputs are square */

  /* Shadows — functional only (cream button + glass badge) */
  --shadow-xl: rgba(0, 0, 0, 0.35) 0px 10px 30px 0px, rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset;
  --shadow-lg: rgba(0, 0, 0, 0.15) 0px 4px 20px 0px;

  /* Layout */
  --page-max-width: 1200px;

  /* Motion — slow-out, weighted, cinematic (never bounce/spring) */
  --ease: cubic-bezier(0.625, 0.05, 0, 1);
}

::selection {
  background: var(--color-lamp-cream);
  color: var(--color-void-black);
}

/* ---------- Primitives ---------- */

/* Uppercase tracked label / metadata */
.sq-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-smoke);
}

/* The single emotional/payoff word inside a display headline */
.sq-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
}

/* Primary filled pill — the only chromatic-temperature surface */
.sq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  padding: 14px 24px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-lamp-cream);
  color: var(--color-void-black);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.sq-btn:hover { background: #ffffff; transform: translateY(-2px); }

/* Ghost outline pill — secondary action */
.sq-btn--ghost {
  background: transparent;
  color: var(--color-pure-white);
  border: 1px solid var(--hairline-strong);
  box-shadow: none;
}
.sq-btn--ghost:hover { background: transparent; border-color: var(--color-pure-white); }

/* Frosted glass badge — rim-lit to read as glass catching light */
.sq-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-pure-white);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: var(--glass-fill);
  border: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--shadow-xl);
}

/* Elevated card — one quiet tone step above the void, no shadow */
.sq-card {
  background: var(--color-charcoal);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: none;
}