/* Watermelon World Juices — design tokens
 *
 * Colors are read off the client's own storefront, signage and bottles.
 * The contrast law below is measured, not guessed:
 *
 *   seed   on white   18.92:1   AA body
 *   rind   on white   13.31:1   AA body
 *   red    on white    5.24:1   AA body
 *   seed   on yellow  11.60:1   AA body
 *   yellow on rind     8.17:1   AA body
 *   white  on yellow   1.63:1   FAIL  <- never
 *   green  on white    2.80:1   FAIL  <- never, either direction
 *
 * --green is rind stripes and decoration. It never carries text.
 */
:root {
  --red:    #D32027;
  --green:  #4CAF3D;
  --rind:   #14361F;
  --yellow: #F5C518;
  --white:  #FFFFFF;
  --seed:   #14100E;

  /* Ink routing. Use these, never a raw color, for text on a surface. */
  --ink-on-yellow: #14100E;
  --ink-on-red:    #FFFFFF;
  --ink-on-rind:   #FFFFFF;
  --ink-on-white:  #14100E;

  --step--1: clamp(0.88rem, 0.85rem + 0.15vw, 0.95rem);
  --step-0:  clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
  --step-1:  clamp(1.35rem, 1.2rem + 0.7vw, 1.8rem);
  --step-2:  clamp(1.9rem, 1.5rem + 2vw, 3rem);
  --step-3:  clamp(2.6rem, 1.8rem + 4vw, 5rem);

  --space-s: 0.75rem;
  --space-m: 1.5rem;
  --space-l: 3rem;
  --space-xl: 6rem;

  --font-display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script: 'Pacifico', 'Brush Script MT', cursive;

  --measure: 62ch;
  --gutter: 1rem;
}