/* Wantoo design tokens — paleta z logo: koral → pomarańcz na głębokim granacie.
   Nazwy zmiennych wspólne z apką bazową (dziedziczone komponenty automatycznie przejmują motyw). */
:root {
  /* powierzchnie (głęboki granat z logo-wordmarku) — historyczna nazwa --vanilla = główne tło */
  --vanilla: #171233;
  --surface: #201A44;
  --surface-2: #2A2356;

  /* tekst / kontury (jasne, lekko ciepłe) */
  --ink: #F5EDF0;
  --ink-soft: #B7AFD0;

  /* akcenty marki */
  --coral:  #FF6F5E;      /* lewa postać w logo */
  --orange: #F7A23C;      /* prawa postać w logo */
  --pink-soft: #8A5A7A;   /* stonowany fiolet-róż do powierzchni */
  --pink-hot:  #FF6F5E;   /* koral = główny akcent (focus/glow) */
  --red:       #F2554E;   /* głębszy koral (aktywne/niebezpieczne) */
  --maroon:    #3A1E3A;   /* ciemny śliwkowy */
  --gold:      #F7A23C;   /* ciepły pomarańcz = akcent drugorzędny */

  /* gradient marki: koral → pomarańcz (jak pętla w logo) */
  --grad-flame: linear-gradient(135deg, #FF6F5E 0%, #F7A23C 100%);
  --grad-soft:  linear-gradient(160deg, #2A2356, #171233);
  --grad-gold:  linear-gradient(135deg, #FF6F5E 0%, #F7A23C 100%);

  /* miękkie poświaty */
  --border-w: 1.5px;
  --radius-card: 24px;
  --radius-tile: 16px;
  --radius-pill: 999px;
  --shadow-hard: 0 14px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,111,94,.10);
  --shadow-hard-sm: 0 8px 22px rgba(0,0,0,.42);
  --shadow-press: 0 2px 10px rgba(0,0,0,.5);
  --glow-crimson: 0 0 26px rgba(255,111,94,.42);
  --glow-gold: 0 0 22px rgba(247,162,60,.38);

  /* typografia */
  --font-logo: 'Shrikhand', 'Baloo 2', cursive;
  --font-display: 'Baloo 2', 'Arial Rounded MT Bold', sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;

  /* easingi */
  --ease-spring: linear(0, .01, .06 3%, .25 7%, .61 12.5%, .9 17%, 1.06 21%,
    1.15 25%, 1.16 27%, 1.12 32%, 1.03 40%, .98 47%, .975 53%, .997 66%, 1.002 76%, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);

  /* layout */
  --tab-h: 64px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --view-max: 480px;
}