/* Pame? design tokens (v0.2 "lively" palette)
   Source of truth for colors, type, spacing and radii used in /screens. */

@import url("https://fonts.googleapis.com/css2?family=Commissioner:wght@400;500;600;700&family=Literata:opsz,wght@7..72,600;7..72,700&display=swap");

:root {
  /* Surfaces */
  --color-ground: #FFF8F0;        /* app background, warm cream */
  --color-surface: #FFFFFF;       /* cards, inputs */
  --color-surface-sunken: #FFF8F0;/* message preview box inside a card */
  --color-line: #EAE3F2;          /* card borders, empty bar track */
  --color-line-soft: #F3EEF8;     /* dividers inside cards */
  --color-line-strong: #DCD3EA;   /* idle answer buttons, secondary buttons */
  --color-line-dashed: #B7A9D6;   /* "Add a time / place", "Same people next time?" */

  /* Text */
  --color-ink: #1E1B2E;           /* primary text */
  --color-ink-2: #3A3550;         /* text on idle buttons */
  --color-muted: #5E5870;         /* secondary text, labels */

  /* Brand */
  --color-primary: #4C3BEA;       /* electric violet: primary buttons, links, focus, selected place */
  --color-primary-hover: #3726C4;
  --color-primary-tint: #E8E5FF;  /* pills, avatar tint */
  --color-primary-tint-2: #DCD6FF;/* light text on primary backgrounds */
  --color-coral: #FF6B4A;         /* accent: "?" in wordmark, "Best so far" badge, date tile */
  --color-on-coral: #3A0E04;
  --color-coral-tint: #FFE3DB;
  --color-on-coral-tint: #A3301A;
  --color-sun: #FFC53D;           /* accent: link-preview CTA pill, "?" on violet */
  --color-on-sun: #1E1B2E;

  /* Answer states (never rely on hue alone; lightness differs too) */
  --color-yes: #07875C;           /* fill for Yes button + bars (white text) */
  --color-yes-tint: #D5F5E7;
  --color-on-yes-tint: #056644;
  --color-maybe: #FFE08A;         /* fill for If needed button (dark text) */
  --color-maybe-border: #E0A800;
  --color-maybe-bar: #FFC53D;
  --color-on-maybe: #4A3300;
  --color-no: #2E2A45;            /* fill for No button + bars (white text) */

  /* Typography */
  --font-display: "Literata", Georgia, serif;      /* wordmark, screen titles, big numbers */
  --font-body: "Commissioner", system-ui, sans-serif; /* everything else; both fonts cover Greek */
  --text-xs: 12px;   /* badges, avatar initials */
  --text-sm: 13px;   /* helper text, meta */
  --text-md: 14px;   /* labels, answer buttons */
  --text-base: 16px; /* list rows, body */
  --text-lg: 17px;   /* primary buttons, nav titles */
  --text-xl: 21px;
  --text-title: 28px;   /* screen H1 (30px on Respond) */
  --text-hero: 38px;    /* "It's on." */

  /* Spacing (4px base) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px;
  --screen-gutter: 20px;

  /* Radii */
  --radius-sm: 10px;   /* answer segment buttons */
  --radius-md: 12px;   /* secondary buttons, place chips */
  --radius-lg: 14px;   /* inputs, list rows, cards */
  --radius-xl: 16px;   /* primary buttons, main cards */
  --radius-pill: 999px;

  /* Sizes */
  --touch-min: 44px;
  --button-primary-h: 56px;
  --input-h: 54px;
}