/* Shared design tokens: the neubrutalist language of Split Bill (websiteAdis) and Magical Athlete Online.
   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. */

: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;

  /* 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", system-ui, -apple-system, "Segoe UI", 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: #b3ada3;
  --ink: #0b0a0e; --shadow: #0b0a0e;
  --yellow-soft: #4a4126; --pink-soft: #4a2a37; --purple-soft: #352d5c; --green-soft: #26442a;
  --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: #b3ada3;
    --ink: #0b0a0e; --shadow: #0b0a0e;
    --yellow-soft: #4a4126; --pink-soft: #4a2a37; --purple-soft: #352d5c; --green-soft: #26442a;
    --good: #6fe076; --bad: #ff8a80;
    color-scheme: dark;
  }
}