/* ============================================================
   Appearance modes for the v2 shell — Dark | Centre | Light.
   Selected via the topbar switcher; persisted in localStorage and
   applied as body[data-appearance="…"] before paint.

   The whole v2 UI is driven by the design tokens in tokens.css, so
   re-pointing those tokens (plus the per-mode UI font) re-skins the
   entire interface. Dark is the default (tokens.css); this file only
   defines the Centre and Light overrides + a few hard-coded dark
   surfaces that need lightening for Light mode.
   ============================================================ */

/* ---------- CENTRE — soft slate / twilight, IBM Plex Sans ---------- */
body[data-theme="v2"][data-appearance="centre"] {
  --font-sans:      'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --bg:             #1c2433;
  --bg-soft:        #232c3d;
  --bg-deep:        #161d2a;
  --panel:          rgba(42, 52, 71, .92);
  --panel-2:        rgba(48, 60, 82, .92);
  --panel-3:        rgba(56, 70, 95, .92);
  --panel-solid:    #2b3548;
  --line:           rgba(180, 200, 235, .16);
  --line-strong:    rgba(180, 200, 235, .30);

  --text:           #eef3fb;
  --text-strong:    #ffffff;
  --text-secondary: #cfd9ea;
  --muted:          #9aa7be;
  --muted-2:        #a7c8f0;

  --blue:           #7cc0ff;
  --blue-2:         #a6dbff;
  --info-soft:      #d6eaff;
  --green:          #3fe0ad;
  --positive-soft:  #b3f3d7;
  --amber:          #f5cd7e;
  --warning-soft:   #ffe0a8;
  --red:            #f78ba0;
  --danger-soft:    #ffc9d3;

  --shadow:         0 22px 60px rgba(0, 0, 0, .34);
  --shadow-soft:    0 14px 38px rgba(0, 0, 0, .24);

  background:
    radial-gradient(circle at 12% 0%, rgba(124, 192, 255, .06), transparent 32%),
    linear-gradient(180deg, #212a3a 0%, #1a2230 60%, #161d2a 100%);
}

/* ---------- LIGHT — clean white (Stripe/Linear), Manrope ---------- */
body[data-theme="v2"][data-appearance="light"] {
  --font-sans:      'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --bg:             #f6f7f9;
  --bg-soft:        #ffffff;
  --bg-deep:        #ffffff;
  --panel:          #ffffff;
  --panel-2:        #f9fafb;
  --panel-3:        #eef1f5;
  --panel-solid:    #ffffff;
  --line:           #e3e7ec;
  --line-strong:    #cbd2db;

  --text:           #0f172a;
  --text-strong:    #0b1220;
  --text-secondary: #334155;
  --muted:          #64748b;
  --muted-2:        #2563eb;

  --blue:           #2563eb;
  --blue-2:         #1d4ed8;
  --info-soft:      #1d4ed8;
  --steel:          #475569;
  --gold:           #b45309;
  --gold-soft:      #92400e;
  --green:          #047857;
  --positive-soft:  #065f46;
  --amber:          #b45309;
  --warning-soft:   #92400e;
  --red:            #dc2626;
  --danger-soft:    #b91c1c;

  --focus-ring:     #2563eb;
  --shadow:         0 12px 32px rgba(15, 23, 42, .10);
  --shadow-soft:    0 4px 12px rgba(15, 23, 42, .06);
  --shadow-pop:     0 8px 24px rgba(37, 99, 235, .15);

  background:
    radial-gradient(circle at 12% 0%, rgba(37, 99, 235, .05), transparent 30%),
    radial-gradient(circle at 88% 0%, rgba(37, 99, 235, .03), transparent 30%),
    #f6f7f9;
}

/* Light mode: lighten the v2 surfaces that hard-code dark rgba in chrome.css
   (these don't read from tokens, so they need explicit light values). */
body[data-theme="v2"][data-appearance="light"][data-entry="app"] .sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  border-right: 1px solid var(--line);
}
body[data-theme="v2"][data-appearance="light"][data-entry="app"] .topbar-search,
body[data-theme="v2"][data-appearance="light"][data-entry="app"] .topbar-icon,
body[data-theme="v2"][data-appearance="light"][data-entry="app"] .topbar-profile,
body[data-theme="v2"][data-appearance="light"][data-entry="app"] .ghost-btn {
  background: #ffffff;
  border: 1px solid var(--line);
}
body[data-theme="v2"][data-appearance="light"][data-entry="app"] .topbar-icon:hover,
body[data-theme="v2"][data-appearance="light"][data-entry="app"] .topbar-profile:hover,
body[data-theme="v2"][data-appearance="light"][data-entry="app"] .ghost-btn:hover {
  background: #eef3fb;
  border-color: var(--line-strong);
  box-shadow: none;
}
body[data-theme="v2"][data-appearance="light"][data-entry="app"] .topbar-search:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
body[data-theme="v2"][data-appearance="light"][data-entry="app"] .topbar-icon #notification-count {
  border-color: #ffffff;
  box-shadow: none;
}
body[data-theme="v2"][data-appearance="light"] .nav-item.active,
body[data-theme="v2"][data-appearance="light"] .tnav-group.is-active .tnav-trigger {
  background: linear-gradient(90deg, rgba(37, 99, 235, .14), rgba(37, 99, 235, .04));
}
body[data-theme="v2"][data-appearance="light"] .tnav-trigger { background: #ffffff; }
/* Light mode: the dark ambient glow/grid reads as muddy on white — retire it. */
body[data-theme="v2"][data-appearance="light"][data-entry="app"] .cc-orb-field,
body[data-theme="v2"][data-appearance="light"][data-entry="app"] .cc-worldmap,
body[data-theme="v2"][data-appearance="light"][data-entry="app"] .cc-frame { display: none; }

/* ============================================================
   Topbar appearance switcher (segmented control)
   ============================================================ */
body[data-theme="v2"] .appearance-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--panel-3);
  border: var(--border-subtle);
}
body[data-theme="v2"] .appr-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: var(--radius-pill);
  color: var(--muted);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
body[data-theme="v2"] .appr-opt:hover { color: var(--text-strong); }
body[data-theme="v2"] .appr-opt.is-active {
  background: var(--panel-solid);
  color: var(--blue-2);
  box-shadow: var(--shadow-soft);
}