/*
 * Design tokens — the single source of truth for color, spacing, radius and
 * shadow across every component. Components should reference --pod-* /
 * --space-* variables, never hard-coded values, so the whole site can be
 * re-themed (new show accent, seasonal palette, etc.) by editing this file
 * alone.
 *
 * Editorial-calm palette: washi-paper off-white, high-contrast ink, a single
 * restrained accent used only for links/CTAs — no saturated "SaaS" colors.
 */

:root {
  /* ---- brand palette (light) ---- */
  --pod-bg: #faf8f5;
  --pod-bg-elevated: #ffffff;
  --pod-bg-sunken: #f2efe8;
  --pod-ink: #14140f;
  --pod-ink-soft: #4a4842;
  --pod-ink-faint: #837f74;
  --pod-border: #e7e2d9;
  --pod-border-strong: #d3ccbd;
  --pod-accent: #2b3a55; /* deep indigo — primary link/CTA color */
  --pod-accent-strong: #1c2740;
  --pod-accent-warm: #c1440e; /* vermillion — sparing use: badges, highlights */
  --pod-accent-warm-soft: #f3e4da;

  /* Fixed (non theme-adaptive) brand bar colors — the header/tabs/announce
     strip are a deliberate constant "storefront sign", so they stay the
     same bold ink+vermillion in both light and dark site palettes instead
     of inverting with --pod-ink/--pod-bg. See components/header.css. */
  --pod-navbar-bg: #14140f;
  --pod-navbar-fg: #faf8f5;
  --pod-accent-fixed: #c1440e;

  /* ---- spacing scale (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* ---- radius / shadow — soft, calm, never harsh ---- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(20, 20, 15, 0.06);
  --shadow-md: 0 4px 16px rgba(20, 20, 15, 0.08);
  --shadow-lg: 0 12px 40px rgba(20, 20, 15, 0.12);

  /* ---- layout ---- */
  --container-max: 1160px;
  --container-article: 48rem; /* optimal Japanese measure, see typography.css */
  --header-height: 3.6rem;
}

/* Dark mode brand palette */
[data-md-color-scheme="slate"] {
  --pod-bg: #131310;
  --pod-bg-elevated: #1b1b16;
  --pod-bg-sunken: #0d0d0b;
  --pod-ink: #f3f0ea;
  --pod-ink-soft: #c3bfb4;
  --pod-ink-faint: #857f72;
  --pod-border: #2d2c25;
  --pod-border-strong: #3c3a30;
  --pod-accent: #92a6d6;
  --pod-accent-strong: #b9c6e6;
  --pod-accent-warm: #e2793f;
  --pod-accent-warm-soft: #332318;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45);
}

/* ---- map tokens onto Material's own variables so search, nav, buttons, ---- */
/* ---- code blocks etc. inherit the brand instead of default indigo/blue  ---- */
[data-md-color-scheme="default"] {
  --md-default-bg-color: var(--pod-bg);
  --md-default-fg-color: var(--pod-ink);
  --md-default-fg-color--light: var(--pod-ink-soft);
  --md-default-fg-color--lighter: var(--pod-ink-faint);
  --md-default-fg-color--lightest: var(--pod-border);

  --md-primary-fg-color: var(--pod-bg);
  --md-primary-fg-color--light: var(--pod-ink-soft);
  --md-primary-fg-color--dark: var(--pod-ink);
  --md-primary-bg-color: var(--pod-ink);
  --md-primary-bg-color--light: var(--pod-ink-soft);

  --md-accent-fg-color: var(--pod-accent);
  --md-accent-fg-color--transparent: rgba(43, 58, 85, 0.1);
  --md-accent-bg-color: var(--pod-bg-elevated);

  --md-typeset-color: var(--pod-ink);
  --md-typeset-a-color: var(--pod-accent);

  --md-code-bg-color: var(--pod-bg-sunken);
  --md-code-fg-color: var(--pod-ink);

  --md-footer-bg-color: var(--pod-ink);
  --md-footer-bg-color--dark: var(--pod-accent-strong);
  --md-footer-fg-color: var(--pod-bg);
  --md-footer-fg-color--light: var(--pod-border);
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--pod-bg);
  --md-default-fg-color: var(--pod-ink);
  --md-default-fg-color--light: var(--pod-ink-soft);
  --md-default-fg-color--lighter: var(--pod-ink-faint);
  --md-default-fg-color--lightest: var(--pod-border);

  --md-primary-fg-color: var(--pod-bg);
  --md-primary-fg-color--light: var(--pod-ink-soft);
  --md-primary-fg-color--dark: var(--pod-bg);
  --md-primary-bg-color: var(--pod-ink);
  --md-primary-bg-color--light: var(--pod-ink-soft);

  --md-accent-fg-color: var(--pod-accent);
  --md-accent-fg-color--transparent: rgba(146, 166, 214, 0.15);
  --md-accent-bg-color: var(--pod-bg-elevated);

  --md-typeset-color: var(--pod-ink);
  --md-typeset-a-color: var(--pod-accent);

  --md-code-bg-color: var(--pod-bg-sunken);
  --md-code-fg-color: var(--pod-ink);

  --md-footer-bg-color: var(--pod-bg-sunken);
  --md-footer-fg-color: var(--pod-ink);
  --md-footer-fg-color--light: var(--pod-ink-soft);
}

.md-header {
  box-shadow: none;
  border-bottom: 1px solid var(--pod-border);
}

.md-header--shadow {
  box-shadow: none;
}