/* ============================================================
   Component Control - Next Generation (concept)
   Design tokens - brand system derived from official brand assets
   Brand green #7CC521 · near-black #1A1A1A · grey #555555
   ============================================================ */
:root {
  /* Brand */
  --green: #7CC521;
  --green-bright: #96D63F;
  --green-soft: #A9DF5C;
  --green-deep: #5C9819;
  --green-mist: rgba(124, 197, 33, 0.13);
  --green-glow: rgba(124, 197, 33, 0.38);

  /* Dark surfaces (blue-tinted near-black) */
  --night-950: #070C11;
  --night-900: #0A1118;
  --night-850: #0D161F;
  --night-800: #111C28;
  --night-700: #182636;
  --night-600: #213448;

  /* Light surfaces */
  --bg-light: #F6F8FA;
  --bg-mist: #EEF2F5;
  --card-light: #FFFFFF;

  /* Text */
  --text-ink: #101A24;
  --text-slate: #42576B;
  --text-mute: #6B8094;
  --text-faint: #93A5B5;
  --text-light: #F4F7FA;
  --text-soft: #B9C6D3;
  --text-dim: #8EA0B2;

  /* Lines */
  --line-dark: rgba(185, 198, 211, 0.13);
  --line-light: #E4E9EE;

  /* Typography */
  --font-display: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(16, 26, 36, 0.06), 0 6px 16px -6px rgba(16, 26, 36, 0.10);
  --shadow-md: 0 2px 4px rgba(16, 26, 36, 0.06), 0 18px 40px -18px rgba(16, 26, 36, 0.22);
  --shadow-lg: 0 4px 10px rgba(16, 26, 36, 0.08), 0 34px 70px -26px rgba(16, 26, 36, 0.38);
  --glow-green: 0 0 0 1px rgba(124, 197, 33, 0.25), 0 12px 34px -10px rgba(124, 197, 33, 0.5);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.45, 0.5, 1);

  /* Layout */
  --header-h: 78px;
  --container: 1240px;
}