/* Gachi stylesheet: tokens.css. Design tokens (:root). Includes the iOS/standalone token overrides that must stay right after the base tokens. */
/* Extracted verbatim from index.html. Load order is significant; see styles/README.md. */

/* ------------------------------ */
/* Design Tokens */
/* ------------------------------ */
:root {
  --bg-top: #205061;
  --bg-bottom: #183f4d;
  --surface: rgba(31, 76, 91, 0.92);
  --surface-solid: #1f4c5b;
  --surface-strong: rgba(37, 86, 102, 0.96);
  --surface-soft: rgba(42, 95, 112, 0.96);
  --text-main: #edf7f5;
  --text-soft: #bed8d4;
  --text-dim: rgba(190, 216, 212, 0.72);
  --accent: #6fe0c0;
  --accent-strong: #43c39e;
  --accent-soft: rgba(111, 224, 192, 0.18);
  --accent-soft-strong: rgba(111, 224, 192, 0.3);
  --border: rgba(163, 227, 211, 0.14);
  --shadow: 0 18px 40px rgba(4, 14, 18, 0.34);
  --shadow-soft: 0 10px 24px rgba(4, 19, 25, 0.24);
  --button-shadow: inset 0 2px 8px rgba(5, 14, 18, 0.24), inset 0 -1px 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(4, 14, 18, 0.14);
  --button-shadow-hover: inset 0 2px 9px rgba(5, 14, 18, 0.26), inset 0 -1px 0 rgba(255, 255, 255, 0.1), 0 3px 8px rgba(4, 14, 18, 0.16);
  --button-shadow-pressed: inset 0 3px 11px rgba(5, 14, 18, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.04), 0 1px 3px rgba(4, 14, 18, 0.1);
  --primary-button-bg:
    radial-gradient(130% 115% at 50% 42%, rgba(7, 55, 45, 0.26) 0%, rgba(7, 55, 45, 0.18) 34%, rgba(7, 55, 45, 0) 60%),
    linear-gradient(180deg, #70e1c3 0%, #59d2b0 52%, #4bc49f 100%);
  --primary-button-bg-hover:
    radial-gradient(130% 115% at 50% 44%, rgba(7, 55, 45, 0.3) 0%, rgba(7, 55, 45, 0.22) 34%, rgba(7, 55, 45, 0) 60%),
    linear-gradient(180deg, #6bdbbd 0%, #55cdaa 52%, #45bb97 100%);
  --primary-button-bg-pressed:
    radial-gradient(130% 115% at 50% 46%, rgba(7, 55, 45, 0.34) 0%, rgba(7, 55, 45, 0.24) 36%, rgba(7, 55, 45, 0) 62%),
    linear-gradient(180deg, #63d2b4 0%, #4ec39f 52%, #3eaf8c 100%);
  --primary-button-shadow:
    inset 0 0 0 3px rgba(12, 71, 59, 0.14),
    inset 0 2px 1px rgba(255, 255, 255, 0.08),
    inset 0 10px 14px rgba(255, 255, 255, 0.04),
    inset 0 0 0 7px rgba(18, 90, 75, 0.06),
    inset 0 0 28px rgba(7, 47, 39, 0.14),
    inset 0 -12px 18px rgba(7, 47, 39, 0.32),
    inset 0 0 0 1px rgba(7, 45, 37, 0.14),
    0 2px 6px rgba(8, 28, 33, 0.12);
  --primary-button-shadow-hover:
    inset 0 0 0 3px rgba(12, 71, 59, 0.17),
    inset 0 2px 1px rgba(255, 255, 255, 0.08),
    inset 0 11px 15px rgba(255, 255, 255, 0.04),
    inset 0 0 0 7px rgba(18, 90, 75, 0.07),
    inset 0 0 30px rgba(7, 47, 39, 0.16),
    inset 0 -13px 20px rgba(7, 47, 39, 0.36),
    inset 0 0 0 1px rgba(7, 45, 37, 0.16),
    0 3px 8px rgba(8, 28, 33, 0.14);
  --primary-button-shadow-pressed:
    inset 0 0 0 3px rgba(12, 71, 59, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.05),
    inset 0 0 0 7px rgba(18, 90, 75, 0.08),
    inset 0 0 32px rgba(7, 47, 39, 0.18),
    inset 0 12px 18px rgba(7, 47, 39, 0.12),
    inset 0 -14px 22px rgba(7, 47, 39, 0.42),
    inset 0 0 0 1px rgba(7, 45, 37, 0.18),
    0 1px 4px rgba(8, 28, 33, 0.1);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 18px;
  --field-bg: rgba(17, 48, 58, 0.54);
  --field-border: rgba(111, 224, 192, 0.18);
  --field-radius: 14px;
  --field-placeholder: #91b2ab;
  --shell-gutter: 14px;
  --app-max-width: 520px;
  --screen-padding-y: 18px;
  --screen-padding-x: 20px;
  --topshelf-content-top: max(16px, calc(var(--safe-top) + 6px));
  --topshelf-primary-height: 94px;
  --topshelf-info-height: 76px;
  --topshelf-generic-copy-size: calc(0.86rem + 1px);
  --topshelf-generic-copy-bottom: 6px;
  --topshelf-generic-copy-reserve: 22px;
  --topshelf-primary-to-generic-gap: 14px;
  --topshelf-height: calc(
    var(--topshelf-content-top)
    + var(--topshelf-primary-height)
    + var(--topshelf-primary-to-generic-gap)
    + var(--topshelf-generic-copy-reserve)
    + var(--topshelf-generic-copy-bottom)
  );
  --hero-padding-y: 28px;
  --hero-padding-x: 22px;
  --logo-max-width: 288px;
  --floater-max-width: 420px;
  --floater-compact-max-width: 320px;
  --event-floater-copy-max-width: 38ch;
  --floater-top: 38%;
  --app-height: 100dvh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom-env: env(safe-area-inset-bottom, 0px);
  --safe-bottom: var(--safe-bottom-env);
  --safe-left: env(safe-area-inset-left, 0px);
  --viewport-bottom-offset: 0px;
  --native-bottom-reserve: 0px;
  --native-bottom-measured-reserve: 40px;
  --keyboard-bottom-inset: 0px;
  --keyboard-overlay-inset: 0px;
  --keyboard-overlay-half-inset: 0px;
  --keyboard-scroll-padding: calc(var(--keyboard-bottom-inset) + 18px);
  --app-bottom-reserve: calc(var(--viewport-bottom-offset) + var(--native-bottom-reserve));
  --bottom-bar-underfill: var(--viewport-bottom-offset);
  --bottom-bar-solid-fill: var(--surface-solid);
  --invite-bottom-bar-solid-fill: #1f4c5b;
  --bottom-action-gap: max(4px, calc(var(--safe-bottom) + var(--viewport-bottom-offset) + 1px));
  --bottom-nav-scroll-reserve: calc(
    52px
    + var(--bottom-nav-top-padding)
    + var(--bottom-nav-button-height)
    + max(10px, calc(var(--safe-bottom) + var(--native-bottom-reserve) + 8px))
    + var(--viewport-bottom-offset)
  );
  --bottom-action-scroll-reserve: calc(
    56px
    + max(12px, calc(var(--safe-bottom) + var(--native-bottom-reserve) + 10px))
    + var(--viewport-bottom-offset)
  );
  --ios-installed-bottom-reach: 0px;
  --bottom-nav-y-offset: 0px;
  --bottom-nav-top-padding: 10px;
  --bottom-nav-button-height: 50px;
  --root-scroll-hint-nav-gap: 6px;
  --root-scroll-hint-bottom: calc(
    var(--viewport-bottom-offset)
    + var(--bottom-nav-top-padding)
    + var(--bottom-nav-button-height)
    + max(10px, calc(var(--safe-bottom) + var(--native-bottom-reserve) + 8px))
    + var(--root-scroll-hint-nav-gap)
    - var(--bottom-nav-y-offset)
  );
}