/* potluck design tokens, v1 ("sunday supper")
   source of truth: docs/design.md
   font: load Source Serif 4 from Google Fonts
   https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400..700&display=swap */

:root {
  /* color */
  --color-ground: #FFFCF6;        /* page background, toast */
  --color-ink: #2A1E14;           /* text, icons, outlines, primary button fill */
  --color-muted: #6B5A4A;         /* secondary text, inactive icons (6.4:1 on ground) */
  --color-hairline: #EFE6D8;      /* row and section dividers */
  --color-field-edge: #CDBFAC;    /* input border, dashed placeholders */
  --color-field: #FFFFFF;         /* input background */
  --color-thumb-standin: #E6DFD4; /* thumbnail while loading */
  --color-tomato: #C8402A;        /* ONLY the logo and the active-page rule */
  --color-butter: #FFD66B;        /* ONLY the fresh stamp and the "just out of the oven" tag; always ink text on it */

  /* guest name colors, all >= 5.7:1 on ground.
     pick one per guest with hash(userId) % 7 so a person looks the same everywhere. */
  --guest-0: #24686A; /* teal */
  --guest-1: #2F5C8F; /* blue */
  --guest-2: #8A5508; /* ochre */
  --guest-3: #7A3A68; /* plum */
  --guest-4: #5E6A1F; /* olive */
  --guest-5: #5A4A8C; /* violet */
  --guest-6: #3F6B45; /* moss */

  /* type: one family for everything, all copy lowercase */
  --font-serif: 'Source Serif 4', Georgia, serif;
  --text-page-title: 600 36px/1.1 var(--font-serif);   /* letter-spacing -0.02em */
  --text-item-title: 400 17px/1.3 var(--font-serif);
  --text-body: 400 16px/1.4 var(--font-serif);
  --text-names: 600 14px/1.3 var(--font-serif);        /* "brought by" prefix and joiners at 400, muted */
  --text-section: 600 14px/1.3 var(--font-serif);      /* letter-spacing 0.01em */
  --text-brand: 600 16px/1.2 var(--font-serif);
  --text-helper: 400 13px/1.35 var(--font-serif);
  --text-button: 600 15px/1 var(--font-serif);
  --text-label: 600 15px/1.3 var(--font-serif);          /* the add form's label */
  --text-number: 600 20px/1 var(--font-serif);           /* a place's number on my picks */
  --text-tag: 600 13px/1.4 var(--font-serif);            /* "just out of the oven" */
  --text-toast: 600 18px/1.2 var(--font-serif);          /* "you cooked." */
  --text-toast-action: 600 16px/1 var(--font-serif);     /* the toast's undo */
  --tracking-title: -0.02em;

  /* radius scale; nested corners are concentric (inner = outer - gap) */
  --radius-sm: 3px;   /* tags, stamps, small marks */
  --radius-md: 6px;   /* controls, thumbnails, icon buttons */
  --radius-lg: 10px;  /* floating surfaces: the toast */

  /* lines */
  --border-hairline: 1px solid var(--color-hairline);
  --border-outline: 1.5px solid var(--color-ink);       /* secondary buttons, toast */
  --border-field: 1.5px solid var(--color-field-edge);
  --border-dashed: 1.5px dashed var(--color-field-edge); /* missing thumbnail */

  /* sizes */
  --tap-min: 44px;
  --control-height: 48px;
  --row-min: 52px;
  --title-lines: 3;              /* an item title shows at most this many lines, then "…" (about a thumbnail's height) */               /* a one-line row of links (how it works, publishers) */
  --thumb-width: 112px;          /* 16:9 */
  --thumb-height: 63px;
  --icon-size: 24px;             /* 24 px grid, 2 px round stroke */
  --page-rule-width: 40px;       /* tomato rule under the active page title */
  --page-rule-height: 3px;
  --page-gutter: 20px;
  --page-max: 40rem;             /* the whole frame: top bar, page, footer */
  --read-max: 40rem;             /* a single readable column inside it */

  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* focus */
  --focus-ring: 3px solid var(--color-ink);
  --focus-offset: 2px;
}

/* larger screens (docs/design.md, "screen sizes"). phone values above are the default.
   tablet: one wider column and bigger thumbnails */
@media (min-width: 600px) {
  :root {
    --page-gutter: 32px;
    --page-max: 45rem;
    --read-max: 45rem;
    --thumb-width: 160px;
    --thumb-height: 90px;
  }
}
/* desktop: a wide frame; the table and plain pages keep a readable column, my picks and the
   guest list split into two */
@media (min-width: 1024px) {
  :root {
    --page-gutter: 40px;
    --page-max: 65rem;
    --read-max: 47.5rem;
    --thumb-width: 192px;
    --thumb-height: 108px;
    --text-page-title: 600 40px/1.1 var(--font-serif);
  }
}