/* uptrail design tokens — derived from Brand Book v1.0 */
@font-face {
  font-family: "Open Sans";
  src: url("../assets/fonts/open-sans-variable.woff2") format("woff2-variations"),
       url("../assets/fonts/open-sans-variable.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/jetbrains-mono-variable.woff2") format("woff2-variations"),
       url("../assets/fonts/jetbrains-mono-variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand colors */
  --color-cyan: #47ffe3;
  --color-cyan-deep: #1fd9bd;
  --color-light-green: #bef197;
  --color-mid-green: #87b962;
  --color-deep-green: #538431;
  --color-black: #000000;
  --color-white: #ffffff;

  /* Surfaces */
  --color-surface-0: #0a0d0a;
  --color-surface-1: #10140f;
  --color-surface-2: #161d18;
  --color-surface-line: rgba(190, 241, 151, 0.14);
  --color-surface-light: #f5f5f4;
  --color-surface-light-card: #ffffff;
  --color-surface-light-line: #e4e4e0;

  --color-text-onlight: #0a0a09;
  --color-text-onlight-muted: #55564f;
  --color-text-ondark: #f4f7f5;
  --color-text-ondark-muted: #9aa39a;

  --color-danger: #e5484d;
  --color-danger-bg: rgba(229, 72, 77, 0.12);

  /* Typography */
  --font-sans: "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", monospace;
  --text-display: clamp(2.2rem, 1.7rem + 4vw, 4.5rem);
  --text-h1: clamp(2rem, 1.65rem + 1.6vw, 3rem);
  --text-h2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem);
  --text-lead: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --text-body: clamp(0.95rem, 0.92rem + 0.15vw, 1rem);
  --text-small: 0.85rem;
  --text-caption: 0.75rem;
  --text-code: 0.875rem;

  --leading-tight: 1.1;
  --leading-snug: 1.35;
  --leading-body: 1.6;

  /* Spacing */
  --space-section: clamp(4rem, 3rem + 5vw, 8rem);
  --space-block: clamp(2.5rem, 2rem + 2vw, 4rem);
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3rem;

  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* Motion */
  --duration-fast: 150ms;
  --duration-normal: 320ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-card: 0 1px 2px rgba(10, 12, 10, 0.04), 0 12px 32px -16px rgba(10, 12, 10, 0.18);
  --shadow-dark-glow: 0 0 0 1px rgba(71, 255, 227, 0.10), 0 20px 60px -20px rgba(71, 255, 227, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
  }
}