/* Layers 1-2: fonts, design tokens, reset and global element styles (no classes here).
   Values come from the «Calm» mockup; blocks use only the semantic tokens below. demo/ is self-contained: fonts are local. */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
  src: url(assets/montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
  src: url(assets/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/onest-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* Tier 1: primitives (mockup palette), never used by blocks directly */
  --cream-50: #FFF8E6;
  --white: #FFFFFF;
  --ink-950: #0A0A0A;
  --stone-600: #6B6A63;
  --stone-500: #8F8978;
  --olive-800: #4A4630;
  --sand-300: #E6DDC3;
  --sand-200: #EAE5D3;
  --grey-200: #E3E7EB;
  --green-700: #2F7A4B;
  --yellow-200: #FFF0A3;
  --red-600: #E53030;
  --ink-alpha-22: rgba(10, 10, 10, .22);
  --ink-alpha-50: rgba(10, 10, 10, .5);

  /* Tier 2: semantic colors. Green, red and yellow once each: green = selected and pay, red = the dot, this tip and a missing field, yellow = the fee */
  --color-bg: var(--cream-50);
  --color-surface: var(--white);
  --color-text: var(--ink-950);
  --color-text-muted: var(--stone-600);
  --color-text-on-highlight: var(--olive-800);
  --color-line: var(--sand-300);
  --color-border-strong: var(--ink-950);
  --color-accent: var(--green-700);
  --color-on-accent: var(--white);
  --color-signal: var(--red-600);
  --color-invalid: var(--red-600);
  --color-highlight: var(--yellow-200);
  --color-off: var(--sand-200);
  --color-on-off: var(--stone-500);
  --color-skeleton: var(--grey-200);
  --color-track: var(--ink-alpha-22);
  --color-backdrop: var(--ink-alpha-50);
  --color-wallet: var(--ink-950);
  --color-on-wallet: var(--white);

  /* Type */
  --font-display: 'Montserrat', 'Arial Black', system-ui, sans-serif;
  --font-body: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;
  --weight-black: 900;
  --size-2xs: 12px;
  --size-xs: 13px;
  --size-s: 13.5px;
  --size-m: 14px;
  --size-base: 15px;
  --size-input: 16px;
  --size-l: 17px;
  --size-xl: 18px;
  --size-2xl: 19px;
  --size-3xl: 20px;
  --size-4xl: 22px;
  --size-name: clamp(26px, 8.5vw, 34px);
  --size-headline: 36px;
  --size-star: 38px;
  --leading-digits: .85; /* a box of digits only (no descenders): it ends right below them */
  --leading-none: 1;
  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-compact: 1.35; /* the consent text in the payment panel: two lines of 13 px in 35 px */
  --leading-normal: 1.4;
  --tracking-tighter: -.04em;
  --tracking-tight: -.03em;
  --tracking-snug: -.01em;
  --tracking-wide: .01em;

  /* Space */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 6px;
  --space-s: 8px;
  --space-sm: 12px;
  --space-m: 14px;
  --space-ml: 16px;
  --space-l: 18px;
  --space-xl: 22px;
  --space-2xl: 24px;
  --space-3xl: 44px;

  /* Shapes and sizes */
  --radius-xs: 6px;
  --radius-s: 8px;
  --radius-m: 10px;
  --radius-l: 12px;
  --radius-xl: 14px;
  --radius-2xl: 16px;
  --radius-sheet: 20px;
  --radius-pill: 999px;
  --border-thin: 1px;
  --border: 2px;
  --border-focus: 3px;
  --column: 420px;
  --photo: 96px;
  --photo-success: 88px;
  --photo-card: 60px;
  --team-mark: 64%;
  --control-s: 40px;
  --control-star: 46px;
  --control-m: 48px;
  --control-l: 52px;
  --bar-s: 8px;
  --bar-l: 22px;
  --bar-tip-min-s: 3px;
  --bar-tip-min-l: 8px;
  --switch-w: 50px;
  --switch-h: 30px;
  --knob: 24px;
  --knob-gap: 3px;
  --knob-travel: 20px;
  --checkbox: 24px;
  --tick-x: 30%;
  --tick-y: 10%;
  --tick-w: 35%;
  --tick-h: 60%;
  --tick-angle: 45deg;
  --sheet-max: 84dvh;
  --icon-s: 18px;
  --total-min: 24px;
  --amount-air: 5px; /* above and below the digits inside the amount field */
  --caret: 2px; /* the blinking bar after the digits of the amount field */
  --panel-h-fallback: 190px;
  --fade: 28px; /* the gradient above the payment panel: the page goes on under it */

  /* Motion and layers */
  --dur-fast: .15s;
  --dur-bar: .25s;
  --dur-appear: .25s;
  --dur-grow: 1.2s;
  --dur-spin: .8s;
  --dur-blink: 1s; /* one blink of the amount field caret */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --z-panel: 10;
  --z-sheet: 40;

  /* First screen of the tip page by window height: the top of the yellow fee switch peeks out above the fade of the panel
     on any phone held upright, by 16 px at least (the panel holds the consent and both buttons). Fixed sizes inside a step, so the layout can be checked by numbers. The choice screen does not shrink.
     The steps are media queries on the window height: browsers evaluate them against the initial containing block,
     which Safari and Chrome keep at the small viewport (browser bars shown), so a step does not switch when the bars collapse on scroll.
     From 770 px: the sizes of the mockup, the amount digits 46 px and the pay buttons 48 px (the consent stands in the panel) */
  --tip-top: var(--space-l);
  --tip-gap: var(--space-xl);
  --tip-photo: var(--photo);
  --tip-lang: var(--control-s);
  --tip-back: var(--control-s);
  --tip-venue-gap: var(--space-xs);
  --tip-piggy-gap: var(--space-s);
  --tip-amount: 46px;
  --tip-chips-gap: var(--space-sm);
  --tip-chip: var(--control-m);
}
/* 620-769 px: phones with the browser bars shown (iPhone 12-16 about 664 px) */
@media (max-height: 769px) {
  :root {
    --tip-top: 10px;
    --tip-gap: var(--space-sm);
    --tip-photo: 64px;
    --tip-lang: 36px;
    --tip-back: 28px;
    --tip-piggy-gap: var(--space-2xs);
    --tip-amount: 34px;
    --tip-chips-gap: var(--space-s);
    --tip-chip: 44px;
  }
}
/* Up to 619 px (iPhone SE, Android with a 640 px screen and the bars shown) and below: the label above the goal is hidden too (tip.css);
   the amount chips stay 44 px, the tap size. Below 553 px (landscape) the same sizes, the page scrolls */
@media (max-height: 619px) {
  :root {
    --tip-top: var(--space-xs);
    --tip-gap: var(--space-s);
    --tip-photo: 56px;
    --tip-lang: 32px;
    --tip-back: 24px;
    --tip-venue-gap: var(--space-3xs);
    --tip-amount: 28px;
  }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
img { display: block; max-inline-size: 100%; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
button:disabled { cursor: not-allowed; }
ul { list-style: none; }

/* Global elements */
/* A focused field is brought above the panel and its fade, never under the half-transparent part */
html { background: var(--color-bg); scroll-padding-block-end: calc(var(--panel-h, var(--panel-h-fallback)) + var(--fade)); }
body {
  font-family: var(--font-body);
  font-size: var(--size-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
}
h1, h2 { font-family: var(--font-display); font-weight: var(--weight-black); text-transform: uppercase; line-height: var(--leading-none); letter-spacing: var(--tracking-tight); }
b { font-weight: var(--weight-bold); }
:focus-visible { outline: var(--border-focus) solid var(--color-accent); outline-offset: var(--space-3xs); }

/* No animations for those who asked the system for less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}