/* SPDX-License-Identifier: AGPL-3.0-or-later */
/*
 * Neoma brand tokens. The single source of truth for colour, type, spacing,
 * radius and depth, shared by the website, the docs, the published-site
 * themes and the app (src/themes/tokens.css maps its --color-* names onto
 * these). Change a value here and every surface follows.
 *
 * Palette: Paper, Stone, Ink, graphite and one accent, Fern: a deep, quiet
 * green on paper and a soft sage on ink. Growth, not a traffic light.
 *
 * Theme: light by default; dark when the OS asks for it, unless a page pins a
 * theme with data-theme="light" | "dark" on <html>.
 */

@font-face {
  font-family: 'Neoma Sans';
  src: url('fonts/plex-sans.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neoma Sans';
  src: url('fonts/plex-sans-italic.woff2') format('woff2');
  font-weight: 100 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Neoma Mono';
  src: url('fonts/plex-mono.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neoma Mono';
  src: url('fonts/plex-mono-medium.woff2') format('woff2');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Primitives (do not use directly in components) ---- */
  --nm-paper: #f7f8f4;
  --nm-stone: #e8ece7;
  --nm-white: #ffffff;
  --nm-ink: #171c19;
  --nm-ink-2: #141815;
  --nm-graphite: #535b56;
  --nm-fern-600: #276749;
  --nm-fern-700: #1d5038;
  --nm-fern-300: #7cc49a;
  --nm-fern-200: #a3d9b8;

  /* ---- Type ---- */
  --nm-font-sans:
    'Neoma Sans', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --nm-font-mono:
    'Neoma Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --nm-text-xs: 0.75rem;
  --nm-text-sm: 0.8125rem;
  --nm-text-md: 0.9375rem;
  --nm-text-lg: 1.0625rem;
  --nm-text-xl: 1.375rem;
  --nm-text-2xl: 1.875rem;
  --nm-text-3xl: clamp(2.125rem, 4.2vw, 3.25rem);
  --nm-leading-tight: 1.12;
  --nm-leading: 1.6;
  --nm-tracking-tight: -0.022em;
  --nm-tracking-mono: 0.02em;

  /* ---- Space (4px grid) ---- */
  --nm-space-1: 0.25rem;
  --nm-space-2: 0.5rem;
  --nm-space-3: 0.75rem;
  --nm-space-4: 1rem;
  --nm-space-5: 1.5rem;
  --nm-space-6: 2rem;
  --nm-space-7: 3rem;
  --nm-space-8: 4.5rem;
  --nm-space-9: 7rem;

  /* ---- Shape: restrained, editorial ---- */
  --nm-radius-xs: 2px;
  --nm-radius-sm: 4px;
  --nm-radius-md: 6px;
  --nm-radius-lg: 8px;

  /* ---- Motion ---- */
  --nm-ease: cubic-bezier(0.2, 0, 0, 1);
  --nm-fast: 120ms;
  --nm-medium: 200ms;

  /* ---- Light (default) ---- */
  color-scheme: light;
  --nm-bg: var(--nm-paper);
  --nm-bg-sunken: #eef1ec;
  --nm-surface: var(--nm-white);
  --nm-surface-2: #fbfcf9;
  --nm-hover: rgba(23, 28, 25, 0.05);
  --nm-active: rgba(23, 28, 25, 0.085);
  --nm-text: var(--nm-ink);
  --nm-text-muted: var(--nm-graphite);
  --nm-text-faint: #68706b;
  --nm-border: #dfe4de;
  --nm-border-strong: #c7cec7;
  --nm-accent: var(--nm-fern-600);
  --nm-accent-strong: var(--nm-fern-700);
  --nm-accent-subtle: rgba(39, 103, 73, 0.09);
  --nm-accent-line: rgba(39, 103, 73, 0.32);
  --nm-on-accent: #ffffff;
  --nm-selection: rgba(39, 103, 73, 0.16);
  --nm-success: #3b7a2f;
  --nm-warning: #8a5a0b;
  --nm-danger: #b0342c;
  --nm-info: #3d5a80;
  --nm-shadow-sm: 0 1px 2px rgba(23, 28, 25, 0.06);
  --nm-shadow-md: 0 1px 2px rgba(23, 28, 25, 0.05), 0 6px 20px rgba(23, 28, 25, 0.07);
  --nm-shadow-lg: 0 2px 4px rgba(23, 28, 25, 0.05), 0 18px 48px rgba(23, 28, 25, 0.12);
  --nm-focus-ring: 0 0 0 2px var(--nm-bg), 0 0 0 4px var(--nm-accent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --nm-bg: var(--nm-ink-2);
    --nm-bg-sunken: #0f1311;
    --nm-surface: #1b211d;
    --nm-surface-2: #212824;
    --nm-hover: rgba(235, 239, 234, 0.055);
    --nm-active: rgba(235, 239, 234, 0.09);
    --nm-text: #ebefea;
    --nm-text-muted: #a3aca5;
    --nm-text-faint: #828b85;
    --nm-border: #29302b;
    --nm-border-strong: #39423c;
    --nm-accent: var(--nm-fern-300);
    --nm-accent-strong: var(--nm-fern-200);
    --nm-accent-subtle: rgba(124, 196, 154, 0.12);
    --nm-accent-line: rgba(124, 196, 154, 0.36);
    --nm-on-accent: #141815;
    --nm-selection: rgba(124, 196, 154, 0.24);
    --nm-success: #9ccb78;
    --nm-warning: #d9a84a;
    --nm-danger: #e57a70;
    --nm-info: #9db4d6;
    --nm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --nm-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);
    --nm-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.35), 0 24px 56px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --nm-bg: var(--nm-ink-2);
  --nm-bg-sunken: #0f1311;
  --nm-surface: #1b211d;
  --nm-surface-2: #212824;
  --nm-hover: rgba(235, 239, 234, 0.055);
  --nm-active: rgba(235, 239, 234, 0.09);
  --nm-text: #ebefea;
  --nm-text-muted: #a3aca5;
  --nm-text-faint: #828b85;
  --nm-border: #29302b;
  --nm-border-strong: #39423c;
  --nm-accent: var(--nm-fern-300);
  --nm-accent-strong: var(--nm-fern-200);
  --nm-accent-subtle: rgba(124, 196, 154, 0.12);
  --nm-accent-line: rgba(124, 196, 154, 0.36);
  --nm-on-accent: #141815;
  --nm-selection: rgba(124, 196, 154, 0.24);
  --nm-success: #9ccb78;
  --nm-warning: #d9a84a;
  --nm-danger: #e57a70;
  --nm-info: #9db4d6;
  --nm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --nm-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);
  --nm-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.35), 0 24px 56px rgba(0, 0, 0, 0.5);
}