/* ══════════════════════════════════════════════════════════════════════
   Kanagawa theme — after rebelot/kanagawa.nvim, itself after Hokusai's
   "The Great Wave off Kanagawa". Ink-wash surfaces, muted woodblock hues,
   and monospace type throughout, as befits an editor colorscheme.

   Dark scheme  → Wave  (sumiInk page, fujiWhite ink, crystalBlue accent).
   Light scheme → Lotus (lotusWhite parchment, lotusInk ink, lotusBlue
                 accent) — the yellow paper is the point, keep it warm.
   Syntax hues carry the character: fujiGray italic "comments" for dates,
   springGreen "strings" for quotes, oniViolet "keywords" for the brand.
   A section opens on a status line, as a buffer ends on one. The page is
   flat, the editor's own ground: the cards and the type carry the scheme.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Palette (light-dark: see tokens.css) ─────────────────────────── */
:root[data-style="kanagawa"] {
  --font-mono:
    "JetBrains Mono Variable", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-body: var(--font-mono);
  --font-display: var(--font-mono);

  /* Softer, smaller corners than smooth — woodblock, not bubble. */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;

  /* Text — fujiWhite / oldWhite / springViolet1 · lotusInk1 / lotusGray2 / lotusViolet2 */
  --color-text: light-dark(#545464, #dcd7ba);
  --color-text-secondary: light-dark(#716e61, #c8c093);
  --color-text-muted: light-dark(#766b90, #938aa9);
  --color-on-accent: light-dark(#f2ecbc, #16161d);

  /* Surfaces — sunken < bg < surface < raised.
     Wave:  sumiInk0 · sumiInk3 · sumiInk4 · sumiInk5.
     Lotus: lotusWhite1 · lotusWhite4 · lotusWhite3 · lotusWhite3. What is
            read sits on lotusWhite3, the editor's own paper and the
            brightest the scheme has, and the page around the cards is the
            shade darker the editor gives its window chrome: the ink loses a
            fifth of its contrast on the darker sheet. */
  --color-bg: light-dark(#e7dfb2, #1f1f28);
  --color-surface: light-dark(#f2ecbc, #2a2a37);
  --color-surface-raised: light-dark(#f2ecbc, #363646);
  --color-surface-sunken: light-dark(#dcd5ac, #16161d);

  /* Borders — lotusWhite0 / sumiInk6, the editor's split lines */
  --color-border: light-dark(rgb(113 110 97 / 0.28), rgb(84 84 109 / 0.7));
  --color-border-subtle: light-dark(
    rgb(113 110 97 / 0.16),
    rgb(84 84 109 / 0.4)
  );

  /* Accent — crystalBlue / lotusBlue4, hover springBlue / lotusBlue5 */
  --color-accent: light-dark(#4d699b, #7e9cd8);
  --color-accent-hover: light-dark(#5d57a3, #7fb4ca);
  --color-accent-soft: light-dark(
    rgb(77 105 155 / 0.12),
    rgb(126 156 216 / 0.14)
  );
  --color-focus-ring: light-dark(
    rgb(77 105 155 / 0.35),
    rgb(126 156 216 / 0.45)
  );

  /* Links */
  --color-link: light-dark(#4d699b, #7e9cd8);
  --color-link-hover: light-dark(#5d57a3, #7fb4ca);

  /* Danger — waveRed on winterRed / lotusRed on paper */
  --color-danger: light-dark(#c84053, #e46876);
  --color-danger-bg: light-dark(#ecd2ac, #43242b);
  --color-danger-hover: light-dark(#d7474b, #ff5d62);

  /* Success — springGreen on winterGreen / lotusGreen on paper */
  --color-success: light-dark(#6f894e, #98bb6c);
  --color-success-bg: light-dark(#dadaa8, #2b3328);
  --color-success-hover: light-dark(#6e915f, #b0cf85);

  /* Warning — roninYellow / lotusOrange */
  --color-warning: light-dark(#cc6d00, #ff9e3b);

  /* Overlays */
  --color-overlay: light-dark(rgb(84 84 100 / 0.3), rgb(22 22 29 / 0.7));
  --color-header-user-bg: transparent;
  --color-header-user-bg-hover: light-dark(
    rgb(84 84 100 / 0.08),
    rgb(220 215 186 / 0.08)
  );

  /* Misc */
  --color-option-bg: light-dark(#e7dfb2, #2a2a37);
  --color-option-border: light-dark(
    rgb(113 110 97 / 0.16),
    rgb(84 84 109 / 0.4)
  );

  /* Theme-only hues, straight from the syntax groups:
     comment  fujiGray / lotusGray2     · keyword oniViolet / lotusViolet4
     string   springGreen / lotusGreen  · number  sakuraPink / lotusPink
     chrome   sumiInk1 / lotusWhite0 (sidebars, tabline, status line)
     visual   waveBlue1 / lotusViolet3 (selection)
     Lotus's own comment grey, lotusGray3, is too faint for a date set this
     small, so the light scheme takes the next grey down. */
  --kngw-comment: light-dark(#716e61, #727169);
  --kngw-keyword: light-dark(#624c83, #957fb8);
  --kngw-string: light-dark(#6f894e, #98bb6c);
  --kngw-number: light-dark(#b35b79, #d27e99);
  --kngw-chrome: light-dark(#d5cea3, #181820);
  --kngw-selection: light-dark(#c9cbd1, #223249);
  /* Over a photo the ground is the black scrim in either scheme, so the
     accent there stays Wave's crystalBlue — Lotus's lotusBlue4 is picked to
     sit on warm paper and goes muddy on black. */
  --kngw-accent-on-photo: #7e9cd8;

  /* Shape & depth — flat like an editor, deep only where things float */
  --border-width: 1px;
  --shadow-1: 0 1px 2px light-dark(rgb(84 84 100 / 0.1), rgb(0 0 0 / 0.3));
  --shadow-2: 0 8px 24px -6px light-dark(rgb(84 84 100 / 0.2), rgb(0 0 0 / 0.5));
  --shadow-3: 0 24px 56px -12px
    light-dark(rgb(84 84 100 / 0.3), rgb(0 0 0 / 0.7));

  /* Component skins */
  --header-bg: var(--kngw-chrome);
  --input-focus-bg: var(--color-surface-sunken);
  --overlay-filter: blur(2px);
  --modal-border: var(--color-border);
  --card-border: var(--color-border-subtle);
  --card-hover-border: var(--color-accent);
  --tab-border: transparent;
  --btn-primary-shadow: none;
  --btn-primary-shadow-hover: none;
}

/* ══════════════════════════════════════════════════════════════════════
   Structural overrides
   ══════════════════════════════════════════════════════════════════════ */

[data-style="kanagawa"] ::selection {
  background: var(--kngw-selection);
}

/* Brand as a keyword — oniViolet, italic like kanagawa's keywordStyle.
   Pointed at, it takes the accent, as a card's title does. */
[data-style="kanagawa"] .app-header-brand {
  color: var(--kngw-keyword);
  font-style: italic;
}

[data-style="kanagawa"] .app-header-brand:hover {
  color: var(--color-accent);
}

/* ── Header — the tabline: a shade off the page, split by a plain rule ── */
[data-style="kanagawa"] .app-header {
  border-bottom: 1px solid var(--color-border);
}

[data-style="kanagawa"] .feed-sort-btn:hover:not(.active) {
  background: var(--color-accent-soft);
}

/* ── Dates read as comments — fujiGray, italic ───────────────────── */
[data-style="kanagawa"] time {
  font-style: italic;
}

[data-style="kanagawa"] .journal-card:not(.journal-card--image) .journal-card-meta,
[data-style="kanagawa"] .dump-card-date,
[data-style="kanagawa"] .comment-time,
[data-style="kanagawa"] .notification-time {
  color: var(--kngw-comment);
}

/* ── On the scrim, links hover in the dark scheme's blue ─────────── */
/* …on a plate of sumiInk, the Wave page itself, in either scheme: the blue
   is the dark scheme's, so its ground has to be too. Square-ish, like the
   selection block an editor draws behind a match. */
[data-style="kanagawa"] .journal-card--image .journal-card-title {
  --journal-title-hover-color: var(--kngw-accent-on-photo);
  --journal-title-hover-bg: rgb(31 31 40 / 0.86);
  --journal-title-hover-radius: var(--radius-xs);
  --journal-title-hover-shadow: inset 2px 0 0 var(--kngw-accent-on-photo);
}

[data-style="kanagawa"] .journal-card--image .journal-card-overlay .vote-btn:not(.vote-btn--active):hover:not([aria-disabled="true"]) {
  color: var(--kngw-accent-on-photo);
  border-color: var(--kngw-accent-on-photo);
}

/* ── Quotes read as string literals ──────────────────────────────── */
[data-style="kanagawa"] .journal-card--quote {
  background: var(--color-surface);
}

[data-style="kanagawa"] .journal-card-quotemark {
  color: var(--kngw-string);
  opacity: 0.35;
}

[data-style="kanagawa"] .journal-card-quote-body {
  color: var(--kngw-string);
}

/* Sub-blocks part on a comment divider: the dashed rule a source file marks
   a section with, and its three dots. */
[data-style="kanagawa"] .journal-break {
  --journal-break-space: 1.9rem;
  --journal-break-rule: 1px dashed var(--color-border);
  --journal-break-ornament: "· · ·";
}

/* Vote tallies read as number literals */
[data-style="kanagawa"] .vote-btn:not(.vote-btn--active) {
  color: var(--kngw-number);
}

/* ── Status lines — the comments and the related dumps open on one ── */
/* The bar is the section's own background, a strip of the chrome as tall as
   the label, and the label is the mode block at its left end: the accent,
   bold, as an editor shows NORMAL. */
[data-style="kanagawa"] .comment-section,
[data-style="kanagawa"] .related-section {
  --kngw-status-height: 1.7rem;
  padding-top: 0;
  border-top: none;
  background: linear-gradient(var(--kngw-chrome), var(--kngw-chrome)) top /
    100% var(--kngw-status-height) no-repeat;
}

[data-style="kanagawa"] .comment-section-title,
[data-style="kanagawa"] .related-section .related-section-title {
  display: inline-block;
  height: var(--kngw-status-height);
  margin-bottom: 1.1rem;
  padding: 0 0.8rem;
  background: var(--color-accent);
  color: var(--color-on-accent);
  line-height: var(--kngw-status-height);
  letter-spacing: 0.06em;
}

/* A dump's note is read at length: full ink, where the base dims it. */
[data-style="kanagawa"] .dump-comment {
  opacity: 1;
}