:root {
  /* Color — extraídos literalmente de saved_resource.html (rgb → hex) */
  --color-bg: #000000;
  --color-surface: #1b1b1b;
  --color-surface-alt: #292929;
  --color-surface-strong: #2f2f2f;
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-strong: rgba(255, 255, 255, 0.16);
  --color-text: #eeeeee;
  --color-text-secondary: #808080;
  --color-text-secondary-2: #999999;
  --color-text-muted: #666666;
  --color-text-muted-2: #9c9c9c;
  --color-text-on-light: #1b1b1b;
  --color-line: #cecece;
  --color-accent: #0099ff;
  --color-on-accent: #0a0a0a;

  /* Typography */
  --font-sans: "Males", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: "Playfair Display", Georgia, serif;
  --font-reveal: "Urbanist", var(--font-sans);

  --fs-hero: clamp(2.75rem, 6vw + 1rem, 5.5rem);
  --fs-h2: clamp(2rem, 3.2vw + 1rem, 3.5rem);
  --fs-h3: clamp(1.375rem, 1.2vw + 1rem, 1.75rem);
  --fs-lead: clamp(1rem, 0.6vw + 0.85rem, 1.15rem);
  --fs-body: 1rem;
  --fs-small: 0.9rem;
  --fs-tiny: 0.75rem;

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.6;

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radii — escala real: 0 / 5 / 8 / 12 / 15 / 20 / 24 / 28 / 56 / 60 / 100(pill) / 300 */
  --radius-pill: 100px;
  --radius-blob: 300px;
  --radius-xl: 60px;
  --radius-lg: 56px;
  --radius-md: 24px;
  --radius-sm: 20px;
  --radius-xs: 12px;
  --radius-2xs: 8px;

  /* Layout */
  --container-max: 1360px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.4s;
  --dur-slow: 0.8s;

  /* Breakpoints (reference only, used in comments) */
  /* mobile: <= 809px | tablet: 810px - 1439px | desktop: >= 1440px */
}