/* The Famous Experience — Spacing, layout & effects */
:root {
  /* Spacing scale */
  --tfe-space-1: 4px;
  --tfe-space-2: 8px;
  --tfe-space-3: 14px;   /* eyebrow gap */
  --tfe-space-4: 24px;   /* min column gap / eyebrow→headline */
  --tfe-space-5: 30px;
  --tfe-space-6: 48px;   /* max column gap */
  --tfe-space-7: 64px;
  --tfe-space-8: 96px;   /* slide margin (vertical) */
  --tfe-space-9: 110px;  /* slide margin (horizontal) */

  /* Layout */
  --tfe-slide-w: 1920px;
  --tfe-slide-h: 1080px;
  --tfe-margin-y: 96px;
  --tfe-margin-x: 110px;
  --tfe-col-gap: 32px;

  /* Radii — sharp by default */
  --tfe-radius-0: 0px;    /* slides, cards, buttons: sharp */
  --tfe-radius-docs: 6px; /* docs / web surfaces only */

  /* Borders */
  --tfe-border-w: 1px;          /* hairline */
  --tfe-border-accent-w: 3px;   /* pink top border on light cards */

  /* Shadows — restrained; dark UI leans on hairlines, not shadow */
  --tfe-shadow-card: 0 24px 60px rgba(0,0,0,0.45);
  --tfe-shadow-soft: 0 8px 30px rgba(0,0,0,0.35);

  /* Scrim — full-bleed photo → near-black gradient so titles stay legible */
  --tfe-scrim: linear-gradient(to bottom, rgba(10,10,11,0) 0%, rgba(10,10,11,0.55) 55%, var(--tfe-near-black) 100%);

  /* Diagonal-stripe placeholder fill */
  --tfe-placeholder: repeating-linear-gradient(
    -45deg,
    #141317 0px, #141317 8px,
    #0e0d10 8px, #0e0d10 16px);  /* @kind other */

  /* Motion */
  --tfe-ease: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ /* smooth, no bounce */
  --tfe-dur: 220ms;  /* @kind other */
}