/* Ronnie Mini App — design tokens. Always the light cream theme, whatever the Telegram theme is. */
:root {
  color-scheme: light;

  /* brand */
  --bg: #F5EFDE;            /* EXACTLY the background of the Ronnie clips — never change */
  --bg-deep: #ECE4CE;       /* wells, skeletons, picture frames */
  --surface: #FFFDF7;       /* cards */
  --ink: #2B2926;
  --ink-2: #67625B;         /* secondary text */
  --ink-3: #958F85;         /* hints, inactive */
  --line: rgba(43, 41, 38, 0.10);

  --accent: #D8574A;        /* Ronnie's scarf */
  --accent-deep: #B9453A;
  --accent-ink: #B13F34;    /* accent text on light */
  --accent-tint: #FBE3DD;

  --green: #4C9A6A;
  --green-deep: #3A7C53;
  --green-ink: #2F7149;
  --green-tint: #DFF0E3;

  --amber: #E3A53A;
  --amber-ink: #8A5A0B;
  --amber-tint: #FBEBC8;

  --grey: #8D8B92;          /* raccoon fur */
  --grey-ink: #5B5960;
  --grey-tint: #E9E6E0;

  /* shape */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* spacing scale (4 px grid) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;

  /* type */
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 13px;
  --fs-sm: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 34px;

  /* elevation (warm shadows) */
  --shadow-1: 0 1px 2px rgba(86, 66, 30, 0.06), 0 6px 18px rgba(86, 66, 30, 0.08);
  --shadow-2: 0 2px 6px rgba(86, 66, 30, 0.08), 0 16px 40px rgba(86, 66, 30, 0.14);

  /* motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* viewport & safe areas (Telegram sets the --tg-* variables when its SDK is loaded) */
  --app-h: 100vh;
  --safe-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
}

/* Outside a messenger (js/tg.js) the page is the app itself (docs/MOBILE.md): in the Android / iOS shell it is drawn
   under the status bar and the home indicator, so the system's insets count — env(), or the variables the shell
   sets for an older WebView. Inside Telegram and MAX nothing changes. */
:root.standalone {
  --safe-top: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px));
}


@supports (height: 100dvh) {
  :root { --app-h: 100dvh; }
}