@layer tokens {
  :root {
    /* ---- Primitives. Referenced only by the semantic tier below. ---- */
    --sf-ink-900:   #08090C;
    --sf-ink-800:   #0E1118;
    --sf-ink-600:   #1C212B;
    --sf-paper-50:  #FAFAF8;
    --sf-paper-100: #F2F1ED;
    --sf-grey-500:  #6B7078;
    --sf-grey-300:  #A8ADB4;
    --sf-chalk:     #FFFFFF;
    /* The one accent, taken from the logo. Every world shares it. */
    --sf-brand:     #C8202E;
    --sf-brand-lit: #E8303F;

    /* ---- Semantic. This is all components are allowed to read. ---- */
    --surface:      var(--sf-ink-900);
    --surface-2:    var(--sf-ink-800);
    --ink:          var(--sf-chalk);
    --ink-quiet:    var(--sf-grey-300);
    --accent:       var(--sf-brand);
    --rule:         color-mix(in oklab, var(--ink) 16%, transparent);

    --font-display: 'Archivo', system-ui, sans-serif;
    --font-body:    'Archivo', system-ui, sans-serif;
    --display-wdth: 112;      /* variable width axis; worlds override */
    --display-wght: 800;
    --display-tracking: -0.03em;

    /* One ratio for every work card, so the grid stays regular. Portrait,
       because much of the work is shot vertical — landscape films fill the
       card and crop at the sides, which at thumbnail size is the right
       trade for a grid that reads evenly. */
    --card-ratio:   4 / 5;

    --measure:      66ch;
    --rhythm:       clamp(3rem, 7vw, 7rem);
    --gutter:       clamp(1rem, 4vw, 3rem);
    --radius:       0px;

    /* Motion. Worlds override the feel; components never hardcode either. */
    --ease-world:   cubic-bezier(.2, .9, .1, 1);
    --dur-assemble: .45s;
    --dur-reveal:   .5s;
    --dur-vt:       .45s;
  }
}