/* themes/theme.css — Single source of truth for all design tokens and color definitions */
/* RULE: No hex (#xxx), no rgb(), no named colors outside this file */

:root {
  /* ── A4 Preview Layout Tokens ──────────────────────────────────────── */
  --a4-width: 210mm;
  --a4-height: 297mm;
  --a4-scale: 0.86;
}

@media (max-width: 768px) {
  :root { --a4-scale: 0.65; }
}
@media (max-width: 580px) {
  :root { --a4-scale: 0.5; }
}
@media (max-width: 440px) {
  :root { --a4-scale: 0.42; }
}
@media (max-width: 380px) {
  :root { --a4-scale: 0.38; }
}

:root {
  /* ── Color Palette — Light Theme (Default) ─────────────────────────── */
  --color-bg: hsl(224, 30%, 96%);
  --color-surface: hsl(0, 0%, 100%);
  --color-surface-soft: hsl(220, 33%, 98%);

  --color-border: hsl(218, 22%, 86%);
  --color-border-strong: hsl(218, 26%, 78%);

  --color-text: hsl(222, 28%, 17%);
  --color-muted: hsl(218, 16%, 40%);

  --color-primary: hsl(221, 83%, 53%);
  --color-primary-hover: hsl(221, 83%, 45%);
  --color-primary-soft: hsl(221, 75%, 95%);

  --color-success: hsl(145, 63%, 37%);
  --color-danger: hsl(0, 70%, 44%);
  --color-shadow: hsl(220, 40%, 24%);
  --color-on-primary: hsl(0, 0%, 100%);

  /* ── Preview Fallback Variables (overridden by JS at runtime) ───────── */
  --preview-page-padding-top: 99px;
  --preview-page-padding-right: 99px;
  --preview-page-padding-bottom: 99px;
  --preview-page-padding-left: 99px;
  --preview-page-border-width: 0px;
  --preview-page-border-color: transparent;
  --preview-header-distance: 47px;
  --preview-footer-distance: 47px;

  --preview-font-family: "Cascadia Code", monospace;
  --preview-body-size: 16px;
  --preview-body-color: hsl(221, 32%, 16%);
  --preview-line-spacing: 1.6;

  --preview-paragraph-space-before: 0px;
  --preview-paragraph-space-after: 8px;
  --preview-heading-space-before: 16px;
  --preview-heading-space-after: 8px;

  --preview-h1-color: hsl(221, 64%, 32%);
  --preview-h2-color: hsl(221, 74%, 40%);
  --preview-h3-color: hsl(217, 81%, 54%);
  --preview-h4-color: hsl(221, 74%, 40%);
  --preview-h5-color: hsl(221, 68%, 38%);
  --preview-h6-color: hsl(221, 64%, 32%);

  --preview-h1-size: 2em;
  --preview-h2-size: 1.6em;
  --preview-h3-size: 1.4em;
  --preview-h4-size: 1.2em;
  --preview-h5-size: 1.1em;
  --preview-h6-size: 1em;

  --preview-h1-font-weight: 400;
  --preview-h2-font-weight: 400;
  --preview-h3-font-weight: 400;
  --preview-h4-font-weight: 400;
  --preview-h5-font-weight: 400;
  --preview-h6-font-weight: 400;

  --preview-h1-font-style: normal;
  --preview-h2-font-style: normal;
  --preview-h3-font-style: normal;
  --preview-h4-font-style: normal;
  --preview-h5-font-style: normal;
  --preview-h6-font-style: normal;

  --preview-h1-decoration-line: none;
  --preview-h2-decoration-line: none;
  --preview-h3-decoration-line: none;
  --preview-h4-decoration-line: none;
  --preview-h5-decoration-line: none;
  --preview-h6-decoration-line: none;

  --preview-h1-decoration-color: currentColor;
  --preview-h2-decoration-color: currentColor;
  --preview-h3-decoration-color: currentColor;
  --preview-h4-decoration-color: currentColor;
  --preview-h5-decoration-color: currentColor;
  --preview-h6-decoration-color: currentColor;

  --preview-h1-highlight-color: transparent;
  --preview-h2-highlight-color: transparent;
  --preview-h3-highlight-color: transparent;
  --preview-h4-highlight-color: transparent;
  --preview-h5-highlight-color: transparent;
  --preview-h6-highlight-color: transparent;
}

/* ── Color Palette — Dark Theme ──────────────────────────────────────── */

body[data-theme="dark"] {
  --color-bg: hsl(225, 20%, 11%);
  --color-surface: hsl(224, 18%, 15%);
  --color-surface-soft: hsl(223, 18%, 18%);

  --color-border: hsl(221, 15%, 27%);
  --color-border-strong: hsl(221, 16%, 36%);

  --color-text: hsl(210, 24%, 92%);
  --color-muted: hsl(218, 16%, 69%);

  --color-primary: hsl(217, 93%, 63%);
  --color-primary-hover: hsl(217, 93%, 57%);
  --color-primary-soft: hsl(219, 35%, 22%);

  --color-success: hsl(146, 65%, 50%);
  --color-danger: hsl(1, 79%, 66%);
  --color-shadow: hsl(220, 40%, 2%);
  --color-on-primary: hsl(0, 0%, 100%);
}