/* Design tokens: the one place colour, type, spacing and motion are decided. Everything else in v2 reads from here,
   so changing a value here changes it everywhere. */

:root {
  /* colour */
  --paper: #deded5;        /* the page */
  --paper-light: #ecece5;  /* raised surfaces */
  --ink: #1d1d1b;          /* text, and the logo disc on light */
  --muted: #74716a;
  --dark: #121211;         /* the holding screen */
  --accent: #ff5a36;       /* the logo's orange */
  --box: #cfcfc6;          /* a placeholder image */

  /* type: one family for everything (Inter Tight, decided), in a handful of sizes */
  --font: "Inter Tight", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fs-s: 12px;
  --fs-m: 16px;
  --fs-l: clamp(20px, 2vw, 28px);
  --fs-xl: clamp(32px, 5vw, 72px);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --lh-tight: 1.05;
  --lh-body: 1.5;

  /* space and shape */
  --gap: clamp(12px, 1.6vw, 24px);   /* between boxes */
  --pad: clamp(16px, 2.4vw, 32px);   /* page edge */
  --r: 7px;                          /* corner radius */
  --sheet-top: clamp(40px, 8vh, 96px);   /* how much of the page shows above an open sheet */

  /* layers */
  --z-cursor: 30;
  --z-sheet: 50;
  --z-embed: 60;
  --z-hold: 100;

  /* motion: two eases for most things, one with a little overshoot, and four lengths */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* things arriving */
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);   /* things moving across the screen */
  --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --dur-fast: 0.25s;   /* colour, opacity, small state changes */
  --dur-base: 0.6s;    /* elements arriving */
  --dur-slow: 1s;      /* big moves */
  --dur-lift: 1.1s;    /* one screen lifting off another (the holding screen, and later page changes) */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01s;
    --dur-base: 0.01s;
    --dur-slow: 0.01s;
    --dur-lift: 0.45s;   /* the lift stays, as a fade (see hold.css), so the screen still clears */
  }
}