/* Shared design tokens: the neubrutalist language of Split Bill, Group Checklist and Magical Athlete Online,
   plus the PRADINAMIKA 2 accents (maroon / orange / gold from the Dinamika logo) and PKN STAN navy.
   Thick ink outlines, hard offset shadows, flat bold colour, Archivo 500–800, warm paper background.
   Any app can import just this file and get the same look. Component styles live in app.css. */

/* Archivo (SIL Open Font License), self-hosted: one variable file, weights 500–800, Latin.
   Served from this server so it works even when Google Fonts is blocked or slow on mobile data. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/fonts/archivo-latin.woff2") format("woff2");
}

:root {
  /* surfaces + text */
  --paper: #fbf7ef;         /* app background */
  --surface: #ffffff;       /* cards, inputs */
  --sunk: #f3eee3;          /* inset areas */
  --text: #121212;
  --muted: #5f5b53;
  --ink: #121212;           /* outlines */
  --shadow: #121212;        /* hard shadows */

  /* flat accents (text on them is always --on-color) */
  --yellow: #ffcf26;
  --pink: #ff5a87;
  --purple: #7b61ff;
  --green: #3fca45;
  --lime: #b5e93a;
  --peach: #ffdf96;
  --gray: #a3a19c;
  --red: #e5383b;
  --on-color: #121212;

  /* event identity: PRADINAMIKA 2 logo + PKN STAN crest */
  --maroon: #6b2b47;
  --orange: #f07f2a;
  --gold: #e8b04f;
  --navy: #1f2394;
  --on-dark: #fff8ec;
  --orange-soft: #ffe2c9;

  /* soft tints for selected / highlighted areas */
  --yellow-soft: #fff1bf;
  --pink-soft: #ffe1ea;
  --purple-soft: #e6e0ff;
  --green-soft: #dcf6dc;

  /* status text */
  --good: #1d8a2a;
  --bad: #c62a2d;

  /* shape */
  --bw: 2.5px;              /* outline width */
  --bw-sm: 2px;
  --r: 14px;                /* cards */
  --r-btn: 12px;            /* buttons */
  --r-sm: 10px;             /* inputs, chips */
  --sh-sm: 2px 2px 0 var(--shadow);
  --sh: 4px 4px 0 var(--shadow);
  --sh-lg: 6px 6px 0 var(--shadow);

  /* spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 32px;

  /* type */
  --font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-sm: 14px; --fs: 16px; --fs-lg: 19px; --fs-h2: 21px;
  --fs-hero: clamp(38px, 10.5vw, 60px);

  /* motion: short and decisive */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-press: 90ms;
  --t-ui: 180ms;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

/* dark: same ink outlines on a deep violet-grey, accents stay bright */
:root[data-theme="dark"] {
  --paper: #23212b; --surface: #2f2c39; --sunk: #1b1a21; --text: #f5f0e6; --muted: #d3cdc3;
  --ink: #0b0a0e; --shadow: #0b0a0e;
  --yellow-soft: #4a4126; --pink-soft: #4a2a37; --purple-soft: #352d5c; --green-soft: #26442a; --orange-soft: #4d3220;
  --good: #6fe076; --bad: #ff8a80;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #23212b; --surface: #2f2c39; --sunk: #1b1a21; --text: #f5f0e6; --muted: #d3cdc3;
    --ink: #0b0a0e; --shadow: #0b0a0e;
    --yellow-soft: #4a4126; --pink-soft: #4a2a37; --purple-soft: #352d5c; --green-soft: #26442a; --orange-soft: #4d3220;
    --good: #6fe076; --bad: #ff8a80;
    color-scheme: dark;
  }
}