/* Design tokens, copied from the Paper file "Swatchle" (get_tokens, format: css).
   Build UI from the semantic layer, not the raw palette. */
:root {
  /* Raw palette */
  --color-white: #FFFFFF;
  --color-ground: #F6F6F6;
  --color-sunken: #EDEDED;
  --color-line: #E4E4E4;
  --color-muted: #6B6B6B;
  --color-ink: #1E1E1E;
  --color-coral: #E76F51;
  --color-coral-lip: #BD5B42;
  --color-coral-tint: #F9DBD4;
  --color-coral-ink: #9C432D;
  --color-sandy: #F4A261;
  --color-sandy-lip: #C88550;
  --color-sandy-tint: #FCE8D8;
  --color-saffron: #E9C46A;
  --color-saffron-lip: #BFA157;
  --color-saffron-tint: #FAF0DA;
  --color-saffron-ink: #76601F;
  --color-sage: #8AB17D;
  --color-sage-tint: #E2ECDF;
  --color-teal: #2A9D8F;
  --color-teal-lip: #228175;
  --color-teal-tint: #CAE7E3;
  --color-teal-ink: #1A675D;
  --color-charcoal: #264653;
  --color-charcoal-tint: #C9D1D4;

  /* Semantic colors */
  --color-bg: var(--color-ground);
  --color-surface: var(--color-white);
  --color-surface-sunken: var(--color-sunken);
  --color-border: var(--color-line);
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-muted);
  --color-text-inverse: var(--color-white);
  --color-board-surround: var(--color-white);
  --color-selection: var(--color-ink);
  --color-action: var(--color-coral);
  --color-action-lip: var(--color-coral-lip);
  --color-action-text: var(--color-white);
  --color-action-secondary: var(--color-white);
  --color-action-secondary-lip: var(--color-line);
  --color-action-secondary-text: var(--color-ink);
  --color-action-disabled: var(--color-sunken);
  --color-clue-bg: var(--color-saffron-tint);
  --color-clue-label: var(--color-saffron-ink);
  --color-badge-bg: var(--color-coral-tint);
  --color-badge-text: var(--color-coral-ink);
  --color-pip-empty: #D4D4D4;
  --color-overlay: rgb(30 30 30 / 40%);

  /* Score scale. Remapped here to the current scale (5 sage, 4 saffron, 3 sandy,
     2 coral, 1 charcoal, 0 gray). The Paper tokens still use the old
     coral-to-charcoal order. */
  --color-tier-5: var(--color-sage);
  --color-tier-4: var(--color-saffron);
  --color-tier-3: var(--color-sandy);
  --color-tier-2: var(--color-coral);
  --color-tier-1: var(--color-charcoal);
  --color-tier-0: var(--color-pip-empty);
  --color-tier-5-tint: var(--color-sage-tint);
  --color-tier-4-tint: var(--color-saffron-tint);
  --color-tier-3-tint: var(--color-sandy-tint);
  --color-tier-2-tint: var(--color-coral-tint);
  --color-tier-1-tint: var(--color-charcoal-tint);
  --color-tier-0-tint: var(--color-sunken);
  --color-tier-text: var(--color-ink);

  /* Type */
  --font-display: "Fredoka", system-ui, sans-serif;
  --font-ui: "Nunito", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --text-caption: 12px;
  --text-label: 13px;
  --text-body: 15px;
  --text-body-lg: 17px;
  --text-button: 20px;
  --text-clue: 22px;
  --text-title: 28px;
  --text-stamp: 40px;
  --text-score: 56px;
  --font-weight-body: 600;
  --font-weight-display: 600;
  --font-weight-bold: 800;
  --font-weight-black: 900;
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.06em;
  --tracking-caps: 0.12em;
  --leading-display: 105%;
  --leading-snug: 120%;
  --leading-body: 145%;

  /* Opacity, layout, spacing, radius */
  --opacity-dimmed: 15%;
  --opacity-disabled: 40%;
  --breakpoint-phone: 390px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --container-app: 480px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-lip: 4px;
  --spacing-sticker-border: 5px;
  --spacing-tap: 44px;
  --spacing-badge-border: 3px;
  --radius-xs: 3px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* Shadows. Paper has no shadow tokens, so these are the values used on the
     Mobile and Desktop screens pages. */
  --shadow-sticker: 0 8px 20px rgb(0 0 0 / 10%), 0 2px 4px rgb(0 0 0 / 6%);
  --shadow-board: 0 8px 20px rgb(0 0 0 / 8%), 0 2px 4px rgb(0 0 0 / 5%);
  --shadow-lifted: 0 10px 18px rgb(0 0 0 / 25%);
  --shadow-raised: 0 12px 24px rgb(0 0 0 / 22%), 0 2px 4px rgb(0 0 0 / 12%);
  --shadow-stamp: 0 8px 18px rgb(0 0 0 / 14%), 0 2px 4px rgb(0 0 0 / 6%);
  --shadow-sheet: 0 -8px 28px rgb(0 0 0 / 12%);

  /* Motion (spec section 6.1) */
  --ease-spring: cubic-bezier(.3, 1.4, .5, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-press: 80ms;
  --dur-pop: 320ms;
  --dur-zoom: 300ms;
  --dur-ring: 60ms;
}