/* Syncopate Digital Inc. — brand tokens
   Pine palette · Sora (display/UI) + Azeret Mono (labels, code)
   Fonts: https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Azeret+Mono:wght@400;500&display=swap */

:root {
  /* Pine ramp */
  --syn-pine-400: #58a88e;
  --syn-pine-500: #3c7a64;
  --syn-pine-600: #2a574a;
  --syn-pine-700: #1f3a34; /* brand primary */
  --syn-pine-800: #162924;
  --syn-pine-900: #0d1815;

  /* Neutrals */
  --syn-ink: #141916;
  --syn-slate-700: #4a554f;
  --syn-slate-500: #75837c;
  --syn-slate-300: #c9d0ca;
  --syn-mist: #e1e6e1;
  --syn-hairline: #e6eae6;
  --syn-paper: #f6f7f4;
  --syn-white: #ffffff;
  --syn-void: #0a100e;

  /* Accent (use sparingly: highlights, charts, awards) */
  --syn-brass: #c8a96a;

  /* Semantic — light mode (default) */
  --syn-bg: var(--syn-white);
  --syn-bg-subtle: var(--syn-paper);
  --syn-border: var(--syn-hairline);
  --syn-border-strong: var(--syn-slate-300);
  --syn-text: var(--syn-ink);
  --syn-text-muted: var(--syn-slate-700);
  --syn-text-faint: var(--syn-slate-500);
  --syn-primary: var(--syn-pine-700);
  --syn-primary-hover: var(--syn-pine-600);
  --syn-on-primary: var(--syn-white);
  --syn-focus: var(--syn-pine-400);

  /* Type */
  --syn-font-sans: "Sora", "Helvetica Neue", Helvetica, sans-serif;
  --syn-font-mono: "Azeret Mono", ui-monospace, "SFMono-Regular", monospace;

  --syn-text-display-xl: 600 3.5rem/1 var(--syn-font-sans);
  --syn-text-display: 600 2.5rem/1.06 var(--syn-font-sans);
  --syn-text-h1: 600 2rem/1.1 var(--syn-font-sans);
  --syn-text-h2: 600 1.5rem/1.2 var(--syn-font-sans);
  --syn-text-h3: 600 1.1875rem/1.3 var(--syn-font-sans);
  --syn-text-body-lg: 400 1.0625rem/1.6 var(--syn-font-sans);
  --syn-text-body: 400 0.9375rem/1.6 var(--syn-font-sans);
  --syn-text-small: 400 0.8125rem/1.55 var(--syn-font-sans);
  --syn-text-label: 500 0.6875rem/1.2 var(--syn-font-mono);

  --syn-tracking-display: -0.04em;
  --syn-tracking-heading: -0.03em;
  --syn-tracking-label: 0.06em;

  /* Space (4px base) */
  --syn-space-1: 0.25rem;
  --syn-space-2: 0.5rem;
  --syn-space-3: 0.75rem;
  --syn-space-4: 1rem;
  --syn-space-6: 1.5rem;
  --syn-space-8: 2rem;
  --syn-space-12: 3rem;
  --syn-space-16: 4rem;
  --syn-space-24: 6rem;

  /* Radius & elevation — squared-off by default */
  --syn-radius-0: 0px;
  --syn-radius-sm: 2px;
  --syn-radius-md: 4px;
  --syn-radius-pill: 999px;
  --syn-shadow-sm: 0 1px 2px rgb(20 25 22 / 0.06);
  --syn-shadow-md: 0 4px 16px rgb(20 25 22 / 0.08);
}

[data-theme="dark"] {
  --syn-bg: var(--syn-void);
  --syn-bg-subtle: #101815;
  --syn-border: #1a2420;
  --syn-border-strong: #22302b;
  --syn-text: #e9efea;
  --syn-text-muted: #97a79d;
  --syn-text-faint: #7b8c83;
  --syn-primary: var(--syn-pine-400);
  --syn-primary-hover: #6fbba1;
  --syn-on-primary: #06120e;
  --syn-focus: var(--syn-pine-400);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --syn-bg: var(--syn-void);
    --syn-bg-subtle: #101815;
    --syn-border: #1a2420;
    --syn-border-strong: #22302b;
    --syn-text: #e9efea;
    --syn-text-muted: #97a79d;
    --syn-text-faint: #7b8c83;
    --syn-primary: var(--syn-pine-400);
    --syn-primary-hover: #6fbba1;
    --syn-on-primary: #06120e;
  }
}