/* ============================================================
   DAYONEWRLD / DESIGN TOKENS
   The single place to retune the whole site.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---- Surface ------------------------------------------------ */
  --ink:            #050505;   /* page canvas */
  --ink-raise:      #0a0a0a;   /* panels, sunken media wells */
  --ink-deep:       #030303;   /* the closing screen, one step darker */

  /* ---- Ink ---------------------------------------------------- */
  --cream:          #f1ede3;   /* primary text, 17.4:1 on canvas */
  --cream-soft:     #d9d4c8;   /* headline weight without full glare */
  --dim:            #8a877f;   /* secondary text, 5.7:1 on canvas */
  --dim-deep:       #7a776e;   /* captions and sealed values. Kept light enough
                                  to clear 4.5:1 on the darkest ground the
                                  page ever reaches. */

  /* ---- Rules -------------------------------------------------- */
  --rule:           #292929;   /* decorative hairlines only */
  --rule-warm:      #23211d;   /* hairlines over warm areas */
  --rule-live:      #605e58;   /* interactive borders, 3.1:1 on canvas */

  /* ---- Light -------------------------------------------------- */
  --halo:           rgba(241, 237, 227, 0.055);
  --halo-strong:    rgba(241, 237, 227, 0.10);
  --shade:          rgba(5, 5, 5, 0.72);

  /* ---- Type --------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Bodoni Moda", "Times New Roman", Times, serif;
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --fs-mega:    clamp(2.9rem, 11.2vw, 9.5rem);   /* the closing statement */
  --fs-major:   clamp(2.3rem, 7.4vw, 6.2rem);    /* brand statement */
  --fs-large:   clamp(1.7rem, 4.4vw, 3.4rem);    /* section headings */
  --fs-lede:    clamp(1.05rem, 2.1vw, 1.5rem);
  --fs-body:    clamp(0.9rem, 1.1vw, 1rem);
  --fs-label:   0.688rem;                        /* uppercase micro labels */
  --fs-nav:     0.688rem;

  --ls-label:   0.34em;   /* generous tracking for small uppercase */
  --ls-nav:     0.26em;
  --ls-wide:    0.16em;
  --ls-display: 0.012em;

  --lh-tight:   0.94;
  --lh-snug:    1.12;
  --lh-body:    1.68;

  /* ---- Space -------------------------------------------------- */
  --gutter:     clamp(1.25rem, 5vw, 4.5rem);
  --section-y:  clamp(5.5rem, 13vh, 11rem);
  --max:        1400px;
  --measure:    58ch;

  /* ---- Motion ------------------------------------------------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0.05, 0.36, 1);

  --dur-fast:   0.28s;
  --dur-mid:    0.7s;
  --dur-slow:   1.4s;
  --dur-veil:   1.1s;

  /* ---- Depth -------------------------------------------------- */
  --z-grain:    60;
  --z-nav:      70;
  --z-veil:     100;
}

/* Film grain, drawn once as fractal noise instead of shipping a texture file. */
:root {
  --grain-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='190' height='190' filter='url(%23n)'/%3E%3C/svg%3E");
}