/* Liên Second POC — Paper Palette
   Warm paper neutrals + muted colored-pencil accents for lower visual fatigue.
   Visual-only layer: no business state, runtime or interaction changes. */

:root {
  color-scheme: light;

  --bg: #f2efe8;
  --surface: #faf7f0;
  --surface-2: #ece8de;
  --surface-3: #e3ded3;
  --text: #393732;
  --muted: #77736b;
  --soft: #969188;
  --line: #d7d0c4;
  --line-strong: #c5bcad;
  --rail: #e8e3d9;

  --green: #718276;
  --green-soft: #dfe5de;
  --amber: #9d7b4f;
  --amber-soft: #eee3d2;
  --red: #9b655f;
  --red-soft: #ebdcd8;

  /* Aliases used by newer POC layers. */
  --accent: #718276;
  --border: #d7d0c4;

  /* Task groups use muted pencil colors rather than saturated UI colors. */
  --group-engineering: #72889c;
  --group-marketing: #a9797c;
  --group-sales: #748c7c;
  --group-research: #877b99;
  --group-operations: #a08767;
  --group-personal: #768e90;

  --shadow: 0 14px 34px rgba(72, 65, 54, .075);
}

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

  --bg: #232320;
  --surface: #2a2926;
  --surface-2: #31302c;
  --surface-3: #383630;
  --text: #e8e2d8;
  --muted: #b0a99f;
  --soft: #90897f;
  --line: #49453e;
  --line-strong: #5a554c;
  --rail: #272724;

  --green: #9aa89b;
  --green-soft: #343b35;
  --amber: #bea077;
  --amber-soft: #40382d;
  --red: #bc8880;
  --red-soft: #453431;

  --accent: #9aa89b;
  --border: #49453e;

  --group-engineering: #91a5b6;
  --group-marketing: #c69799;
  --group-sales: #96aa9b;
  --group-research: #a89cb9;
  --group-operations: #b9a17f;
  --group-personal: #95abad;

  --shadow: 0 16px 36px rgba(0, 0, 0, .22);
}

/* Keep the whole shell warm-neutral. Avoid pure white/black surfaces. */
body,
.main-stage,
.content-host {
  background-color: var(--bg);
}

/* Home starts directly at its first useful section. */
.relation-home > .project-graph-section {
  border-top: 0;
  padding-top: 0;
}

.prototype-strip,
.workspace-sidebar,
.focus-panel,
.mobile-sheet-card,
.picker-dialog,
.context-dialog,
.toast {
  background-color: var(--surface);
}

.global-rail {
  background-color: var(--rail);
}

/* Controls should feel like pencil marks on paper, not glossy UI chips. */
.quiet-button,
.focus-trigger,
.secondary-button,
.primary-button,
.text-action,
.composer-tool,
.icon-button,
.workspace-switcher,
.module-item,
.rail-item,
.workspace-app-tab,
.task-group-filter-bar button,
.task-group-summary {
  box-shadow: none;
}

.rail-item.active,
.module-item.active,
.workspace-switcher:hover,
.module-item:hover,
.icon-button:hover,
.rail-item:hover {
  background-color: var(--surface-2);
}

.module-item.active {
  color: var(--text);
}

/* Soften large cards and data surfaces. */
.workspace-app-hero,
.workspace-app-visual,
.workspace-app-data-panel,
.workspace-app-side-panel,
.workspace-app-attention,
.workspace-app-quicklink,
.custom-workspace-card,
.custom-app-library-card,
.project-graph-scroll,
.project-graph-node,
.task-group-summary {
  border-color: var(--line) !important;
  box-shadow: none;
}

/* Workspace personalities stay distinct, but as muted colored-pencil families. */
.workspace-app-page[data-app-theme="tictalic"] {
  --app-accent: #66877d;
  --app-soft: #e3ebe6;
  --app-glow: rgba(102, 135, 125, .10);
}

.workspace-app-page[data-app-theme="mia"] {
  --app-accent: #817394;
  --app-soft: #e9e4ed;
  --app-glow: rgba(129, 115, 148, .10);
}

.workspace-app-page[data-app-theme="tictalic"] .workspace-app-hero,
.workspace-app-page[data-app-theme="mia"] .workspace-app-hero {
  background: color-mix(in srgb, var(--surface) 94%, var(--app-soft) 6%);
}

.workspace-app-page[data-app-theme="tictalic"] .workspace-app-visual::after {
  opacity: .45;
}

.custom-workspace-card[data-custom-workspace="tictalic"] .custom-workspace-card-icon {
  background: #e3ebe6;
  color: #66877d;
}

.custom-workspace-card[data-custom-workspace="mia"] .custom-workspace-card-icon {
  background: #e9e4ed;
  color: #817394;
}

/* Status remains readable, but saturation is intentionally restrained. */
.workspace-app-metric[data-tone="positive"] strong,
.workspace-app-metric[data-tone="positive"] em,
.workspace-app-data-row[data-tone="positive"] b {
  color: #607f73;
}

.workspace-app-metric[data-tone="negative"] strong,
.workspace-app-data-row[data-tone="negative"] b {
  color: #99645f;
}

.workspace-app-data-row[data-tone="warn"] b {
  color: #98754d;
}

/* Colored charts and relation accents get a softer pencil finish. */
.workspace-app-chart i {
  opacity: .68;
  filter: saturate(.72);
}

.project-edge,
.project-edge.related {
  opacity: .72;
}

.project-graph-node:hover,
.project-graph-node:focus-visible {
  box-shadow: 0 8px 20px rgba(72, 65, 54, .07);
}

/* Keep the mobile canvas especially calm because the screen is closer to the eyes. */
@media (max-width: 700px) {
  :root {
    --bg: #f3f0e9;
    --surface: #faf7f1;
  }

  :root[data-theme="dark"] {
    --bg: #242421;
    --surface: #2b2a27;
  }
}

@media (prefers-contrast: more) {
  :root {
    --line: #c8c0b3;
    --line-strong: #ada394;
  }

  :root[data-theme="dark"] {
    --line: #5a554c;
    --line-strong: #716a5e;
  }
}