/* ============================================================
   Dumbphone — Minimal Launcher
   Identity: monospace IS the product. True-black OLED canvas,
   warm orange accent, Fraunces for headlines, Geist Mono for the
   launcher list + labels. Calm, quiet, intentional.
   ============================================================ */

:root {
  /* Brand tokens */
  --brand-bg-dark: #000000;        /* authentic OLED black */
  --brand-bg-light: #F4F1EC;       /* warm bone — light sections */
  --brand-accent: #FF5B1F;         /* signal orange — CTAs, links */
  --brand-accent-2: #34C759;       /* iOS green — secondary accent */
  --brand-accent-ink: #1A0A00;     /* near-black ink on the bright orange — 6.7:1 AA (white is only 3.1:1) */

  /* Elevated/card surfaces — color-mix off pure black is too flat,
     so pin them to the authentic #0A0A0A / hairline ramp. */
  --bg-elevated: #0A0A0A;
  --bg-card: #0A0A0A;

  --hairline: rgba(255, 255, 255, 0.07);
  --hairline-strong: rgba(255, 255, 255, 0.13);

  --theme-color: #000000;
}

/* The orange halo reads strong on pure black — soften it a touch. */
.halo::before { opacity: 0.5; }

/* ============================================================
   web-fx · ember liquid-chrome behind the hero.
   Dumbphone stays OLED-calm: the flow is signal-orange on true black,
   kept very dark + low-opacity + masked, so it reads as a faint ember,
   not a metallic surface. The launcher screenshots remain the focus.
   ============================================================ */
.hero .fx-liquid {
  background-image: url(assets/liquid-ember.webp);
  opacity: 0.36;
  -webkit-mask-image: radial-gradient(125% 100% at 50% 18%, #000 26%, transparent 74%);
          mask-image: radial-gradient(125% 100% at 50% 18%, #000 26%, transparent 74%);
}
/* with the ember present, dial the orange halo back so the hero isn't busy */
.hero .halo::before { opacity: 0.3; }