/* Remm brand tokens — the single source for getremm.app (landing, guides, blog, legal).
   Spec: docs/design/DESIGN.md. Components use the semantic layer only.
   Signal (#FF4F1F) is 2.99:1 on paper → decoration only (dots, rules, the live indicator), never body text.
   Use --signal-text for orange text. */
:root {
  color-scheme: light;
  /* primitives */
  --ink-950: #121211; --ink-900: #1C1B19; --ink-800: #2E2C29; --ink-600: #6B675F; --ink-500: #8C877D;
  --paper-50: #FFFFFF; --paper-100: #F6F4EF; --paper-200: #EFECE5; --paper-300: #E3DFD6;
  --signal-500: #FF4F1F; --signal-700: #C2360E;
  /* semantic */
  --bg: var(--paper-100);
  --surface: var(--paper-50);
  --surface-2: var(--paper-200);
  --fg: var(--ink-950);
  --muted: var(--ink-600);
  --line: var(--paper-300);
  --primary: var(--ink-950);
  --on-primary: var(--paper-100);
  --signal: var(--signal-500);
  --signal-text: var(--signal-700);
  --focus: var(--signal-500);
  --ok: #1F7A4D;
  --warn: #9A5B00;
  --danger: #C2361F;
  /* shape & type */
  --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --pill: 999px;
  --shadow: 0 1px 0 rgba(18,18,17,.04), 0 12px 32px -12px rgba(18,18,17,.16);
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* legacy aliases: older page CSS keeps working and follows the theme */
  --mute: var(--muted); --card: var(--surface); --accent: var(--fg);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: var(--ink-950);
    --surface: var(--ink-900);
    --surface-2: #24221F;
    --fg: #F2EFE8;
    --muted: #A39E93;
    --line: var(--ink-800);
    --primary: #F2EFE8;
    --on-primary: var(--ink-950);
    --signal: #FF5A2B;
    --signal-text: #FF7A52;
    --ok: #4CC38A; --warn: #F0B24A; --danger: #FF7A66;
    --shadow: none;
  }
}

/* brand primitives shared by every page */
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; }
.logo svg { width: 30px; height: 30px; flex: none; }
.logo .word { font-weight: 750; font-size: 1.28rem; letter-spacing: -.045em; line-height: 1; }
.logo .word small { font-weight: 500; font-size: .82rem; letter-spacing: -.01em; color: var(--muted); margin-left: 6px; }
.live-dot { display: inline-block; width: .5em; height: .5em; border-radius: 50%; background: var(--signal); vertical-align: middle; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }