/* Journal (`neutral`): palette tokens and the variants that differ from
   the shared components. */
@layer presets {
  body[data-journal-presentation="neutral"],
  .journal-surface[data-journal-presentation="neutral"] {
    color-scheme: light;
  }

  body[data-journal-presentation="neutral"][data-color-scheme="dark"],
  .journal-surface[data-journal-presentation="neutral"][data-color-scheme="dark"] {
    color-scheme: dark;
    --color-canvas: #1d1a17;
    --color-surface: #29241f;
    --color-on-strong: #1d1a17;
    --color-text: #f3eadf;
    --color-text-muted: #c3b7aa;
    --color-border: #51483f;
    --color-border-strong: #75685b;
    --color-accent: #ef9b7e;
    --color-accent-strong: #ffc0a8;
    --color-danger: #ff9b91;
    --color-success: #93d2a5;
    --color-focus: #9fc5ff;
    --color-selection: #704635;
    --color-disabled-text: #aaa096;
    --color-disabled-surface: #3c3630;
    --color-status-attention-surface: #4b401e;
    --color-status-attention-text: #ffe39a;
    --color-status-danger-surface: #512a29;
    --color-status-danger-text: #ffb3ad;
    --color-status-neutral-surface: #3a3530;
    --color-status-neutral-text: #eee5db;
    --color-status-success-surface: #253f2d;
    --color-status-success-text: #b4e2c0;
    --journal-canvas: #1d1a17;
    --elevation-menu: 0 0.5rem 1.5rem rgb(0 0 0 / 35%);
    --text-page-title: var(--text-xl);
  }

  body[data-journal-presentation="neutral"][data-color-scheme="system"],
  .journal-surface[data-journal-presentation="neutral"][data-color-scheme="system"] {
    color-scheme: light dark;
  }

  @media (prefers-color-scheme: dark) {
    body[data-journal-presentation="neutral"][data-color-scheme="system"],
    .journal-surface[data-journal-presentation="neutral"][data-color-scheme="system"] {
      --color-canvas: #1d1a17;
      --color-surface: #29241f;
      --color-on-strong: #1d1a17;
      --color-text: #f3eadf;
      --color-text-muted: #c3b7aa;
      --color-border: #51483f;
      --color-border-strong: #75685b;
      --color-accent: #ef9b7e;
      --color-accent-strong: #ffc0a8;
      --color-danger: #ff9b91;
      --color-success: #93d2a5;
      --color-focus: #9fc5ff;
      --color-selection: #704635;
      --color-disabled-text: #aaa096;
      --color-disabled-surface: #3c3630;
      --color-status-attention-surface: #4b401e;
      --color-status-attention-text: #ffe39a;
      --color-status-danger-surface: #512a29;
      --color-status-danger-text: #ffb3ad;
      --color-status-neutral-surface: #3a3530;
      --color-status-neutral-text: #eee5db;
      --color-status-success-surface: #253f2d;
      --color-status-success-text: #b4e2c0;
      --journal-canvas: #1d1a17;
      --elevation-menu: 0 0.5rem 1.5rem rgb(0 0 0 / 35%);
      --text-page-title: var(--text-xl);
    }
  }
}

/* Presets describe component variants here so they remain below the permanent
   component layer in the architecture while outranking its base selectors. */
@layer components {
  body[data-journal-presentation="neutral"][data-color-scheme="dark"]
    .userpic-placeholder,
  .journal-surface[data-journal-presentation="neutral"][data-color-scheme="dark"]
    .userpic-placeholder {
    color: #ffffff;
  }

  @media (prefers-color-scheme: dark) {
    body[data-journal-presentation="neutral"][data-color-scheme="system"]
      .userpic-placeholder,
    .journal-surface[data-journal-presentation="neutral"][data-color-scheme="system"]
      .userpic-placeholder {
      color: #ffffff;
    }
  }
}