/* URLtoQR — black/gray theme.
 * Loaded after shared/style.css. Overrides the navy/blue palette baked into
 * the shared stylesheet so the site echoes the matte-black-and-silver app
 * icon. Touches only this site — shared/ is untouched. */

:root {
  --navy-0: #000000;
  --navy-1: #0d0d0d;
  --navy-2: #1a1a1a;
  --blue-1: #2a2a2a;
  --blue-2: #4a4a4a;
  --blue-3: #c8c8c8;
  --ink:    #0a0a0a;
  --ink-2:  #2a2a2a;
  --mute:   #6b6b6b;
  --line:   #e6e6e6;
  --line-2: #eeeeee;

  /* Warm accent — a single orange tint used consistently across the site. */
  --accent: #e07a3c;
}

::selection { background: var(--accent); color: #000; }

/* Body — charcoal radial wash */
body {
  background:
    radial-gradient(120% 80% at 50% -10%, #2a2a2a 0%, #0d0d0d 55%, #000 100%);
  background-attachment: fixed;
}

/* Topbar — dark glass */
.topbar {
  background: linear-gradient(180deg, rgba(13,13,13,0.7), rgba(13,13,13,0.3));
}

/* Hero glow — neutral white halo, not blue */
.hero::before {
  background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, transparent 60%);
}

/* Hero headline — white to silver */
h1.title {
  background: linear-gradient(180deg, #fff 0%, #c8c8c8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* CTA hover — go DARKER, not silver. Keeps white text legible. */
.nav .cta:hover  { background: #1a1a1a; color: #fff; }
.btn-primary:hover { background: #1a1a1a; color: #fff; }

/* App icon shadow — pure black drop */
.app-icon { box-shadow: 0 8px 28px rgba(0,0,0,0.55); }

/* Phone underside — silver hint replaces blue glow */
.phone {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 -1px 0 rgba(0,0,0,0.5) inset,
    0 30px 60px -10px rgba(0,0,0,0.55),
    0 80px 100px -40px rgba(255,255,255,0.05);
}

/* List row thumbs — grayscale ladder instead of mensa colors */
.list-row .thumb    { background: linear-gradient(135deg, #d8d8d8, #888);    }
.list-row .thumb.t2 { background: linear-gradient(135deg, #c8c8c8, #6a6a6a); }
.list-row .thumb.t3 { background: linear-gradient(135deg, #b8b8b8, #5a5a5a); }
.list-row .thumb.t4 { background: linear-gradient(135deg, #a8a8a8, #4a4a4a); }
.list-row .thumb.t5 { background: linear-gradient(135deg, #989898, #3a3a3a); }
.list-row .thumb.t6 { background: linear-gradient(135deg, #888,    #2a2a2a); }

/* Status dot — neutral, not green */
.list-row .gdot { background: #888; box-shadow: 0 0 0 2px rgba(136,136,136,0.18); }
.list-row .rdot { background: #444; box-shadow: 0 0 0 2px rgba(68, 68, 68, 0.18); }

/* Map placeholder + pin — neutral */
.addr-card .map { background: linear-gradient(135deg, #e0e0e0, #b8b8b8); }
.addr-card .map::after { color: #1a1a1a; }

/* Menu item thumbs — grayscale */
.menu-item .mi-img      { background: linear-gradient(135deg, #c8c8c8, #5a5a5a); }
.menu-item .mi-img.alt2 { background: linear-gradient(135deg, #b8b8b8, #4a4a4a); }
.menu-item .mi-img.alt3 { background: linear-gradient(135deg, #a8a8a8, #3a3a3a); }
.menu-item .mi-img.alt4 { background: linear-gradient(135deg, #989898, #2a2a2a); }

/* Station dots — neutralize meat/leaf semantics */
.mi-station .leaf,
.mi-station .meat { color: #888; }

/* Settings group icons — six gray steps */
.gi.b1 { background: #4a4a4a; }
.gi.b2 { background: #6a6a6a; }
.gi.b3 { background: #5a5a5a; }
.gi.b4 { background: #3a3a3a; }
.gi.b5 { background: #7a7a7a; }
.gi.b6 { background: #2a2a2a; }

/* Toggle — warm orange when on, light gray when off */
.toggle { background: var(--accent); }
.toggle.off { background: #c8ccd6; }

/* Feature card icons — solid orange, one tint */
.feat .ico,
.feat .ico.g,
.feat .ico.o,
.feat .ico.r,
.feat .ico.p,
.feat .ico.t {
  background: var(--accent);
  box-shadow: 0 6px 16px rgba(224,122,60,0.32), inset 0 1px 0 rgba(255,255,255,0.22);
}

.feat:hover {
  border-color: var(--accent);
  box-shadow: 0 24px 48px -16px rgba(224,122,60,0.18);
}

/* Download band — pure black radial */
.download {
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(255,255,255,0.06) 0%, transparent 60%),
    linear-gradient(180deg, #0d0d0d, #000);
}
.download .h2 {
  background: linear-gradient(180deg, #fff, #c8c8c8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.download .h2 span { -webkit-text-fill-color: var(--accent); }

/* Platform tile glyph + hover — orange device icons */
.platform .gl {
  background: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
.platform:hover {
  background: rgba(224,122,60,0.10);
  border-color: var(--accent);
}

/* ============ Warm accent moments ============
 * The orange shows up only in places where the eye naturally lands.
 * Everywhere else stays black/silver so the warmth reads as a hint,
 * not a second color theme. */

/* Caption accent words above each phone (e.g. "one tap", "AirDrop it") */
.phone-cell .caption span { color: var(--accent); }

/* Features section — eyebrow chip and h2 accent */
.alt .eyebrow          { color: var(--accent); }
.alt .eyebrow::before  { background: var(--accent); }
.alt .h2 span          { color: var(--accent); }

/* Hero icon shadow gains a touch of warm tint */
.hero-icon.app-icon {
  box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 24px 80px rgba(224,122,60,0.12);
}

/* Footer link hover */
footer ul a:hover { color: var(--accent); }