/* Hills Coffee - dark theme (2026-10-26). Light is the default; html[data-theme="dark"] is set by
   theme-init.js from the visitor's choice. Same language as light: black + green, frosted glass,
   feathered green cards. Loaded after theme.css / landing.css and only re-colours, never re-lays out.
   Rule of thumb: "--ink" becomes the light text colour, so things that were black pills with white
   text (primary buttons, active tabs) become white pills with black text (#111413). */

/* switching themes: no colour transitions (hundreds of elements would animate at once) */
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; }

/* theme button: show the icon of the theme you would switch to */
.theme-btn .th-moon { display: block; } .theme-btn .th-sun { display: none; }
[data-theme="dark"] .theme-btn .th-moon { display: none; } [data-theme="dark"] .theme-btn .th-sun { display: block; }
.theme-btn svg { width: 18px; height: 18px; transition: transform .5s var(--ease); }
.theme-btn:hover svg { transform: rotate(-25deg); }
.l-theme { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--glass); border: 1px solid var(--edge); color: var(--ink); cursor: pointer; }
.auth-form-side { position: relative; }
.auth-theme { position: absolute; top: 22px; right: 22px; z-index: 2; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }

/* ================================================================ tokens */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0e11;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-solid: #16191d;
  --glass: rgba(24, 27, 31, 0.58);
  --glass-2: rgba(32, 36, 41, 0.74);
  --edge: rgba(255, 255, 255, 0.07);
  --ink: #eef0f3;
  --ink-2: #131619;
  --ink-3: #1c2024;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.11);
  --line-3: rgba(255, 255, 255, 0.18);
  --line-dark: rgba(255, 255, 255, 0.09);
  --text: #eef0f3;
  --text-2: rgba(236, 239, 243, 0.7);
  --text-3: rgba(236, 239, 243, 0.48);
  --text-4: rgba(236, 239, 243, 0.3);
  --g-700: #8fdcae; --g-600: #6fcf96; --g-100: rgba(61, 187, 114, 0.14);
  --grad-fx: radial-gradient(farthest-corner at 50% 66%, #07432a 0%, #127a43 30%, #2a9e5d 58%, #4cb879 80%, #1c4a33 100%);
  --glow: radial-gradient(70% 90% at 30% 125%, rgba(63, 184, 115, 0.5), rgba(23, 143, 78, 0.2) 45%, transparent 72%);
  --up: #3dbb72; --down: #ff7f5c;
  --up-soft: rgba(61, 187, 114, 0.14); --down-soft: rgba(255, 127, 92, 0.13);
  --warn: #e7ad48; --warn-soft: rgba(231, 173, 72, 0.13);
  --info: #8aa9ec; --info-soft: rgba(138, 169, 236, 0.13);
  --danger: #ff6b70;
  --hatch: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 7px);
}
[data-theme="dark"] ::selection { background: rgba(61, 187, 114, 0.35); color: #fff; }

/* ================================================================ canvas */
[data-theme="dark"] body::before { background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1.4px) 0 0 / 22px 22px, linear-gradient(180deg, #101215, #0a0b0d); }
[data-theme="dark"] body::after { background: radial-gradient(32% 30% at 82% 8%, rgba(148, 163, 184, 0.07), transparent 70%), radial-gradient(30% 32% at 6% 58%, rgba(61, 187, 114, 0.035), transparent 70%), radial-gradient(28% 26% at 62% 96%, rgba(148, 163, 184, 0.05), transparent 70%); }

/* ================================================================ header */
[data-theme="dark"] .pill.active svg { color: var(--g-500); }

/* ================================================================ surfaces */
[data-theme="dark"] .corner-link { background: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .corner-link:hover { background: rgba(255, 255, 255, 0.14); }
[data-theme="dark"] .banner.warn { background: rgba(231, 173, 72, 0.12); }
[data-theme="dark"] .banner.danger { background: rgba(255, 107, 112, 0.12); }
[data-theme="dark"] .warn-item, [data-theme="dark"] .order-row.attention { background: rgba(255, 127, 92, 0.1); border-color: var(--edge); }
[data-theme="dark"] .warn-item.calm { background: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] .fx, [data-theme="dark"] .card.light, [data-theme="dark"] .card.glow { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; }
[data-theme="dark"] .card.light .btn.primary, [data-theme="dark"] .fx .btn.primary { color: #0b5a33; }
[data-theme="dark"] .card.light .icon-circle, [data-theme="dark"] .card.glow .icon-circle, [data-theme="dark"] .card.light .list-item .icon-circle { color: #0b5a33; }
[data-theme="dark"] .card.light .ac-tag, [data-theme="dark"] .card.glow .btn.primary { color: #111413; }
[data-theme="dark"] .ink, [data-theme="dark"] .hero, [data-theme="dark"] .mk-hero { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .hero .btn.primary, [data-theme="dark"] .ink .btn.primary, [data-theme="dark"] .mk-hero .btn.primary, [data-theme="dark"] .hero .btn.lime, [data-theme="dark"] .mk-hero .btn.lime,
[data-theme="dark"] .hero .btn.primary svg { color: #111413; }

/* ================================================================ controls */
[data-theme="dark"] .btn { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .btn:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.14); }
[data-theme="dark"] .btn.primary { background: #eef0f3; color: #111413; border-color: #eef0f3; }
[data-theme="dark"] .btn.primary:hover { background: #fff; border-color: #fff; }
[data-theme="dark"] .btn.primary svg { color: #111413; }
[data-theme="dark"] .btn.lime, [data-theme="dark"] .btn.green, [data-theme="dark"] .btn.lime:hover, [data-theme="dark"] .btn.green:hover { background: var(--grad); background-size: 140% 100%; color: #fff; border: 0; }
[data-theme="dark"] .btn.lime:hover, [data-theme="dark"] .btn.green:hover { background-position: 100% 0; }
[data-theme="dark"] .btn.ghost { background: none; }
[data-theme="dark"] .btn.ghost:hover { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .btn.danger { background: rgba(255, 107, 112, 0.14); color: #ff8a8e; border-color: rgba(255, 107, 112, 0.25); }
[data-theme="dark"] .btn.sell { background: rgba(255, 127, 92, 0.14); border-color: rgba(255, 127, 92, 0.25); }
[data-theme="dark"] .link { text-decoration-color: rgba(255, 255, 255, 0.3); }
[data-theme="dark"] .input, [data-theme="dark"] .select, [data-theme="dark"] .textarea { background: rgba(255, 255, 255, 0.05); }
[data-theme="dark"] .input:focus, [data-theme="dark"] .select:focus, [data-theme="dark"] .textarea:focus { background: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .select option { background: #16191d; color: var(--text); }
[data-theme="dark"] .seg button.active, [data-theme="dark"] .tabs button.active { color: #111413; }
[data-theme="dark"] .tabs .count { background: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .chip { background: rgba(255, 255, 255, 0.05); }
[data-theme="dark"] .chip.active { color: rgba(17, 20, 19, 0.7); }
[data-theme="dark"] .chip.active b { color: #0b5a33; }
[data-theme="dark"] .badge { background: rgba(255, 255, 255, 0.05); }
[data-theme="dark"] .badge.green { color: var(--g-300); background: rgba(61, 187, 114, 0.14); }
[data-theme="dark"] .badge.red { color: #ff8a8e; background: rgba(255, 107, 112, 0.14); }
[data-theme="dark"] .badge.accent { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .outline-pill.green { color: var(--g-300); background: rgba(61, 187, 114, 0.1); }
[data-theme="dark"] .cup, [data-theme="dark"] .score { color: #e0bf5a; }
[data-theme="dark"] .chg.up.pill { background: rgba(61, 187, 114, 0.14); color: var(--g-300); }
[data-theme="dark"] .dropzone { background: rgba(255, 255, 255, 0.03); }
[data-theme="dark"] .progress, [data-theme="dark"] .range-bar { background: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .table tbody tr:hover, [data-theme="dark"] a.list-item:hover, [data-theme="dark"] .row-i:hover { background: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] .list-item .icon-circle { background: rgba(255, 255, 255, 0.07); color: var(--text); }
[data-theme="dark"] .summary, [data-theme="dark"] .callout, [data-theme="dark"] .pay-opt, [data-theme="dark"] .bank-box, [data-theme="dark"] .copy-field, [data-theme="dark"] .pre, [data-theme="dark"] .msg { background: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] .pay-opt.active { background: rgba(61, 187, 114, 0.12); }
[data-theme="dark"] .msg.me { color: #111413; }
[data-theme="dark"] .ticks { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0 1px, transparent 1px 4px) left center / var(--f) 9px no-repeat, repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 4px) center / 100% 9px no-repeat; }
[data-theme="dark"] .ticks .mark { background: #16191d; }
[data-theme="dark"] .overlay { background: rgba(5, 7, 6, 0.55); }
[data-theme="dark"] .modal, [data-theme="dark"] .drawer, [data-theme="dark"] .menu { background: rgba(21, 24, 28, 0.94); }
[data-theme="dark"] .menu a:hover, [data-theme="dark"] .menu button:hover, [data-theme="dark"] .menu a.active { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .notif-panel .np-head { background: rgba(21, 24, 28, 0.97); }
[data-theme="dark"] .notif { background: rgba(255, 255, 255, 0.03); }
[data-theme="dark"] .notif.unread { background: rgba(61, 187, 114, 0.1); }
[data-theme="dark"] .toast { background: #1f2328; color: var(--text); box-shadow: inset 0 0 0 1px var(--edge); }
[data-theme="dark"] .asset-card .ac-art { color: rgba(255, 255, 255, 0.4); }
[data-theme="dark"] .asset-card .ac-tag { background: #1c2024; color: var(--text); }
[data-theme="dark"] .asset-card .ac-tag i { color: #111413; }
[data-theme="dark"] .segchart .c-grid { stroke: rgba(255, 255, 255, 0.07); } [data-theme="dark"] .segchart .c-faint { stroke: rgba(255, 255, 255, 0.16); } [data-theme="dark"] .segchart .c-avg { stroke: rgba(255, 255, 255, 0.22); }

/* ================================================================ micro components + dashboard */
[data-theme="dark"] .ib { background: rgba(255, 255, 255, 0.07); }
[data-theme="dark"] .ib:hover { background: rgba(255, 255, 255, 0.14); }
[data-theme="dark"] .bc i { background: rgba(255, 255, 255, 0.18); }
[data-theme="dark"] .sg > div { background: rgba(255, 255, 255, 0.08); color: var(--text); }
[data-theme="dark"] .sg > div:first-child { background: var(--grad); color: #fff; }
[data-theme="dark"] .sg > div.hatch { background: var(--hatch), rgba(255, 255, 255, 0.03); }
[data-theme="dark"] .dial .tk { stroke: rgba(255, 255, 255, 0.16); }
[data-theme="dark"] .dial .arc { stroke: rgba(255, 255, 255, 0.14); }
[data-theme="dark"] .dc-t .ic, [data-theme="dark"] .todo .n { background: rgba(255, 255, 255, 0.07); color: var(--text); }
[data-theme="dark"] .todo .n.hot { background: var(--grad-fx); color: #fff; }
[data-theme="dark"] .fl.dk { background: #2a2e34; }
[data-theme="dark"] .mring { background: conic-gradient(var(--g-500) calc(var(--p) * 1%), rgba(255, 255, 255, 0.08) 0); }
[data-theme="dark"] .dc-legend span.m::before { background: rgba(255, 255, 255, 0.2); }

/* coffee cards */
[data-theme="dark"] .coffee-card .cc-art { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.32); }
[data-theme="dark"] .coffee-card:hover .cc-art svg { color: rgba(255, 255, 255, 0.55); }
[data-theme="dark"] .coffee-card .cc-art .ac-tag { background: #1c2024; color: var(--text); }
[data-theme="dark"] .coffee-card .cc-flag span { background: rgba(21, 24, 28, 0.86); color: var(--text); }
[data-theme="dark"] .coffee-card .cc-flag span.brand { background: var(--grad); color: #fff; }
[data-theme="dark"] .deal.flat { background: rgba(255, 255, 255, 0.06); }

/* ================================================================ landing */
[data-theme="dark"] .h3::before { background: radial-gradient(closest-side, rgba(148, 163, 184, 0.07), rgba(61, 187, 114, 0.03) 55%, transparent 75%); }
[data-theme="dark"] .h3-globe::before { background: radial-gradient(circle, rgba(61, 187, 114, 0.07), transparent 70%); }
[data-theme="dark"] .nl-strip { background: #131619; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .nl-dark { background: #121518; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .nl-step .dot, [data-theme="dark"] .nl-line.v2 .nl-step .dot { border-color: #121518; }
[data-theme="dark"] .nl-line.v2 .nl-step.cur .dot { color: #0b5a33; }
[data-theme="dark"] .nl-line.v2 .nl-step.cur .pillx { color: #111413; }
[data-theme="dark"] .nl-meter { background: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .nl-grow-btn { color: #0b5a33; }
[data-theme="dark"] .nl-grow-box { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
[data-theme="dark"] .nl-calc input[type=range] { background: linear-gradient(90deg, var(--g-500) 0 var(--v, 40%), rgba(255, 255, 255, 0.1) var(--v, 40%) 100%); }
[data-theme="dark"] .nl-calc-r .hl { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
[data-theme="dark"] .nl-end-lime { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .nl-end-cta .btn.primary { color: #111413; }
[data-theme="dark"] .whb-t { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 3px, transparent 3px 6px); }
[data-theme="dark"] .mdr-t { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 10%); }
[data-theme="dark"] .mdr-t .av { background: #eef0f3; border-color: #0c0e11; }
[data-theme="dark"] .h3-stage .h3-main, [data-theme="dark"] .wh-dock { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
[data-theme="dark"] .card.light .ac-tag, [data-theme="dark"] .card.glow .ac-tag { background: rgba(255, 255, 255, 0.92); color: #111413; }

/* ================================================================ dark mode: white feature cards
   The cards that are black in light mode turn white in dark mode, so the page keeps the same
   black / white / green contrast in both themes. Variables are re-pointed inside the card so most
   children flip automatically; hard-coded whites are overridden below. */
[data-theme="dark"] :is(.ink, .hero, .mk-hero, .nl-end-lime) {
  --on-dark: #111413; --on-dark-2: rgba(17, 20, 19, 0.66); --on-dark-3: rgba(17, 20, 19, 0.5); --line-dark: rgba(17, 20, 19, 0.1);
  --ink: #111413; --text: #111413; --text-2: rgba(17, 20, 19, 0.7); --text-3: rgba(17, 20, 19, 0.5); --text-4: rgba(17, 20, 19, 0.32);
  --line: rgba(17, 20, 19, 0.08); --line-2: rgba(17, 20, 19, 0.12); --line-3: rgba(17, 20, 19, 0.2);
  --g-700: #0b5a33; --g-600: #10773f; --g-100: #e3f6e8;
  --glow: radial-gradient(70% 90% at 30% 125%, rgba(63, 184, 115, 0.3), rgba(23, 143, 78, 0.1) 45%, transparent 72%);
  background: #eef0f3 !important; color: #111413; box-shadow: none !important; }
[data-theme="dark"] .ink b, [data-theme="dark"] .hero .hero-value, [data-theme="dark"] .h3-px, [data-theme="dark"] .nb-custody .nb-big b,
[data-theme="dark"] .mk-hero h1, [data-theme="dark"] .mk-stat b, [data-theme="dark"] .nl-end-lime h2 { color: #111413; }
[data-theme="dark"] :is(.ink, .hero) .up { color: #10773f; }
[data-theme="dark"] :is(.ink, .hero, .mk-hero, .nl-end-lime) .btn { background: rgba(17, 20, 19, 0.05); color: #111413; border-color: rgba(17, 20, 19, 0.12); }
[data-theme="dark"] :is(.ink, .hero, .mk-hero, .nl-end-lime) .btn.primary,
[data-theme="dark"] :is(.ink, .hero, .mk-hero, .nl-end-lime) .btn.primary svg { background: #111413; color: #fff; border-color: #111413; }
[data-theme="dark"] :is(.ink, .hero, .mk-hero, .nl-end-lime) .btn.primary svg { background: none; }
[data-theme="dark"] .ink .ib.dark { background: rgba(17, 20, 19, 0.07); color: #111413; }
[data-theme="dark"] .ink .ib.dark:hover { background: rgba(17, 20, 19, 0.13); }
[data-theme="dark"] .ink .dc-t .ic { background: rgba(17, 20, 19, 0.07); color: #111413; }
[data-theme="dark"] .ink .bc i { background: rgba(17, 20, 19, 0.16); } [data-theme="dark"] .ink .bc i.on { background: var(--g-500); } [data-theme="dark"] .ink .bc i.hi { background: #111413; }
[data-theme="dark"] .ink .sg > div { background: rgba(17, 20, 19, 0.07); color: #111413; }
[data-theme="dark"] .ink .sg > div:first-child { background: var(--grad); color: #fff; }
[data-theme="dark"] .ink .sg > div.hatch { background: repeating-linear-gradient(-45deg, rgba(17, 20, 19, 0.12) 0 1px, transparent 1px 7px); color: rgba(17, 20, 19, 0.5); }
[data-theme="dark"] .ink .delta { background: rgba(27, 154, 85, 0.12); color: #0b5a33; }
[data-theme="dark"] .ink .delta.dn { background: rgba(208, 82, 43, 0.12); color: #b8431f; }
[data-theme="dark"] .ink .segchart .c-line { stroke: var(--g-600); } [data-theme="dark"] .ink .segchart .c-avg { stroke: rgba(17, 20, 19, 0.2); }
[data-theme="dark"] .mk-stat { background: rgba(17, 20, 19, 0.04); border-color: rgba(17, 20, 19, 0.08); }
[data-theme="dark"] .mk-stat > span svg { color: var(--g-600); }
/* warehouse dock */
[data-theme="dark"] .wh-dock::after { background-image: radial-gradient(rgba(17, 20, 19, 0.12) 1px, transparent 1.4px); }
[data-theme="dark"] .wh-ring i { border-color: rgba(17, 20, 19, 0.16); } [data-theme="dark"] .wh-ring i + i { border-color: rgba(27, 154, 85, 0.3); }
[data-theme="dark"] .wh-orbit span { background: rgba(255, 255, 255, 0.7); border-color: rgba(17, 20, 19, 0.1); color: #111413; }
[data-theme="dark"] .wh-cap { color: #111413; } [data-theme="dark"] .wh-cap b { color: rgba(17, 20, 19, 0.6); }
[data-theme="dark"] .wh-dock .nl-label.on-dark { background: rgba(17, 20, 19, 0.05); border-color: rgba(17, 20, 19, 0.15); color: rgba(17, 20, 19, 0.7); }
/* closing card */
[data-theme="dark"] .nl-end-lime h2 em.s { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="dark"] .nl-end-lime .nl-label.dark { background: rgba(17, 20, 19, 0.05); border-color: rgba(17, 20, 19, 0.15); color: rgba(17, 20, 19, 0.7); }
[data-theme="dark"] .nl-end-cta .btn:not(.primary) { color: #111413; border-color: rgba(17, 20, 19, 0.2); background: rgba(17, 20, 19, 0.04); }
[data-theme="dark"] .nl-foot .l-brand.dark img { filter: none !important; }

/* the live warehouse floor card stays dark in dark mode (slate), unlike the other feature cards */
[data-theme="dark"] .wh2-floor.ink {
  --on-dark: #eef0f3; --on-dark-2: rgba(236, 239, 243, 0.66); --on-dark-3: rgba(236, 239, 243, 0.45); --line-dark: rgba(255, 255, 255, 0.08);
  --ink: #eef0f3; --text: #eef0f3; --text-2: rgba(236, 239, 243, 0.7); --text-3: rgba(236, 239, 243, 0.48); --text-4: rgba(236, 239, 243, 0.3);
  --line: rgba(255, 255, 255, 0.07); --line-2: rgba(255, 255, 255, 0.11);
  --glow: radial-gradient(70% 90% at 30% 125%, rgba(63, 184, 115, 0.22), rgba(23, 143, 78, 0.08) 45%, transparent 72%);
  background: #15181c !important; color: #eef0f3; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07) !important; }
[data-theme="dark"] .wh2-floor.ink b { color: #eef0f3; }
[data-theme="dark"] .wh2-floor.ink .dc-t .ic { background: rgba(255, 255, 255, 0.07); color: #eef0f3; }
[data-theme="dark"] .wh2-floor .wh2-live, [data-theme="dark"] .wh2-floor .wh2-tip { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .wh2-floor .wh2-tip.on { background: var(--g-500); color: #fff; }
[data-theme="dark"] .wh2-floor .wh2-plan { background: rgba(255, 255, 255, 0.03); }
[data-theme="dark"] .wh2-floor .b4 { background-color: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] .wh2-floor .wh2-leg span.on { background: rgba(255, 255, 255, 0.07); }
[data-theme="dark"] .wh2-floor::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.05), transparent); }
[data-theme="dark"] .wh2-floor .wh2-logo { background: #0b0d0f; }

/* dark mode switched off for now (theme-init.js ENABLED = false) */
html.no-theme-switch .theme-btn { display: none !important; }