/* Light/dark theme. The sun/moon button sits next to the language picker; the
   `dark` class on <html> is written by theme-v1.js (visitor choice). Loaded
   LAST so that every rule here wins by order at equal specificity; the
   `html.dark` prefix also adds one type + one class over the light rules.
   Mock-ups of restaurant pages (menu paper, phone screens, the demo menu)
   keep their own light look: they are pictures of a product, not chrome. */

/* ---------- the button ---------- */
.theme-toggle { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1px solid #dce7df; background: #ffffffb8; color: #3d5847; cursor: pointer; flex-shrink: 0; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; }
.theme-toggle:hover, .theme-toggle:focus-visible { border-color: #1E8149; background: #eaf7ee; }
.theme-toggle .theme-icon { width: 20px; height: 20px; }
.theme-toggle .theme-icon-moon { display: none; }
html.dark .theme-toggle .theme-icon-sun { display: none; }
html.dark .theme-toggle .theme-icon-moon { display: block; }
html.dark .theme-toggle { border-color: #2f3733; background: #151a17b8; color: #cfe3d6; }
html.dark .theme-toggle:hover, html.dark .theme-toggle:focus-visible { border-color: #6fcf97; background: #1f2f26; }
@media (max-width: 480px) { .theme-toggle { width: 38px; height: 38px; } .theme-toggle .theme-icon { width: 18px; height: 18px; } }

/* ---------- tokens ---------- */
html.dark { color-scheme: dark; --ink: #f1f1f3; --muted: #a6adaa; --paper: #0f1211; --mist: #181c1a; --cream: #15201a; --line: #2b3430; --mint: #1f4a33; --deep: #c2edce; --green: #6fcf97; }
html.dark body { background: var(--paper); color: var(--ink); }
html.dark :focus-visible { outline-color: #6fcf97; }
html.dark .skip { background: #111; }

/* ---------- header ---------- */
html.dark .header { background: rgb(15 18 17 / 88%); border-color: #2b3430; }
html.dark .nav-links a { color: #c9cdca; }
html.dark .nav-links a:hover { color: #fff; }
html.dark .nav-links { background: #141816fc; border-color: #2b3430; box-shadow: 0 18px 25px #00000055; }
html.dark .button, html.motion-v7-ready.dark .button { background: #22915a; color: #fff; box-shadow: none; }
html.dark .button:hover, html.dark .button:focus-visible, html.motion-v7-ready.dark .button:hover { background: #2aa868; }
html.dark .locale-picker > summary { border-color: #2f3733; }
html.dark .locale-picker[open] > summary { background: #1f2f26; border-color: #3f6a51; }
html.dark .locale-options { background: #161a18; border-color: #2f3733; box-shadow: 0 18px 50px #00000080; }
html.dark .locale-options a:hover, html.dark .locale-options a:focus-visible { background: #1f2f26; }
html.dark .locale-options a[aria-current=page] { background: #232a25; }
html.dark .motion-toggle { border-color: #2f3733; background: #151a17b8; color: #c9d3cd; }
html.dark .motion-toggle:hover, html.dark .motion-toggle:focus-visible { border-color: #6fcf97; background: #1f2f26; }
html.dark .motion-toggle[aria-pressed="true"] { border-color: #3f6a51; color: #a9c9b6; }

/* ---------- hero and devices ---------- */
html.dark .hero { background: linear-gradient(180deg, #0f1211 25%, #132018 70%, #0f1211); }
html.dark .hero::before { background: radial-gradient(ellipse at 13% 55%, #1f4a3399, transparent 60%); }
html.dark .hero h1 > span { color: #a9c9b6; }
html.dark .hero-rating { color: #a6adaa; }
html.dark .hero-rating strong, html.dark .hero-rating .rating-stars { color: #f1f1f3; }
html.dark .device-stage::before { background: radial-gradient(ellipse at 50% 68%, #1f4a3370, transparent 70%); }
html.dark .desktop { border-color: #3a3f3c; background: #1c1f1e; box-shadow: 0 28px 60px -22px #00000099, 0 0 0 1px #4a524d; }
html.dark .device-chrome { background: #23272a; color: #9a9ea1; border-color: #33383b; }
html.dark .traffic i { background: #4a4f52; }
html.dark .phone { border-color: #3a3a3e; box-shadow: 0 0 0 1px #55555b, 10px 23px 45px -14px #000c; }
html.dark .device-viewport { background: #1a1d1c; }
html.dark .device-stage .phone, html.dark .device-stage .phone .device-chrome { background: #1e2220; }
html.dark .device-stage figcaption { color: #a6adaa; }
html.dark .device-stage figcaption a { color: #6fcf97; }
html.dark .device-stage figcaption a:hover { color: #a9e6c2; }
html.dark .feature-rail { color: #b3b9b5; }
html.dark .feature-rail > span { border-color: #2f4a3a; background: #151a17b8; }
html.dark .feature-rail svg { color: #6fcf97; }

/* ---------- experience ---------- */
html.dark .experience, html.dark .evidence-section, html.dark .assurance-bar, html.dark .experience-deep-dive { border-color: #2b3430; }
html.dark .evidence-item, html.dark .evidence-item:first-child { border-color: #2b3430; }
html.dark .menu-feature { background: #1a1f1c; }
html.dark .action-feature { background: #1a221d; }
html.dark .action-visual > span { background: #242a26; border-color: #3a4a40; }
html.dark .identity-feature { background: #182019; }
html.dark .identity-feature p { color: #b8c4bc; }
html.dark .identity-visual > span { color: #cfe3d6; }
html.dark .illustration-note { color: #8f9a94; }
html.dark .explorer-tabs button { border-color: #2f3733; background: #161a18; color: #c9d3cd; }
html.dark .explorer-tabs button:hover { background: #1f2f26; border-color: #3f6a51; }
html.dark .explorer-tabs button.is-active { background: #22915a; border-color: #22915a; color: #fff; }
html.dark .feature-panel { background: #161a18; border-color: #2b3430; }
html.dark .explorer-copy li { color: #c9d3cd; }
html.dark .demo-label { color: #a9c9b6; }
html.dark .demo-language { background: #232a25; }
html.dark .demo-language button { color: #c9d3cd; }
html.dark .demo-language button.is-active { background: #3a443e; color: #fff; }
html.dark .journey-card { background: #161a18; box-shadow: none; }
html.dark .journey-card li:not(:last-child) { border-color: #2b3430; }
html.dark .journey-card li > span { background: #1f4a33; }
html.dark .visit-demo { background: #161a18; border-color: #2f3733; }
html.dark .brand-art { background: #161a18; }
html.dark .brand-art i { border-color: #161a18; }

/* ---------- work ---------- */
html.dark .work-section { background: linear-gradient(180deg, #121614, #15201a); }
html.dark .project { border-color: #2b3430; }
html.dark .project-image { background: #1e2321; box-shadow: none; }
html.dark .project-open { background: #1a1f1cf2; }
html.dark .project-name > span { color: #9aa39e; }
html.dark .work-note { color: #a6adaa; }
html.dark .project-browser { border-color: #2f3733; background: #161a18; box-shadow: 0 9px 25px #00000055; }
html.dark .project-browser-bar { background: #1c211e; border-color: #2f3733; color: #9aa39e; }
html.dark .project-browser-dots i { border-color: #4a5550; }
html.dark .work-grid--screens .project:hover .project-browser, html.dark .work-grid--screens .project:focus-visible .project-browser { border-color: #3f6a51; box-shadow: 0 11px 30px #00000066; }

/* ---------- care, approach, contact, footer ---------- */
html.dark .care-visual { background: radial-gradient(ellipse at center, #1f4a339c, transparent 65%); }
html.dark .orbit { border-color: #3a5a48; }
html.dark .orbit-two { border-color: #2f4a3a; }
html.dark .care-emblem { border-color: #3a5a48; background: linear-gradient(145deg, #1c211e, #173026); box-shadow: none; }
html.dark .care-label { color: #cfe3d6; background: #171b19ef; border-color: #2f3733; box-shadow: none; }
html.dark .care-list article { border-color: #2b3430; }
html.dark .care-number { color: #8f9a94; }
html.dark .care-note { color: #a6adaa; }
html.dark .approach-section { background: #0b1f15; }
/* motion-v2 paints this eyebrow with --mint, which is a dark green in this theme: keep the light value the section always had. */
html.dark .approach-section .eyebrow { color: #a6c4b5; }
html.dark .steps article > span { color: #9baaa2; }
html.dark .steps p { color: #d1e1d7; }
html.dark .contact-section { background: linear-gradient(130deg, #15201a 0%, #132018 45%, #0f1211); }
html.dark .contact-section::before, html.dark .contact-section::after { border-color: #2f4a3a; }
html.dark .contact-section .lead, html.dark .email { color: #b8c4bc; }
html.dark .footer-bottom { color: #8f9a94; }