/* Design tokens of the customer AI server (MOREMEDIA corporate design v2.0).
   Every colour, size and space in app.css comes from here. Branding (dashboard
   → Branding) overrides --brand-ink, --brand-pebble and --font-sans via
   /theme.css, which is loaded after this file. Documentation: docs/design-system.md */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("/static/fonts/HankenGrotesk-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand (overridable) */
  --brand-ink: #15140F;      /* Tinte: text, lines, primary actions, navigation */
  --brand-pebble: #A6A39B;   /* Kiesel: second part of headlines, text on ink */
  --font-sans: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* CD grays (fixed) */
  --graphite: #393833;
  --gray: #73716C;
  --sand: #CECDC7;
  --stone: #EFECE3;
  --paper: #F7F6F2;
  --white: #FFFFFF;

  /* Purpose tokens: components only use these */
  --bg: var(--paper);
  --surface: var(--white);
  --surface-sunken: var(--stone);
  --text: var(--brand-ink);
  --text-soft: var(--graphite);
  --text-muted: var(--gray);
  --text-accent: var(--brand-pebble);
  --line-strong: var(--brand-ink);
  --line: var(--sand);
  --nav-bg: var(--brand-ink);
  --nav-text: var(--brand-pebble);
  --nav-text-active: var(--white);
  --action-bg: var(--brand-ink);
  --action-text: var(--white);
  --focus: var(--brand-ink);

  /* Type scale (screen): heading never smaller than what follows */
  --fs-xs: 0.75rem;   /* 12 */
  --fs-sm: 0.8125rem; /* 13 */
  --fs-md: 0.9375rem; /* 15 */
  --fs-lg: 1.125rem;  /* 18 */
  --fs-xl: 1.625rem;  /* 26 */
  --fs-stat: 1.875rem;/* 30 */
  --lh: 1.5;
  --weight-regular: 400;
  --weight-medium: 500;

  /* Space, radius, layout */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius: 2px;
  --nav-width: 228px;
  --content-max: 1240px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15140F;
    --surface: #1E1D18;
    --surface-sunken: #26251F;
    --text: #F2EFEA;
    --text-soft: #CECDC7;
    --text-muted: #A6A39B;
    --line-strong: #F2EFEA;
    --line: #393833;
    --nav-bg: #0D0C09;
    --action-bg: #F2EFEA;
    --action-text: #15140F;
    --focus: #F2EFEA;
  }
}