/*
 * DRAMORY design tokens — theme "Paper & Forest" (종이와 숲), 2026-09-29.
 * The one place for colour, type and spacing. Same file in xHwp site/office/public/static/tokens.css (office.dramory.ai) — keep the two in step.
 *
 * Brand colours (xHwp design/brand/dramory/tokens.json): ink #122620 · forest #1D5C4A · paper #F2F5F1.
 * Supporting tones are mixed from those three; one warm ochre is kept for a single point (a caret, a live mark), never
 * for surfaces. No gradients.
 * Type: MaruBuri (display, Hangul + Latin book serif) + Pretendard (text, UI). Both SIL OFL 1.1, self-hosted as
 * per-site subsets in static/fonts/ (fonts.py) — no third-party font CDN (the CSP allows 'self' only).
 */
@font-face {
  font-family: "MaruBuri";
  src: url("fonts/maruburi-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("fonts/pretendard-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("fonts/pretendard-700.woff2") format("woff2");
  font-weight: 600 700; font-style: normal; font-display: swap;
}

:root {
  /* brand */
  --c-ink: #122620;
  --c-forest: #1D5C4A;
  --c-paper: #F2F5F1;
  --c-ochre: #B0642A;

  /* light (default) */
  --bg: var(--c-paper);
  --bg-raised: #FAFCF9;
  --bg-sunk: #E7ECE6;
  --bg-deep: #10231D;           /* the one dark band on a light page */
  --fg-on-deep: #E8EEEA;
  --fg-on-deep-muted: #A9BAB2;
  --fg: var(--c-ink);
  --fg-muted: #46574F;          /* 7.0:1 on paper */
  --fg-faint: #5E6E67;          /* 4.9:1 on paper (AA) */
  --rule: rgba(18, 38, 32, 0.13);
  --rule-strong: rgba(18, 38, 32, 0.42);
  --accent: var(--c-forest);
  --accent-soft: rgba(29, 92, 74, 0.10);
  --accent-fg: #F7FAF6;
  --warm: var(--c-ochre);
  --focus: #1D5C4A;
  --shadow: 0 1px 2px rgba(18, 38, 32, 0.06), 0 12px 40px -12px rgba(18, 38, 32, 0.22);
  --device: #122620;

  /* art (inline SVG figures) */
  --art-paper: #FFFFFF;
  --art-ink: #122620;
  --art-line: rgba(18, 38, 32, 0.30);
  --art-grid: rgba(29, 92, 74, 0.22);

  /* type */
  --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR",
    "Malgun Gothic", "Segoe UI", system-ui, sans-serif;
  --font-display: "MaruBuri", "Iowan Old Style", "Apple Myungjo", "Noto Serif KR", "Batang", Georgia, serif;

  --step--2: 0.75rem;
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  --step-3: clamp(1.75rem, 1.35rem + 1.8vw, 2.6rem);
  --step-4: clamp(2.35rem, 1.5rem + 3.9vw, 4.4rem);

  /* layout */
  --page: 76rem;
  --measure: 38rem;
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem);
  --radius: 6px;
  --radius-lg: 14px;
  --space-section: clamp(4.5rem, 3rem + 6vw, 8.5rem);

  color-scheme: light;
}

/* dark: follows the system unless the visitor picked one (data-theme on <html>) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0C1512;
    --bg-raised: #121E1A;
    --bg-sunk: #0A110F;
    --bg-deep: #10231D;
    --device: #2B3A34;
    --fg: #E6ECE8;
    --fg-muted: #A8B8B0;
    --fg-faint: #8A9A93;
    --rule: rgba(230, 236, 232, 0.11);
    --rule-strong: rgba(230, 236, 232, 0.36);
    --accent: #8CC5AC;
    --accent-soft: rgba(140, 197, 172, 0.12);
    --accent-fg: #0C1512;
    --warm: #D9955E;
    --focus: #8CC5AC;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 48px -16px rgba(0, 0, 0, 0.7);
    --art-paper: #16231F;
    --art-ink: #E6ECE8;
    --art-line: rgba(230, 236, 232, 0.30);
    --art-grid: rgba(140, 197, 172, 0.22);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0C1512;
  --bg-raised: #121E1A;
  --bg-sunk: #0A110F;
  --bg-deep: #10231D;
  --device: #2B3A34;
  --fg: #E6ECE8;
  --fg-muted: #A8B8B0;
  --fg-faint: #8A9A93;
  --rule: rgba(230, 236, 232, 0.11);
  --rule-strong: rgba(230, 236, 232, 0.36);
  --accent: #8CC5AC;
  --accent-soft: rgba(140, 197, 172, 0.12);
  --accent-fg: #0C1512;
  --warm: #D9955E;
  --focus: #8CC5AC;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 48px -16px rgba(0, 0, 0, 0.7);
  --art-paper: #16231F;
  --art-ink: #E6ECE8;
  --art-line: rgba(230, 236, 232, 0.30);
  --art-grid: rgba(140, 197, 172, 0.22);
  color-scheme: dark;
}