/* CloseGrowSolutions — Design Tokens (dark + light theming) */
:root,
[data-theme="dark"] {
  /* ---- Color (Dark — default) ---- */
  --bg: #0B0F16;
  --bg-2: #070A10;
  --surface: #141925;
  --surface-2: #0F141E;
  --surface-3: #1B2230;
  --carbon: #11161F;

  --accent: #2DB39A;          /* Calm teal */
  --accent-2: #7BC85A;         /* Soft sage-green */
  --accent-ink: #061812;       /* Foreground on accent gradients */
  --accent-glow: 0 0 32px rgba(45, 179, 154, 0.20);
  --accent-rgb: 45, 179, 154;
  --accent-2-rgb: 123, 200, 90;

  --indigo: #1B1F6B;
  --cobalt: #2042B8;

  --text: #F0F4FF;             /* Glacier White */
  --text-dim: #8B99B5;         /* Cool Mist */
  --text-faint: #5B6680;

  --danger: #FF4D4D;
  --success: #00E5CC;

  --glass-fill: rgba(255, 255, 255, 0.04);
  --glass-fill-strong: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-border-strong: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.10);

  --topbar-bg: #070A10;
  --nav-bg: rgba(11, 15, 22, 0.78);
  --nav-bg-scrolled: rgba(11, 15, 22, 0.94);
  --footer-bg: #070A10;

  /* ---- Depth / 3D shadows (softened) ---- */
  --shadow-soft: 0 1px 2px rgba(0,0,0,0.15), 0 6px 16px rgba(0,0,0,0.25);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.18), 0 14px 36px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-card-hover: 0 2px 6px rgba(0,0,0,0.20), 0 22px 60px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.06);
  --shadow-float: 0 18px 48px rgba(0,0,0,0.36);

  --overlay-strong: rgba(11,15,22,0.92);
  --overlay-mid: rgba(11,15,22,0.65);

  color-scheme: dark;
}

[data-theme="light"] {
  /* ---- Color (Light) ---- */
  --bg: #F5F7FB;
  --bg-2: #ECEFF5;
  --surface: #FFFFFF;
  --surface-2: #F8FAFD;
  --surface-3: #EFF2F8;
  --carbon: #FFFFFF;

  --accent: #1E8A78;
  --accent-2: #5BA346;
  --accent-ink: #052017;
  --accent-glow: 0 0 28px rgba(30, 138, 120, 0.18);
  --accent-rgb: 30, 138, 120;
  --accent-2-rgb: 91, 163, 70;

  --indigo: #4F57E8;
  --cobalt: #2042B8;

  --text: #0B1220;
  --text-dim: #4B5567;
  --text-faint: #7A8497;

  --danger: #DC2626;
  --success: #00B89E;

  --glass-fill: rgba(255, 255, 255, 0.65);
  --glass-fill-strong: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(11, 18, 32, 0.08);
  --glass-border-strong: rgba(11, 18, 32, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.95);

  --topbar-bg: #FFFFFF;
  --nav-bg: rgba(255, 255, 255, 0.78);
  --nav-bg-scrolled: rgba(255, 255, 255, 0.94);
  --footer-bg: #0B1220;

  --shadow-soft: 0 1px 2px rgba(15,23,42,0.04), 0 3px 8px rgba(15,23,42,0.06);
  --shadow-card: 0 1px 2px rgba(15,23,42,0.04), 0 8px 22px rgba(15,23,42,0.07), inset 0 1px 0 rgba(255,255,255,0.8);
  --shadow-card-hover: 0 2px 6px rgba(15,23,42,0.06), 0 20px 48px rgba(15,23,42,0.10), inset 0 1px 0 rgba(255,255,255,1);
  --shadow-float: 0 14px 40px rgba(15,23,42,0.12);

  --overlay-strong: rgba(245,247,251,0.94);
  --overlay-mid: rgba(245,247,251,0.65);

  color-scheme: light;
}

/* When user has no saved preference, follow OS in the absence of [data-theme] */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #F4F6FB;
    --bg-2: #EAEDF5;
    --surface: #FFFFFF;
    --surface-2: #F8FAFD;
    --surface-3: #EEF2F8;
    --carbon: #FFFFFF;

    --accent: #1E8A78;
    --accent-2: #5BA346;
    --accent-glow: 0 0 28px rgba(30, 138, 120, 0.18);
    --accent-rgb: 30, 138, 120;
    --accent-2-rgb: 91, 163, 70;

    --indigo: #4F57E8;
    --cobalt: #2042B8;

    --text: #0B1220;
    --text-dim: #4B5567;
    --text-faint: #7A8497;

    --glass-fill: rgba(255, 255, 255, 0.65);
    --glass-fill-strong: rgba(255, 255, 255, 0.82);
    --glass-border: rgba(11, 18, 32, 0.08);
    --glass-border-strong: rgba(11, 18, 32, 0.14);
    --glass-highlight: rgba(255, 255, 255, 0.95);

    --topbar-bg: #FFFFFF;
    --nav-bg: rgba(255, 255, 255, 0.78);
    --nav-bg-scrolled: rgba(255, 255, 255, 0.94);
    --footer-bg: #0B1220;

    --shadow-soft: 0 1px 2px rgba(15,23,42,0.06), 0 4px 12px rgba(15,23,42,0.08);
    --shadow-card: 0 1px 2px rgba(15,23,42,0.06), 0 12px 32px rgba(15,23,42,0.10), inset 0 1px 0 rgba(255,255,255,0.9);
    --shadow-card-hover: 0 4px 12px rgba(15,23,42,0.10), 0 30px 80px rgba(0,184,158,0.18), inset 0 1px 0 rgba(255,255,255,1);
    --shadow-float: 0 20px 60px rgba(15,23,42,0.18);

    --overlay-strong: rgba(244,246,251,0.94);
    --overlay-mid: rgba(244,246,251,0.65);

    color-scheme: light;
  }
}

:root {
  /* ---- Type ---- */
  --font-display: "Outfit", system-ui, sans-serif;
  --font-heading: "Outfit", system-ui, sans-serif;
  --font-body: "Outfit", system-ui, sans-serif;
  --font-mono: "Outfit", ui-monospace, monospace;

  /* ---- Spacing ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 96px;
  --s-12: 128px;

  /* ---- Radius ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-full: 999px;

  /* ---- Motion ---- */
  --motion-scale: 1;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Layout ---- */
  --max-w: 1280px;
  --gutter: clamp(16px, 4vw, 48px);

  /* ---- Fluid type scale (works across phones → ultrawide) ---- */
  --fs-display: clamp(40px, 5.2vw + 1rem, 96px);
  --fs-h1:      clamp(32px, 4.4vw + 0.5rem, 60px);
  --fs-h2:      clamp(24px, 3.2vw + 0.5rem, 44px);
  --fs-h3:      clamp(18px, 1.4vw + 0.5rem, 26px);
  --fs-lead:    clamp(15px, 0.6vw + 0.6rem, 19px);
  --fs-body:    clamp(15px, 0.3vw + 0.7rem, 17px);
  --fs-small:   clamp(12px, 0.2vw + 0.6rem, 14px);
}

/* Cap content width on ultrawide so the page never feels lost */
@media (min-width: 1600px) {
  :root { --max-w: 1440px; --gutter: clamp(48px, 6vw, 96px); }
}