:root {
  /* Brand palette (sampled from the Stucare gradient logo) */
  --brand-lime: #ceef4f;
  --brand-lime-deep: #a7d32b;
  --brand-transition: #d6d5a0;
  --brand-purple: #b47cf5;
  --brand-purple-deep: #8b3dff;

  /* Signature gradient - for large shapes/backgrounds */
  --brand-gradient: linear-gradient(
    135deg,
    #ceef4f 0%,
    #d6d5a0 42%,
    #b47cf5 72%,
    #8b3dff 100%
  );
  /* Gradient tuned for text - defaults to the full brand gradient, overridden
     per theme below to stay readable against the current background.          */
  --brand-gradient-text: var(--brand-gradient);
  --brand-gradient-soft: linear-gradient(
    135deg,
    rgba(206, 239, 79, 0.35) 0%,
    rgba(214, 213, 160, 0.25) 45%,
    rgba(180, 124, 245, 0.35) 75%,
    rgba(139, 61, 255, 0.35) 100%
  );

  /* Spacing / radius / easing */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-med: 360ms;
  --dur-slow: 720ms;

  /* Layout */
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 48px);

  /* Fluid typography */
  --fs-hero: clamp(2.75rem, 6vw + 1rem, 6rem);
  --fs-h1: clamp(2rem, 3.2vw + 1rem, 3.75rem);
  --fs-h2: clamp(1.6rem, 2vw + 1rem, 2.5rem);
  --fs-h3: clamp(1.25rem, 1vw + 1rem, 1.6rem);
  --fs-body: clamp(1rem, 0.25vw + 0.95rem, 1.125rem);
  --fs-small: 0.9rem;
}

/* Dark theme (default) */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #08080f;
  --bg-elev: #0f0f1a;
  --bg-section: #0a0a14;

  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-strong: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-border-strong: rgba(255, 255, 255, 0.18);
  --glass-blur: 22px;
  --glass-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5),
    0 1px 0 0 rgba(255, 255, 255, 0.04) inset;

  --text: #f5f5f7;
  --text-muted: rgba(245, 245, 247, 0.62);
  --text-faint: rgba(245, 245, 247, 0.38);

  --hairline: rgba(255, 255, 255, 0.08);

  --orb-1: rgba(180, 124, 245, 0.55);
  --orb-2: rgba(206, 239, 79, 0.35);
  --orb-3: rgba(139, 61, 255, 0.5);

  --nav-bg: rgba(8, 8, 15, 0.55);
  --nav-border: rgba(255, 255, 255, 0.08);
}

/* Light theme */
[data-theme="light"] {
  color-scheme: light;

  /* Deeper gradient for text - pale lime/tan get lost on white, so we skip
     them and use saturated greens + deep purples.                            */
  --brand-gradient-text: linear-gradient(135deg, #7aa317 0%, #8b3dff 55%, #6a1fd6 100%);

  --bg: #f6f6fa;
  --bg-elev: #ffffff;
  --bg-section: #f0f0f6;

  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(10, 10, 20, 0.08);
  --glass-border-strong: rgba(10, 10, 20, 0.14);
  --glass-blur: 20px;
  --glass-shadow: 0 16px 40px -18px rgba(20, 10, 60, 0.18),
    0 1px 0 0 rgba(255, 255, 255, 0.6) inset;

  --text: #0a0a14;
  --text-muted: rgba(10, 10, 20, 0.62);
  --text-faint: rgba(10, 10, 20, 0.38);

  --hairline: rgba(10, 10, 20, 0.08);

  --orb-1: rgba(180, 124, 245, 0.45);
  --orb-2: rgba(206, 239, 79, 0.55);
  --orb-3: rgba(139, 61, 255, 0.3);

  --nav-bg: rgba(255, 255, 255, 0.6);
  --nav-border: rgba(10, 10, 20, 0.06);
}

/* Auto-dark preference (only applied before any explicit choice) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;

    --brand-gradient-text: linear-gradient(135deg, #7aa317 0%, #8b3dff 55%, #6a1fd6 100%);
    --bg: #f6f6fa;
    --bg-elev: #ffffff;
    --bg-section: #f0f0f6;
    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-bg-strong: rgba(255, 255, 255, 0.78);
    --glass-border: rgba(10, 10, 20, 0.08);
    --glass-border-strong: rgba(10, 10, 20, 0.14);
    --glass-blur: 20px;
    --glass-shadow: 0 16px 40px -18px rgba(20, 10, 60, 0.18),
      0 1px 0 0 rgba(255, 255, 255, 0.6) inset;
    --text: #0a0a14;
    --text-muted: rgba(10, 10, 20, 0.62);
    --text-faint: rgba(10, 10, 20, 0.38);
    --hairline: rgba(10, 10, 20, 0.08);
    --orb-1: rgba(180, 124, 245, 0.45);
    --orb-2: rgba(206, 239, 79, 0.55);
    --orb-3: rgba(139, 61, 255, 0.3);
    --nav-bg: rgba(255, 255, 255, 0.6);
    --nav-border: rgba(10, 10, 20, 0.06);
  }
}