@layer theme {
  :root {
    /* brand palette */
    --nk-pine: #26352f;
    --nk-pine-deep: #1c2b25;
    --nk-pine-soft: #3e6b54;
    --nk-sage: #626b64;
    --nk-ivory: #f7f4ed;
    --nk-ivory-warm: #f5f1e8;
    --nk-white: #fffefc;
    --nk-mist: #e2dfd8;
    --nk-gold: #f0c987;
    --nk-gold-deep: #e3b264;

    /* semantic map */
    --color-paper: var(--nk-ivory);
    --color-surface: var(--nk-white);
    --color-ink: var(--nk-pine);
    --color-ink-muted: var(--nk-sage);
    --color-primary: var(--nk-pine);
    --color-primary-hover: var(--nk-pine-deep);
    --color-on-primary: var(--nk-ivory);
    --color-link: var(--nk-pine-soft);
    --color-link-hover: var(--nk-pine);
    --color-focus: var(--nk-pine-soft);
    --color-border: var(--nk-mist);
    --color-accent: var(--nk-gold);
    --color-accent-hover: var(--nk-gold-deep);

    --spacing: 0.25rem;
    --radius: 0.5rem;

    --text-base: 0.75rem;
    --text-base--lh: calc(1 / 0.75);
    --text-lg: 0.875rem;
    --text-lg--lh: calc(1.25 / 0.875);
    --text-xl: 1rem;
    --text-xl--lh: calc(1.5 / 1);

    --fw-medium: 500;
    --fw-bold: 700;

    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  }
}

@layer base {
  *,
  :after,
  :before,
  ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }
}