/* =========================================================================
   SnapRes marketing site — design tokens
   Palette lifted 1:1 from SnapRes.py (THEMES dict). Do not introduce new
   hues — everything here is grayscale + pure white/black, on purpose.
   ========================================================================= */

@font-face {
  font-family: "Nunito Black";
  src: url("../fonts/Nunito-Black.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Light";
  src: url("../fonts/Nunito-Light.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
}

:root {
  /* raw grayscale ramp — from SnapRes.py */
  --gray-900: #0F0F0F;
  --gray-800: #1C1C1C;
  --gray-700: #3C3C3C;
  --gray-600: #5A5A5A;
  --gray-500: #7A7A7A;
  --gray-400: #9B9B9B;
  --gray-300: #BFBFBF;
  --gray-200: #DCDCDC;
  --gray-100: #F4F4F4;
  --white: #FFFFFF;
  --black: #000000;

  /* type */
  --font-title: "Nunito Black", "Segoe UI Semibold", sans-serif;
  --font-body: "Nunito Light", "Segoe UI", sans-serif;

  /* motion */
  --ease-snap: cubic-bezier(.16,.84,.32,1);
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .28s;
  --dur-med: .6s;
  --dur-slow: 1s;

  /* shape */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  color-scheme: dark;
}

/* ---- dark theme (default) — mirrors THEMES["dark"] ---- */
:root,
[data-theme="dark"] {
  --bg: var(--gray-900);
  --panel: var(--gray-800);
  --border: var(--gray-700);
  --border-soft: #242424;
  --text-main: var(--gray-100);
  --text-dim: var(--gray-400);
  --text-dimmer: var(--gray-600);
  --glow: rgba(255,255,255,.14);
  --glow-strong: rgba(255,255,255,.28);
  --status-ok: #7fe3ac;
  --btn-idle: var(--gray-300);
  --btn-hover: var(--white);
  --btn-text: var(--gray-900);
  --btn-hover-text: var(--gray-900);
  --scrim: rgba(15,15,15,.72);
}

/* ---- light theme — mirrors THEMES["light"] ---- */
[data-theme="light"] {
  color-scheme: light;
  --bg: var(--gray-100);
  --panel: var(--white);
  --border: var(--gray-200);
  --border-soft: #EFEFEF;
  --text-main: var(--gray-900);
  --text-dim: var(--gray-600);
  --text-dimmer: var(--gray-400);
  --glow: rgba(15,15,15,.10);
  --glow-strong: rgba(15,15,15,.18);
  --status-ok: #2f6f4f;
  --btn-idle: var(--gray-300);
  --btn-hover: var(--gray-900);
  --btn-text: var(--gray-900);
  --btn-hover-text: var(--white);
  --scrim: rgba(244,244,244,.72);
}