/* Bill Splitter — Clean (light and dark), the refined iOS/system look of the
 * mockup: grouped inset lists on a grey page, one blue accent, soft shadows.
 * The house tokens come from css/kit/clean-tokens.css; this file adds the
 * member colours (restated for light and dark) and paints every selector
 * on tokens. Every rule is scoped under [data-theme="clean"] because
 * retro.css is linked at the same time. Sections follow base.css's
 * `== screen: <name> ==` markers. */

:root[data-theme="clean"] {
  --member-1-bg: #1f66c2; --member-1-fg: #ffffff;
  --member-2-bg: #c2410c; --member-2-fg: #ffffff;
  --member-3-bg: #0f7a4f; --member-3-fg: #ffffff;
  --member-4-bg: #8a5a00; --member-4-fg: #ffffff;
  --member-5-bg: #6d3fc4; --member-5-fg: #ffffff;
  --member-6-bg: #b3246e; --member-6-fg: #ffffff;
  --member-7-bg: #0b6e7a; --member-7-fg: #ffffff;
  --member-8-bg: #52606d; --member-8-fg: #ffffff;
  --stripe-a: #e5e5ea;
  --stripe-b: #f2f2f7;
}

/* Dark, chosen; byte-identical to the block under the media query below. */
:root[data-theme="clean"][data-scheme="dark"] {
  --member-1-bg: #7fb2f5; --member-1-fg: #0c0d12;
  --member-2-bg: #ff9b6b; --member-2-fg: #0c0d12;
  --member-3-bg: #5fd3a0; --member-3-fg: #0c0d12;
  --member-4-bg: #e8b64c; --member-4-fg: #0c0d12;
  --member-5-bg: #b89bf5; --member-5-fg: #0c0d12;
  --member-6-bg: #f58ab8; --member-6-fg: #0c0d12;
  --member-7-bg: #5cc9d6; --member-7-fg: #0c0d12;
  --member-8-bg: #aab4c0; --member-8-fg: #0c0d12;
  --stripe-a: #2c2d36;
  --stripe-b: #1f2028;
}
@media (prefers-color-scheme: dark) {
:root[data-theme="clean"]:not([data-scheme="light"]) {
  --member-1-bg: #7fb2f5; --member-1-fg: #0c0d12;
  --member-2-bg: #ff9b6b; --member-2-fg: #0c0d12;
  --member-3-bg: #5fd3a0; --member-3-fg: #0c0d12;
  --member-4-bg: #e8b64c; --member-4-fg: #0c0d12;
  --member-5-bg: #b89bf5; --member-5-fg: #0c0d12;
  --member-6-bg: #f58ab8; --member-6-fg: #0c0d12;
  --member-7-bg: #5cc9d6; --member-7-fg: #0c0d12;
  --member-8-bg: #aab4c0; --member-8-fg: #0c0d12;
  --stripe-a: #2c2d36;
  --stripe-b: #1f2028;
}
}

/* == shell == */
[data-theme="clean"] body { background-color: var(--bg); color: var(--text); }
[data-theme="clean"] :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[data-theme="clean"] #demo-bar { background-color: var(--info-soft); color: var(--info-soft-text); }
[data-theme="clean"] #demo-bar select { background-color: var(--surface); color: var(--text); border: 1px solid var(--border-alt); }
[data-theme="clean"] #demo-note { color: var(--info-soft-text); }
[data-theme="clean"] #topbar { background-color: var(--surface); border-bottom: 1px solid var(--border); }
[data-theme="clean"] #brand { color: var(--text); }
[data-theme="clean"] .back-link { color: var(--link); }
[data-theme="clean"] #tabbar { background-color: var(--surface); border-top: 1px solid var(--border); }
[data-theme="clean"] .tab { color: var(--text-muted); }
[data-theme="clean"] .tab[aria-current="page"] { color: var(--link); font-weight: 700; }
[data-theme="clean"] .tab-count { background-color: var(--danger); color: var(--danger-text); }
[data-theme="clean"] .fab { background-color: var(--accent); color: var(--accent-text); box-shadow: var(--shadow-3); }
[data-theme="clean"] #app-loading { color: var(--text-muted); }
@media (min-width: 768px) {
  [data-theme="clean"] #tabbar { border-top: 0; background-color: transparent; }
  [data-theme="clean"] #app::before { background-color: var(--surface); border-right: 1px solid var(--border); }
  [data-theme="clean"] .tab[aria-current="page"] { background-color: var(--accent-soft); color: var(--accent-soft-text); }
}

/* == shared components == */
[data-theme="clean"] .card { background-color: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1); }
[data-theme="clean"] .list-row + .list-row,
[data-theme="clean"] .card-row + .card-row { border-top: 1px solid var(--border); }
[data-theme="clean"] .row-link, [data-theme="clean"] .row-button { color: var(--text); }
[data-theme="clean"] .row-sub, [data-theme="clean"] .muted { color: var(--text-muted); }
[data-theme="clean"] .section-label { color: var(--text-muted); }
[data-theme="clean"] .amount { color: var(--text); }
[data-theme="clean"] .amount-pos { color: var(--success-soft-text); }
[data-theme="clean"] .amount-neg { color: var(--danger-soft-text); }
[data-theme="clean"] .amount-zero { color: var(--text-muted); }
[data-theme="clean"] .hero-amount.amount-zero { color: var(--text); }
[data-theme="clean"] .empty { color: var(--text-muted); }

[data-theme="clean"] button.button, [data-theme="clean"] a.button, [data-theme="clean"] .button {
  background-color: var(--surface); color: var(--text); border: 1px solid var(--border-alt);
  transition: background-color var(--duration-fast) var(--ease-standard);
}
[data-theme="clean"] .button.primary { background-color: var(--accent); color: var(--accent-text); border-color: var(--accent); }
[data-theme="clean"] .button.danger { background-color: var(--danger-soft); color: var(--danger-soft-text); border-color: var(--danger-soft); }
[data-theme="clean"] .button:disabled, [data-theme="clean"] .button.primary:disabled { background-color: var(--surface-alt); color: var(--text-muted); border-color: var(--border); }
@media (hover: hover) {
  [data-theme="clean"] .button:hover:not(:disabled) { background-color: var(--surface-alt); }
  [data-theme="clean"] .button.primary:hover:not(:disabled) { background-color: var(--accent-hover); }
  [data-theme="clean"] .row-link:hover, [data-theme="clean"] .row-button:hover { background-color: var(--surface-alt); }
}
[data-theme="clean"] .link-btn { color: var(--link); }
[data-theme="clean"] .link-btn:disabled { color: var(--text-muted); }
[data-theme="clean"] .link-btn.danger { color: var(--danger-soft-text); }
[data-theme="clean"] #topbar .link-btn.primary { color: var(--link); font-weight: 700; }
[data-theme="clean"] #topbar .link-btn:disabled { color: var(--text-muted); }
[data-theme="clean"] .icon-btn { color: var(--text-muted); }

[data-theme="clean"] .segmented { background-color: var(--surface-alt); border: 1px solid var(--border); }
[data-theme="clean"] .seg-btn { background-color: transparent; color: var(--text-muted); border: 1px solid transparent; }
[data-theme="clean"] .seg-btn[aria-selected="true"], [data-theme="clean"] .seg-btn[aria-checked="true"] {
  background-color: var(--surface-raised); color: var(--text); border-color: var(--segment-thumb-border); box-shadow: var(--shadow-1); font-weight: 700;
}

[data-theme="clean"] .chip { background-color: var(--surface); color: var(--text-muted); border: 1px solid var(--border-alt); }
[data-theme="clean"] .chip[aria-pressed="false"] .avatar { background-color: var(--surface-alt); color: var(--text-muted); }
[data-theme="clean"] .chip[aria-pressed="true"] { color: var(--text); border: 2px solid var(--text); }
[data-theme="clean"] .chip:disabled { color: var(--text-muted); border-style: dashed; }

[data-theme="clean"] .field { background-color: var(--surface); color: var(--text); border: 1px solid var(--border-alt); }
[data-theme="clean"] .field:disabled { background-color: var(--surface-alt); color: var(--text-muted); }
[data-theme="clean"] .field::placeholder { color: var(--text-faint); }
[data-theme="clean"] .errors { background-color: var(--danger-soft); color: var(--danger-soft-text); }
[data-theme="clean"] .banner { background-color: var(--warning-soft); color: var(--warning-soft-text); }
[data-theme="clean"] .banner.is-settled { background-color: var(--success-soft); color: var(--success-soft-text); }
[data-theme="clean"] #unavailable-banner { background-color: var(--danger-soft); color: var(--danger-soft-text); }
[data-theme="clean"] .badge { background-color: var(--surface-alt); color: var(--text); border: 1px solid var(--border); }
[data-theme="clean"] .badge-ok { background-color: var(--success-soft); color: var(--success-soft-text); border-color: var(--success-soft); }
[data-theme="clean"] .badge-warn { background-color: var(--warning-soft); color: var(--warning-soft-text); border-color: var(--warning-soft); }
[data-theme="clean"] .is-flagged { background-color: var(--warning-soft); }
[data-theme="clean"] .is-flagged .row-sub, [data-theme="clean"] .is-flagged .muted { color: var(--warning-soft-text); }
[data-theme="clean"] .is-flagged .amount, [data-theme="clean"] .is-flagged .row-title { color: var(--text); }
[data-theme="clean"] .is-unread { background-color: var(--accent-soft); }
[data-theme="clean"] .is-unread .row-sub, [data-theme="clean"] .is-unread .row-title { color: var(--accent-soft-text); }
[data-theme="clean"] .is-selected { background-color: var(--accent-soft); }
[data-theme="clean"] .is-selected .row-title, [data-theme="clean"] .is-selected .row-sub, [data-theme="clean"] .is-selected .amount { color: var(--accent-soft-text); }
[data-theme="clean"] .is-settled .amount-zero { color: var(--text-muted); }

[data-theme="clean"] .avatar-stack .avatar { box-shadow: 0 0 0 2px var(--surface); }
[data-theme="clean"] .avatar-more { background-color: var(--surface-alt); color: var(--text-muted); border: 1px dashed var(--border-alt); }

[data-theme="clean"] .meter { background-color: var(--surface-alt); }
[data-theme="clean"] .meter-fill { background-color: var(--accent); }
[data-theme="clean"] .meter.is-selected .meter-fill { background-color: var(--success); }

[data-theme="clean"] .sheet { background-color: var(--scrim); }
[data-theme="clean"] .sheet-body { background-color: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-3); }
[data-theme="clean"] .toast-info { background-color: var(--toast-info-bg); color: var(--toast-info-fg); box-shadow: var(--shadow-2); }
[data-theme="clean"] .toast-success { background-color: var(--toast-success-bg); color: var(--toast-success-fg); box-shadow: var(--shadow-2); }
[data-theme="clean"] .toast-error { background-color: var(--toast-error-bg); color: var(--toast-error-fg); box-shadow: var(--shadow-2); }

[data-theme="clean"] .photo-thumb, [data-theme="clean"] .receipt-thumb {
  background-color: var(--stripe-b);
  background-image: repeating-linear-gradient(135deg, var(--stripe-a) 0 8px, var(--stripe-b) 8px 16px);
}
[data-theme="clean"] .photo-gone { color: var(--text-muted); }

/* == screen: check == */
[data-theme="clean"] .flag-text { color: var(--warning-soft-text); }
[data-theme="clean"] .total-final { border-top: 1px solid var(--border); }

/* == screen: assign == */
[data-theme="clean"] #assign-meter-card { box-shadow: var(--shadow-3); }
[data-theme="clean"] .check-mark { border: 2px solid var(--border-alt); color: var(--accent-text); }
[data-theme="clean"] .line-toggle[aria-pressed="true"] .check-mark { background-color: var(--accent); border-color: var(--accent); }

/* == screen: scan == */
[data-theme="clean"] .progress-track { background-color: var(--surface-alt); }
[data-theme="clean"] .progress-bar { background-color: var(--accent); }

/* == screen: settle == */
[data-theme="clean"] .method { background-color: var(--surface); color: var(--text); border: 1px solid var(--border-alt); }
[data-theme="clean"] .method.is-selected { border: 2px solid var(--accent); background-color: var(--surface); }
[data-theme="clean"] .method.is-selected .row-title { color: var(--text); }
[data-theme="clean"] .method.is-selected .row-sub { color: var(--text-muted); }
[data-theme="clean"] .method-icon { background-color: var(--surface-alt); color: var(--text); }
[data-theme="clean"] .plan-arrow { color: var(--text-muted); }

/* == screen: split == */
[data-theme="clean"] .share-bar { background-color: var(--surface-alt); }