/*
 * Zett design tokens, shared by the landing page and the documentation.
 *
 * The palette is the application's own (--accent, --accent-dark, --accent-soft,
 * --text, --secondary); the motion values follow the measured Apple curves in
 * the apple-style-landing skill. Swapping [data-theme] flips both surfaces
 * without any component knowing which theme it is in.
 */

:root {
  color-scheme: light;

  /* Brand green, fixed in both themes. */
  --green-900: #17231d;
  --green-700: #2b3f35;
  --green-600: #345243;
  --green-500: #476957;
  --green-200: #c6d7cd;
  --green-100: #e5eee9;
  --green-50: #f1f6f3;

  /* Surfaces and text, themed. */
  --bg: #ffffff;
  --surface: #ffffff;
  --canvas: #f6f8f7;
  --line: #e4e8e5;
  --line-strong: #d6ddd8;
  --ink: #1d1d1f;
  --ink-soft: #4b4b50;
  --muted: #6e6e73;
  --faint: #929298;
  --accent: var(--green-600);
  --accent-strong: var(--green-700);
  --accent-text: var(--green-600);
  --accent-soft: var(--green-100);
  --accent-faint: var(--green-50);
  --shadow: 0 2px 6px rgba(23, 35, 29, 0.06), 0 24px 60px rgba(23, 35, 29, 0.12);

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --display-1: clamp(2.6rem, 5.6vw, 4.75rem);
  --display-2: clamp(1.9rem, 3.6vw, 3rem);
  --title-3: clamp(1.2rem, 1.9vw, 1.5rem);
  --body-lg: clamp(1.03rem, 1.3vw, 1.25rem);
  --body: 1.0625rem;
  --small: 0.875rem;
  --micro: 0.78rem;

  /* Rhythm */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --band: clamp(4.5rem, 13vh, 10rem);

  /* Motion (see the apple-style-landing skill) */
  --motion-fast: 120ms;
  --motion-base: 250ms;
  --motion-reveal: 400ms;
  --motion-hero: 900ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --stagger: 70ms;
}

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

  --bg: #1b2420;
  --surface: #202b26;
  --canvas: #16211c;
  --line: #2c3833;
  --line-strong: #3a4a42;
  --ink: #e6eae7;
  --ink-soft: #c8d2cc;
  --muted: #a8b3ad;
  --faint: #87938d;
  --accent: #7fae94;
  --accent-strong: #9ec7ae;
  --accent-text: #9ec7ae;
  --accent-soft: rgba(158, 199, 174, 0.14);
  --accent-faint: rgba(158, 199, 174, 0.07);
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 24px 60px rgba(0, 0, 0, 0.45);
}