/* ============================================================
   Logethos: design tokens
   Shared brand with the Evigate app (evigate.logethos.com): the
   same faces and the same warm-paper / green palette, so the site
   and the product read as one company. Source of truth for the
   values is the app's `.ev` system (frontend/app/globals.css);
   change them there and mirror here.
   Self-hosted type: Newsreader (display), Hanken Grotesk
   (body/UI), IBM Plex Mono (technical/labels). No third-party
   font requests: the privacy policy states the site loads
   nothing from another host, so every face below is local.
   ============================================================ */

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

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

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-variable.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/plexmono-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/plexmono-500.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/plexmono-600.woff2") format("woff2");
}

:root {

  /* ---- Type ---- */
  --font-display: "Newsreader", "Iowan Old Style", serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --text-xs: 0.75rem;   /* 12px */
  --text-sm: 0.875rem;  /* 14px */
  --text-base: 1rem;    /* 16px */
  --text-md: 1.125rem;  /* 18px */
  --text-lg: 1.375rem;  /* 22px */
  --text-xl: 1.75rem;   /* 28px */
  --text-2xl: 2.25rem;  /* 36px */
  --text-3xl: 2.75rem;  /* 44px */
  --text-4xl: 3.5rem;   /* 56px */

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-base: 1.6;
  --leading-loose: 1.75;

  /* ---- Space ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* ---- Shape ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* ---- Layout ---- */
  --container-max: 1180px;
  --nav-height: 72px;

  /* ---- Brand hues (constant across themes, shared with the app) ---- */
  --green-500: #55a97c;
  --green-600: #2f6b4f;
  --clay-500: #c77b4a;
  --amber-500: #b9822e;
  --red-500: #e86b5e;
  --red-600: #be4a3e;

  /* ---- Light surfaces (default, matches the app) ---- */
  color-scheme: light;
  --surface-0: #f6f5f1;
  --surface-1: #ffffff;
  --surface-2: #eeede7;
  --surface-3: #e1e3da;
  --border: #e1e3da;
  --border-strong: #c9ccc0;
  --text-primary: #23291f;
  --text-secondary: #4f5648;
  --text-tertiary: #6f7566;
  --on-brand: #ffffff;

  --accent: #2f6b4f;
  --accent-text: #2f6b4f;
  --accent-hover: #275c43;
  --accent-active: #214d38;
  --link: #2f6b4f;
  --link-hover: #275c43;
  --live: #2f6b4f;
  --danger: #be4a3e;

  --shadow-card: 0 1px 2px rgba(20, 24, 20, 0.06), 0 1px 3px rgba(20, 24, 20, 0.05);
  --shadow-pop: 0 18px 44px -26px rgba(20, 24, 20, 0.4);
  --focus-ring: 0 0 0 3px rgba(47, 107, 79, 0.35);
}

/* Dark theme: opt-in via the header toggle, or the OS preference
   when no explicit choice has been stored. Mirrors the mechanism
   described in the Cookie Policy (logethos-theme in localStorage). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-0: #141815;
  --surface-1: #1b201c;
  --surface-2: #222823;
  --surface-3: #2c332d;
  --border: #282d26;
  --border-strong: #3a4237;
  --text-primary: #e8ece4;
  --text-secondary: #a9b09d;
  --text-tertiary: #8b927f;
  --on-brand: #141815;

  --accent: #55a97c;
  --accent-text: #6bbb90;
  --accent-hover: #6bbb90;
  --accent-active: #4a9670;
  --link: #6bbb90;
  --link-hover: #8acba6;
  --live: #55a97c;
  --danger: #e86b5e;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-pop: 0 18px 48px -24px rgba(0, 0, 0, 0.65);
  --focus-ring: 0 0 0 3px rgba(85, 169, 124, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    color-scheme: dark;
    --surface-0: #141815;
    --surface-1: #1b201c;
    --surface-2: #222823;
    --surface-3: #2c332d;
    --border: #282d26;
    --border-strong: #3a4237;
    --text-primary: #e8ece4;
    --text-secondary: #a9b09d;
    --text-tertiary: #8b927f;
    --on-brand: #141815;

    --accent: #55a97c;
    --accent-text: #6bbb90;
    --accent-hover: #6bbb90;
    --accent-active: #4a9670;
    --link: #6bbb90;
    --link-hover: #8acba6;
    --live: #55a97c;
    --danger: #e86b5e;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.28);
    --shadow-pop: 0 18px 48px -24px rgba(0, 0, 0, 0.65);
    --focus-ring: 0 0 0 3px rgba(85, 169, 124, 0.45);
  }
}