:root {
  /* colors */
  --black: #050505;
  --night: #0d0f12;
  --graphite: #151922;
  --light: #f5f7fa;
  --paper: #eceff3;
  --white: #ffffff;
  --text: #111318;
  --text-soft: #5e6673;
  --muted: #8a929f;
  --accent: #ff6a00;
  --accent-2: #ff8533;
  --accent-soft: rgba(255, 106, 0, 0.12);
  --line: rgba(17, 19, 24, 0.11);
  --line-dark: rgba(245, 247, 250, 0.14);
  --card-bg: #ffffff;
  --card-bg-dark: rgba(13, 15, 18, 0.9);
  --card-border: var(--line);
  --card-border-dark: var(--line-dark);

  /* layout */
  --container-max: 1180px;
  --container-pad-desktop: 40px;
  --container-pad-mobile: 12px;
  --section-y-desktop: 64px;
  --section-y-mobile: 26px;
  --section-gap-desktop: 28px;
  --section-gap-mobile: 12px;
  --grid-gap-desktop: 20px;
  --grid-gap-mobile: 9px;

  /* typography */
  --font-base: Inter, Manrope, Arial, Helvetica, sans-serif;
  --h1-desktop: clamp(48px, 6vw, 76px);
  --h1-mobile: clamp(26px, 7.55vw, 30px);
  --h2-desktop: clamp(30px, 3.5vw, 44px);
  --h2-mobile: clamp(22px, 6.2vw, 28px);
  --text-lg: 18px;
  --text-md: 14px;
  --text-sm: 12px;
  --line-tight: 1.08;
  --line-normal: 1.5;
  --line-relaxed: 1.62;

  /* radius */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --radius-card: 12px;
  --radius-card-mobile: 14px;
  --radius-button: 10px;
  --radius-button-mobile: 13px;

  /* buttons */
  --button-h-md: 50px;
  --button-h-sm: 42px;
  --button-h-mobile: 44px;
  --button-pad-x: 22px;
  --button-pad-x-mobile: 14px;

  /* shadows */
  --shadow-soft: 0 16px 42px rgba(13, 15, 18, 0.1);
  --shadow-card: 0 10px 28px rgba(13, 15, 18, 0.1);
  --shadow-card-hover: 0 18px 44px rgba(13, 15, 18, 0.14);
  --shadow-dark: 0 18px 44px rgba(0, 0, 0, 0.28);
  --shadow-dock: 0 14px 34px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.1);

  /* mobile controls */
  --header-h-mobile: 54px;
  --dock-bottom: 8px;
  --dock-h: 54px;
  --dock-space: 66px;
  --touch-min: 42px;
}