/* Design system - modernist tech premium with constrained neumorphism */
:root {
  /* Jenko Dynamics core hues (refined) */
  --color-jenko-yellow: #f2b14d;
  --color-jenko-orange: #ea7556;
  --color-jenko-blue: #2f84d6;
  --color-jenko-purple: #5f60bb;

  /* Neutral scale */
  --color-bg: #f4f6fb;
  --color-bg-elevated: #ffffff;
  --color-bg-soft: #edf1f8;
  --color-text: #11182b;
  --color-text-muted: #566078;
  --color-accent: #2f84d6;
  --color-accent-hover: #256eb8;
  --color-border: #d9e0ee;
  --color-focus: #6ca2ea;

  /* Surface/depth tokens */
  --depth-flat: 0 1px 0 rgba(12, 18, 32, 0.04);
  --depth-soft: 0 12px 30px rgba(16, 24, 44, 0.08);
  --depth-hover: 0 20px 42px rgba(16, 24, 44, 0.13);
  --depth-neu-outset: 8px 8px 20px rgba(18, 25, 42, 0.12), -8px -8px 18px rgba(255, 255, 255, 0.86);
  --depth-neu-hover: 12px 12px 28px rgba(18, 25, 42, 0.16), -10px -10px 22px rgba(255, 255, 255, 0.9);
  --depth-neu-inset: inset 3px 3px 6px rgba(17, 24, 39, 0.1), inset -3px -3px 6px rgba(255, 255, 255, 0.7);

  /* Compatibility aliases */
  --neu-radius: 18px;
  --neu-shadow-outset: var(--depth-neu-outset);
  --neu-shadow-inset: var(--depth-neu-inset);
  --neu-shadow-card: var(--depth-neu-hover);
  --neu-shadow-card-hover: var(--depth-neu-hover);
  --glow-accent: 0 0 24px rgba(47, 132, 214, 0.28);
  --glow-soft: 0 0 42px rgba(95, 96, 187, 0.18);

  /* Typography */
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Sora", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: var(--font-body);
  --font-size-xs: 0.875rem;
  --font-size-sm: 1rem;
  --font-size-base: 1.08rem;
  --font-size-lg: 1.215rem;
  --font-size-xl: 1.46rem;
  --font-size-2xl: 1.84rem;
  --font-size-3xl: 2.38rem;
  --font-size-4xl: 3.24rem;
  --line-height-tight: 1.15;
  --line-height-normal: 1.6;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --container-max: 1240px;
  --header-height: 4.5rem;
  --radius: 12px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --shadow: var(--depth-soft);
  --shadow-md: var(--depth-hover);

  /* Background image prominence controls */
  --bg-layer-wash-start: 0.74;
  --bg-layer-wash-mid: 0.66;
  --bg-layer-wash-end: 0.64;
  --bg-layer-accent-a-alpha: 0.09;
  --bg-layer-accent-b-alpha: 0.075;
  --bg-utility-tint-a-alpha: 0.16;
  --bg-utility-tint-b-alpha: 0.13;
  --bg-utility-tint-c-alpha: 0.08;
  --bg-utility-wash-start: 0.44;
  --bg-utility-wash-mid: 0.37;
  --bg-utility-wash-end: 0.42;
  --bg-utility-section-tone-a-start: 0.2;
  --bg-utility-section-tone-a-end: 0.14;
  --utility-support-panel-gradient: linear-gradient(168deg, rgba(255, 255, 255, 0.86) 0%, rgba(241, 247, 255, 0.8) 48%, rgba(238, 245, 255, 0.82) 100%);

  /* Atmosphere */
  --gradient-hero: radial-gradient(circle at 8% 16%, rgba(47, 132, 214, 0.16) 0%, transparent 48%),
    radial-gradient(circle at 92% 12%, rgba(95, 96, 187, 0.12) 0%, transparent 45%),
    linear-gradient(165deg, #f7f9fe 0%, #eef3fb 48%, #e8eef9 100%);
  --gradient-section: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(242, 246, 252, 0.74) 100%);
  --gradient-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(245, 248, 253, 0.9) 100%);
  --gradient-card: linear-gradient(165deg, rgba(255, 255, 255, 0.95) 0%, rgba(238, 243, 251, 0.94) 100%);
  --section-tone-a: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 100%);
  --section-tone-b: linear-gradient(180deg, rgba(233, 240, 252, 0.42) 0%, rgba(241, 246, 255, 0.3) 100%);
  --section-divider: color-mix(in srgb, var(--color-border) 72%, transparent);

  /* Home palette */
  --home-jenko-hero-gradient: radial-gradient(circle at 14% 14%, rgba(234, 117, 86, 0.3) 0%, transparent 45%),
    radial-gradient(circle at 84% 16%, rgba(47, 132, 214, 0.24) 0%, transparent 46%),
    radial-gradient(circle at 52% 96%, rgba(95, 96, 187, 0.18) 0%, transparent 52%),
    linear-gradient(145deg, #242e43 0%, #303a53 48%, #3b445e 100%);
  --home-jenko-surface: linear-gradient(180deg, rgba(41, 50, 71, 0.94) 0%, rgba(35, 43, 61, 0.96) 100%);
  --home-jenko-surface-alt: linear-gradient(180deg, rgba(49, 58, 83, 0.94) 0%, rgba(41, 49, 70, 0.96) 100%);
  --home-jenko-border: rgba(138, 156, 199, 0.28);
  --home-jenko-accent: #ea7556;
  --home-jenko-accent-2: #2f84d6;
  --home-jenko-text: #edf2ff;
  --home-jenko-muted: #c3cfe6;
  --home-section-tone-a: linear-gradient(180deg, rgba(54, 63, 89, 0.34) 0%, rgba(45, 55, 78, 0.24) 100%);
  --home-section-tone-b: linear-gradient(180deg, rgba(70, 86, 120, 0.3) 0%, rgba(58, 73, 105, 0.2) 100%);
  --home-section-divider: color-mix(in srgb, rgba(157, 178, 221, 0.6) 50%, transparent);

  /* Motion */
  --ease-out: cubic-bezier(0.19, 0.9, 0.25, 1);
  --duration: 0.5s;
}