/* ROVETA — brand tokens. The brand's own values (lime, ink, Inter + Georgia);
   the product-page grade comes from scale, spacing and restraint around them,
   not from new colours. */
:root {
  color-scheme: light;

  --accent:       #cef45c;
  --accent-deep:  #bce53c;
  --accent-ink:   #17211b;
  --accent-wash:  color-mix(in srgb, var(--accent) 55%, transparent);
  --accent-glow:  color-mix(in srgb, var(--accent) 60%, transparent);
  --accent-wash-dark: color-mix(in srgb, var(--accent) 34%, transparent);

  --canvas:   #f5f5f2;
  --canvas-2: #ecede7;
  --surface:  #ffffff;
  --fill:     #f0f1ec;

  --ink:       #121813;      /* 17.1:1 on canvas */
  --ink-hover: #2a332c;
  --ink-2:     #333d35;
  --muted:     #62695f;      /* 5.2:1 on canvas */
  --line:      #d6d9cf;
  --hairline:  color-mix(in srgb, var(--ink) 9%, transparent);

  --link:  #2f6b12;          /* lime's dark sibling for text links: 6.3:1 */
  --focus: #121813;

  --night:      #0c100d;
  --night-2:    #151b16;
  --night-line: #2a322b;
  --on-night:   #f5f5f2;     /* 17.8:1 */
  --muted-dark: #a3ab9f;     /* 8.4:1 on night */

  --ok:          #3d7a17;
  --danger:      #b42318;
  --danger-wash: #fdf1ef;
  --danger-dark: #ff8f80;    /* 8.0:1 on night */

  --sans:  Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: Georgia, 'Times New Roman', serif;

  --fs-body:     17px;
  --fs-eyebrow:  clamp(17px, 1.4vw, 21px);
  --fs-sub:      clamp(19px, 1.8vw, 26px);
  --fs-beat:     clamp(36px, 4.4vw, 60px);
  --fs-headline: clamp(40px, 6vw, 84px);
  --fs-display:  clamp(52px, 9.4vw, 136px);

  /* The film's own canvas, sampled from its first frame, so the hero has the
     right colour before the first frame paints and the scrim blends into it. */
  --film: #f2f3ec;

  --fs-hero:       clamp(44px, 5.6vw, 92px);
  --fs-headline-2: clamp(40px, 4.6vw, 72px);

  --gutter: clamp(20px, 4vw, 40px);
  --hero-inset: clamp(24px, 6vw, 120px);
  --nav-h: 52px;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-1: 200ms;
}