/* LETO, interface option 2 in new/A4 - 602_merged.pdf (page 4).
   Loaded after styles.css; the shared components keep their semantic tokens. */
:root {
  --accent: rgb(219, 255, 2);              /* primary buttons, rings, indicators */
  --accent-500: rgb(185, 242, 61);         /* brand text on the dark theme */
  --accent-700: rgb(119, 166, 21);         /* brand text on the light theme */
  --accent-a12: rgba(185, 242, 61, 0.1216);  /* selected and pressed tints */
  --accent-a22: rgba(185, 242, 61, 0.22);    /* copy buttons, pressed */
  --accent-ring: rgba(219, 255, 2, 0.75);    /* active radio indicator ring */
  --accent-contrast: rgb(8, 11, 14);       /* text and icons on an --accent fill */
  --card-face-base: rgb(18, 27, 12);       /* under card-face.webp while it loads */

  --shadow-card: none;
  --choicex-fill: var(--neutral-800);
  --choicex-wash: none;
  --choicex-wash-active: none;
  --choicex-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  --benefits-fill: var(--color-bg-base);
  --benefits-wash: none;
  --benefits-ring: var(--hairline);
  --benefits-divider: var(--color-border-default);
}

:root[data-theme="light"], .light {
  --color-bg-base: var(--neutral-0);
  --choicex-fill: var(--neutral-50);
  --choicex-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  --choicex-badge-fill: var(--neutral-25);
  --choicex-badge-ring: var(--hairline);
  --benefits-fill: var(--neutral-25);
}

/* The angular LT mark occupies a 60px-wide slot beside the 44px controls. */
.brand-logo { width: 60px; height: var(--touch-min); }

.issue-glow { display: none; }
.hero-card { box-shadow: none; }
.usecase-div { margin-right: 0; }
.cf-brand { width: 90px; height: 11px; color: rgb(117, 139, 6); }
.tabbar { border-radius: var(--radius-xl); }
.tab { border-radius: var(--radius-md); }
.support-head .sh-ava { background: var(--neutral-25); }

/* Card flip (brand feature card_flip). The back replaces
   the shared darkened art with the art's dark green and a corner of its glow.
   The stripe and edge stay lime-tinted: a near-black stripe matches the dark
   theme's page and looks like a gap in the card. */
.hero-card.cf-back {
  background:
    radial-gradient(circle at 100% 100%, rgba(185, 242, 61, .3) 0 70px, transparent 170px),
    linear-gradient(160deg, rgb(32, 48, 18), var(--card-face-base));
  box-shadow: inset 0 0 0 1px var(--accent-a22);
}
.cf-back::before { display: none; }
.cb-stripe { background: var(--accent-a22); }
.cb-pan, .cb-field {
  padding: 7px 10px; margin-left: -10px;
  border-radius: 12px;
  background: var(--accent-a12);
  box-shadow: inset 0 0 0 1px var(--accent-a22);
}
.cb-pan svg, .cb-field svg { opacity: 1; color: var(--accent-500); }
.cb-k { opacity: 1; color: var(--accent-500); }
.cb-pan:active, .cb-field:active { background: var(--accent-a22); }
.cb-menu { background: var(--accent-a12); color: var(--accent-500); }
.cb-menu:active { background: var(--accent-a22); }