/* velik.chat visual tokens — marketing is source of truth.
   Role names only. Light + dark in this file.
   Default (no data-theme): warm light, for the company site.
   Dark exists so chat can inherit later. Do not auto-flip marketing. */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --color-bg: #f4ebe0;
  --color-surface: #fff9f2;
  --color-surface-2: #ede1d2;
  --color-text: #241c16;
  --color-text-muted: #5c5248;
  --color-accent: #c4472a;
  --color-accent-hover: #a3361e;
  --color-on-accent: #fff8f1;
  --color-danger: #a61b1b;
  --color-border: #e2d4c4;
  --color-focus: #c4472a;

  --color-sage: #3f6b4e;
  --color-sage-soft: #d7e4d4;
  --color-gold: #c9892e;
  --color-peach: #f0d2b4;
  --color-wash-1: #f0d2b4;
  --color-wash-2: #d5e3d4;
  --color-chat-me: #f4ddd0;
  --color-chat-them: #fff9f2;
  --color-on-sage: #f4faf4;

  --font-display: "Newsreader", "Iowan Old Style", Palatino, Georgia, serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-weight-body: 400;
  --font-weight-strong: 600;

  --size-xs: 0.75rem;
  --size-sm: 0.9375rem;
  --size-md: 1.125rem;
  --size-lg: 1.3125rem;
  --size-xl: 1.75rem;
  --size-2xl: 2.25rem;
  --size-3xl: clamp(2.1rem, 5vw, 3.25rem);
  --size-4xl: clamp(2.6rem, 7vw, 4.35rem);

  --leading-none: 1;
  --leading-tight: 1.08;
  --leading-snug: 1.28;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.025em;
  --tracking-wide: 0.04em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;
  --space-page-x: clamp(1.15rem, 4.5vw, 3.25rem);
  --space-page-y: clamp(1rem, 2.6vw, 1.75rem);
  --measure: 38rem;
  --max-width: 74rem;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(36, 28, 22, 0.06);
  --shadow-md: 0 12px 32px rgba(36, 28, 22, 0.1);
  --shadow-lg: 0 24px 60px rgba(36, 28, 22, 0.14);

  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus);

  --duration-fast: 120ms;
  --duration: 220ms;
  --easing: cubic-bezier(0.2, 0.7, 0.2, 1);
}

[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #1c1814;
  --color-surface: #26211c;
  --color-surface-2: #322c26;
  --color-text: #f4ede3;
  --color-text-muted: #a89b8c;
  --color-accent: #e36a48;
  --color-accent-hover: #f08462;
  --color-on-accent: #2a1610;
  --color-danger: #e07070;
  --color-border: #3d352c;
  --color-focus: #e36a48;

  --color-sage: #8fb896;
  --color-sage-soft: #2a3a2e;
  --color-gold: #e0b56a;
  --color-peach: #4a3428;
  --color-wash-1: #3a2c24;
  --color-wash-2: #243028;
  --color-chat-me: #4a2e24;
  --color-chat-them: #26211c;
  --color-on-sage: #142018;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.4);
}