/* PrivateHQ / Gains Geek Design System v2 - OBSIDIAN.
   New raw color values live here. Existing view CSS consumes these through
   compatibility aliases until the full component sweep lands. */

:root,
.dark,
[data-theme="dark"],
[data-theme="light"] {
  color-scheme: dark;

  /* Surfaces */
  --background: #060709;
  --foreground: #c2c5cb;
  --foreground-strong: #f4f5f7;
  --card: #0b0c0e;
  --card-foreground: #f4f5f7;
  --card-low: #08090b;
  --popover: #101113;
  --popover-foreground: #f4f5f7;
  --input: #0e0f12;
  --secondary: #131417;
  --secondary-foreground: #c2c5cb;
  --muted: #16171b;
  --muted-foreground: #7c8087;

  /* Accent: light is the accent. */
  --accent: #e8eaee;
  --accent-foreground: #0b0c0e;
  --accent-dim: rgb(232 234 238 / 0.08);
  --accent-emphasis: #ffffff;
  --accent-muted: #b9bdc5;
  --primary: #f4f5f7;
  --primary-foreground: #0b0c0e;
  --ring: rgb(232 234 238 / 0.45);

  /* Semantic state only. */
  --green: #4ade80;
  --yellow: #fbbf24;
  --red: #f87171;
  --green-dim: rgb(74 222 128 / 0.12);
  --yellow-dim: rgb(251 191 36 / 0.12);
  --red-dim: rgb(248 113 113 / 0.12);
  --destructive: var(--red);
  --destructive-foreground: var(--background);

  /* Lines and light. */
  --border: rgb(255 255 255 / 0.07);
  --border-strong: rgb(255 255 255 / 0.13);
  --border-subtle: rgb(255 255 255 / 0.04);
  --border-control: rgb(255 255 255 / 0.10);
  --edge-light: inset 0 1px 0 rgb(255 255 255 / 0.05);
  --edge-light-strong: inset 0 1px 0 rgb(255 255 255 / 0.08);
  --edge-light-modal: inset 0 1px 0 rgb(255 255 255 / 0.12);
  --glow-overlay: 0 0 0 1px rgb(255 255 255 / 0.06), 0 16px 48px rgb(0 0 0 / 0.60);
  --glow-top: radial-gradient(60% 40% at 50% 0%, rgb(140 160 200 / 0.05), transparent);
  --hover-wash: rgb(255 255 255 / 0.04);
  --active-wash: rgb(255 255 255 / 0.06);
  --overlay-backdrop: rgb(0 0 0 / 0.72);
  --scrollbar-thumb: rgb(255 255 255 / 0.18);
  --scrollbar-thumb-hover: rgb(255 255 255 / 0.28);

  /* Structure */
  --radius: 8px;
  --radius-sm: 4px;
  --radius-md: var(--radius);
  --radius-pill: 9999px;
  --shadow-none: none;
  --shadow-popover: var(--glow-overlay);
  --shadow-modal: 0 0 0 1px rgb(255 255 255 / 0.08), 0 28px 90px rgb(0 0 0 / 0.72);
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Roboto Mono", monospace;
  --font-display: var(--font-sans);
  --font-num: var(--font-mono);
  --display-tracking: 0;
  --feature-numeric: "tnum" 1, "cv05" 1, "cv08" 1;

  /* Compatibility aliases for current GG CSS. */
  --bg: var(--background);
  --surface: var(--card);
  --color-bg: var(--background);
  --color-bg-elevated: var(--secondary);
  --color-surface-1: var(--secondary);
  --color-surface-2: var(--card);
  --color-surface-3: var(--card-low);
  --color-border-subtle: var(--border-subtle);
  --color-border: var(--border);
  --color-border-strong: var(--border-strong);
  --color-text: var(--foreground);
  --color-text-strong: var(--foreground-strong);
  --color-text-muted: var(--muted-foreground);
  --color-focus: var(--ring);
  --neutral-faint: var(--border-subtle);
  --neutral-dim: var(--accent-dim);
  --neutral-wash: var(--hover-wash);
  --neutral-strong: var(--border-strong);
  --surface-glass: color-mix(in srgb, var(--card) 76%, transparent);
  --surface-low-glass: color-mix(in srgb, var(--secondary) 78%, transparent);
  --surface-hover: color-mix(in srgb, var(--card), var(--hover-wash));
  --surface-active: color-mix(in srgb, var(--card), var(--active-wash));
  --surface-danger: var(--red-dim);
  --foreground-faint: color-mix(in srgb, var(--muted-foreground) 64%, transparent);
  --foreground-disabled: color-mix(in srgb, var(--muted-foreground) 44%, transparent);

  --chart-1: var(--accent);
  --chart-2: var(--yellow);
  --chart-3: #b07cf0;
  --chart-4: #4d9fff;
  --chart-5: #e5677d;
  --chart-6: #8fcf52;
  --chart-7: #ec4899;
  --chart-8: #7e8aa0;
}

body {
  background: var(--glow-top), var(--background);
  color: var(--foreground);
}

:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline-color: var(--ring);
}

.gg-phone,
.topbar,
.roster,
.workspace,
.gg-admin {
  background: var(--background);
}

.gg-phone::before {
  background: var(--glow-top);
}

.gg-statusbar,
.gg-tabbar,
.topbar,
.client-header,
.proto-strip,
.save-bar {
  box-shadow: var(--edge-light);
}

.gg-statusbar {
  background: linear-gradient(180deg, var(--background) 78%, color-mix(in srgb, var(--background) 0%, transparent));
}

.gg-tabbar {
  background: color-mix(in srgb, var(--popover) 88%, transparent);
  border-top-color: var(--border-strong);
}

.gg-card,
.ds-card,
.food-group,
.food-meal,
.food-macro,
.today-session-hero,
.today-lift-list,
.logbook-rest,
.logbook-plates,
.tg-panel,
.tg-glance-card,
.kpi,
.editor-section,
.modal,
.mode-switch-menu {
  background: linear-gradient(180deg, var(--card), var(--card-low));
  border-color: var(--border);
  box-shadow: var(--edge-light);
}

.ds-card-muted,
.today-session-hero,
.logbook-rest,
.logbook-plates,
.tg-panel-head,
.tg-day-head,
.tg-client-group-head,
.roster-header,
.roster-actions,
.roster-pager {
  background: var(--secondary);
}

.primary,
.btn-primary,
.food-cta {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--edge-light-strong);
}

.primary:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.food-cta:hover:not(:disabled) {
  background: var(--accent-emphasis);
  border-color: var(--accent-emphasis);
}

.ghost,
.btn-ghost,
.food-btn-ghost,
.tg-filter-btn,
.mode-switch,
.my-app-link {
  background: var(--input);
  border-color: var(--border-control);
  color: var(--foreground);
  box-shadow: var(--edge-light);
}

.ghost:hover:not(:disabled),
.btn-ghost:hover:not(:disabled),
.food-btn-ghost:hover:not(:disabled),
.tg-filter-btn:hover,
.mode-switch:hover,
.my-app-link:hover {
  background: var(--hover-wash);
  border-color: var(--border-strong);
  color: var(--foreground-strong);
}

.gg-tab.is-active,
.gg-tab[aria-current="page"],
.food-accent-text,
.web-overline,
a {
  color: var(--accent-emphasis);
}

.gg-track > i,
.food-macro.fat .food-m-bar span {
  background: var(--accent-emphasis);
}

.gg-statusbar h1,
.gg-topbar-title,
.today-summary-kicker,
.today-session-title,
.logbook-lift-name,
.food-ring-big,
.food-m-val,
.topbar .title,
.title {
  letter-spacing: 0;
}

.whats-due-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  width: 100%;
}

.whats-due-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.photo-confirm {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--popover);
  box-shadow: var(--edge-light-strong);
}

.photo-confirm-copy {
  color: var(--foreground-strong);
  font-size: 13px;
  line-height: 1.4;
}

.logbook-date-control {
  display: grid;
  gap: var(--space-2);
}

.food-date-switch {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.food-date-label {
  display: grid;
  gap: var(--space-1);
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 600;
}

.food-date-input {
  min-height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--input);
  color: var(--foreground-strong);
  font: inherit;
  padding: 0 var(--space-3);
}

.food-load-more {
  padding: var(--space-3) 0 0;
}

.food-load-more .food-btn-ghost {
  width: 100%;
  justify-content: center;
}

.plan-reader-tools {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--edge-light);
}

.plan-section-index {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-1);
  -webkit-overflow-scrolling: touch;
}

.plan-section-index a {
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-pill);
  background: var(--input);
  color: var(--foreground);
  font-size: 13px;
  font-weight: 600;
}

.plan-search-input {
  width: 100%;
  min-height: 46px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--input);
  color: var(--foreground-strong);
  font: inherit;
  font-size: 16px;
}

.plan-section-head {
  gap: var(--space-2);
}

.plan-section-toggle {
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-control);
  border-radius: var(--radius);
  background: var(--input);
  color: var(--foreground);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}

.plan-section.is-collapsed > :not(.plan-section-head) {
  display: none;
}

.session-persist-warning {
  border-color: var(--yellow);
  background: var(--yellow-dim);
}

.dtable-scroll,
.matrix-scroll,
.nutrition-items-scroll,
.bw-scroll,
.activity-schedule-scroll,
.bz-table-wrap,
.gd-table-wrap,
.view-as-client-preview {
  scrollbar-color: var(--scrollbar-thumb) transparent;
  -webkit-overflow-scrolling: touch;
}

.dtable-scroll:hover,
.matrix-scroll:hover,
.nutrition-items-scroll:hover,
.bw-scroll:hover,
.activity-schedule-scroll:hover,
.bz-table-wrap:hover,
.gd-table-wrap:hover,
.view-as-client-preview:hover {
  scrollbar-color: var(--scrollbar-thumb-hover) transparent;
}

@media (max-width: 820px) {
  .whats-due-action-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .dtable-scroll,
  .matrix-scroll,
  .nutrition-items-scroll,
  .bw-scroll,
  .activity-schedule-scroll,
  .bz-table-wrap,
  .gd-table-wrap,
  .view-as-client-preview {
    max-width: 100%;
    overflow-x: auto;
    box-shadow: var(--edge-light), inset -18px 0 22px -24px var(--accent-emphasis);
  }
}