/* CookieYes token baseline.
 * Root tokens verified against the globals.css snapshot supplied on 2026-08-05.
 * Prefer current Figma variables and current project tokens when available.
 * This file intentionally excludes unverified spacing, radius, breakpoint,
 * line-height, and letter-spacing tokens. The gradient recipes after :root
 * are the approved 2026-08-05 cloud-skill baseline; they are not present as
 * the same named utilities in the supplied globals.css snapshot.
 */

:root {
  --background: #ffffff;
  --foreground: #171717;
  --white: #ffffff;

  --blue-main: #1863dc;
  --blue-dark: #134fb0;
  --blue-light: #4682e3;
  --blue-bg1: #d1e0f8;
  --blue-bg2: #ecf3fc;
  --blue-bg3: #f1f6fd;

  --grey-title: #27283c;
  --grey-body: #3d3e50;
  --grey-label: #525363;
  --grey-placeholder: #686876;
  --grey-line: #bebfc5;
  --grey-bg: #e9e9eb;

  --red: #dd425a;
  --red-dark: #b13548;
  --dark-red: #b13548;
  --red-bg1: #f8d9de;
  --red-bg2: #fcecee;
  --red-bg3: #e4687b;
  --green: #2dad70;
  --green-dark: #1a7a4d;
  --green-bg1: #d5efe2;
  --green-bg2: #eaf7f1;
  --yellow: #ffa000;
  --yellow-dark: #cc8000;
  --yellow-bg1: #ffeccc;
  --yellow-bg2: #fff6e5;

  --card-border: #e0e0e0;
  --promo-banner-bg: #0f1f5c;

  --font-poppins: Poppins, sans-serif;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo,
    Consolas, monospace;
  --line-height: 1.3;

  --text-56: 56px;
  --text-48: 48px;
  --text-4xl: 48px;
  --text-42: 42px;
  --text-3xl: 42px;
  --text-40: 40px;
  --text-36: 36px;
  --text-2xl: 36px;
  --text-32: 32px;
  --text-28: 28px;
  --text-xl: 28px;
  --text-24: 24px;
  --text-lg: 24px;
  --text-22: 22px;
  --text-20: 20px;
  --text-base: 20px;
  --text-18: 18px;
  --text-16: 16px;
  --text-15: 15px;
  --text-14: 14px;
  --text-13: 13px;
  --text-12: 12px;
  --text-11: 11px;
  --text-10: 10px;
  --text-9: 9px;

  --shadow1-grey: 0 1px 8px 0 rgba(39, 40, 60, 0.14);
  --shadow2-grey: 0 8px 26px -4px rgba(39, 40, 60, 0.2);
  --shadow1-blue: 0 1px 8px 0 rgba(24, 99, 220, 0.17);
  --shadow2-blue: 0 8px 28px -4px rgba(24, 99, 220, 0.2);
  --shadow-gradient: -13px -16px 48px -18px rgba(24, 99, 220, 0.3),
    7px 15px 46px -15px rgba(45, 173, 112, 0.3);
  --info-box-shadow-blue: 0 -4px 0 var(--blue-main);
  --info-box-shadow-red: 0 -4px 0 var(--red-bg1);
  --info-box-shadow-green: 0 -4px 0 var(--green-bg1);
  --info-box-shadow-yellow: 0 -4px 0 var(--yellow-bg1);

  /* Approved cloud-skill gradient palette. Alpha belongs at the point of use. */
  --aurora-base: var(--blue-bg2);
  --aurora-blue-55: 223 100% 55%;
  --aurora-blue-61: 223 83% 61%;
  --aurora-blue-61b: 223 88% 61%;
  --aurora-blue-65: 220 100% 65%;
  --aurora-blue-80: 223 97% 80%;
  --aurora-green-48: 151 82% 48%;
  --aurora-green-60: 155 90% 60%;
  --aurora-green-68: 152 83% 68%;

  --gradient-cta-band-base: var(--blue-bg2);
  --gradient-cta-band:
    linear-gradient(
      42deg,
      rgba(24, 99, 220, 0.15) 10.4%,
      rgba(236, 243, 252, 0) 45.8%,
      rgba(45, 173, 112, 0.13) 84.9%
    );
}

/* Apply these classes without recolouring, restopping, or mixing their layers. */
.cta-band {
  width: 100%;
  min-height: 354px;
  background: var(--gradient-cta-band), var(--gradient-cta-band-base);
}

.hero-aurora {
  background-color: var(--aurora-base);
}

@media (min-width: 1200px) {
  .hero-aurora {
    background-image:
      radial-gradient(circle at 72% 95%, hsl(var(--aurora-blue-55) / 0.85) 0%, transparent 35%),
      radial-gradient(circle at 82% 72%, hsl(var(--aurora-blue-65) / 0.70) 0%, transparent 30%),
      radial-gradient(circle at 95% 45%, hsl(var(--aurora-green-60) / 0.80) 0%, transparent 25%),
      radial-gradient(circle at 68% 110%, hsl(var(--aurora-green-68) / 0.60) 0%, transparent 40%),
      radial-gradient(circle at 78% 130%, hsl(var(--aurora-blue-80) / 0.50) 0%, transparent 45%);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .hero-aurora {
    background-image:
      radial-gradient(circle at 35% 125%, hsl(var(--aurora-blue-55) / 0.80) 0%, transparent 40%),
      radial-gradient(circle at 50% 105%, hsl(var(--aurora-blue-65) / 0.60) 0%, transparent 30%),
      radial-gradient(circle at 90% 95%, hsl(var(--aurora-green-60) / 0.70) 0%, transparent 28%),
      radial-gradient(circle at 20% 135%, hsl(var(--aurora-green-68) / 0.50) 0%, transparent 40%),
      radial-gradient(circle at 75% 110%, hsl(var(--aurora-blue-80) / 0.40) 0%, transparent 35%);
  }
}

@media (max-width: 767px) {
  .hero-aurora {
    background-image:
      radial-gradient(circle at 15% 130%, hsl(var(--aurora-blue-55) / 0.85) 0%, transparent 45%),
      radial-gradient(circle at 45% 115%, hsl(var(--aurora-blue-65) / 0.60) 0%, transparent 35%),
      radial-gradient(circle at 85% 125%, hsl(var(--aurora-green-60) / 0.80) 0%, transparent 30%),
      radial-gradient(circle at 30% 140%, hsl(var(--aurora-green-68) / 0.50) 0%, transparent 40%),
      radial-gradient(circle at 60% 150%, hsl(var(--aurora-blue-80) / 0.40) 0%, transparent 45%);
  }
}

.section-aurora {
  background-color: var(--aurora-base);
  background-image:
    radial-gradient(circle at 47.88% 194.28%, hsl(var(--aurora-blue-61)) 14.1%, transparent 75.3%),
    radial-gradient(circle at 49.25% 147.71%, hsl(var(--aurora-green-68)) 0%, transparent 38.05%),
    radial-gradient(circle at 74.71% 176.09%, hsl(var(--aurora-green-48)) 0%, transparent 50%),
    radial-gradient(circle at 29.68% 168.20%, hsl(var(--aurora-blue-80)) 0%, transparent 50%);
}

.section-aurora-alt {
  background-color: var(--aurora-base);
  background-image:
    radial-gradient(circle at 57.48% 188.82%, hsl(var(--aurora-blue-61)) 14.1%, transparent 75.3%),
    radial-gradient(circle at 28.94% 190.78%, hsl(var(--aurora-green-68)) 0%, transparent 38.05%),
    radial-gradient(circle at 99.27% 193.49%, hsl(var(--aurora-green-48)) 0%, transparent 50%),
    radial-gradient(circle at -11.48% 183.14%, hsl(var(--aurora-blue-61b)) 0%, transparent 50%);
}