/* Brand-first palette for light & dark themes
   - Accent base: #11C5C6 (teal/cyan)
   - Works with [data-theme="dark"] OR automatic @media switch
   - Use semantic tokens (e.g., --bg, --fg, --link) instead of raw colors.
*/

:root {
  --ff-comfortaa:
    "Comfortaa", ui-rounded, "Montserrat", system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  --ff-montserrat:
    "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";

  --ff-open-sans:
    "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";

  --ff-inter:
    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";

  --ff-quicksand:
    "Quicksand", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";

  --ff-roboto:
    "Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";

  /* ========== Brand accent scale (precomputed tints/shades) ========== */
  --accent-50: #e7f9f9;
  --accent-100: #cff3f4;
  --accent-200: #a0e8e8;
  --accent-300: #70dcdd;
  --accent-400: #41d1d1;
  --accent-500: #11c5c6; /* brand base */
  --accent-600: #0ea7a8;
  --accent-700: #0c8a8b;
  --accent-800: #096c6d; /* good link color on light surfaces (AA) */
  --accent-900: #074f4f;

  --logo-accent: var(--accent-500);
  --logo-three-base-color: #f6faff;
  --logo-three-base-opacity: 1;
  --logo-three-emissive-color: rgba(255, 255, 255, 0.9);
  --logo-three-emissive-intensity: 2.1;
  --logo-three-metalness: 0.35;
  --logo-three-roughness: 0.28;
  --customers-clock-base-color: #ffffff;
  --customers-clock-rim-color: #000000;
  --customers-clock-hour-hand-color: #000000;
  --customers-clock-minute-hand-color: #000000;
  --customers-clock-pin-color: #ffffff;
  --customers-clock-halo-inner: rgba(0, 0, 0, 0.36);
  --customers-clock-halo-outer: rgba(0, 0, 0, 0.18);
  --customers-clock-shadow-color: rgba(12, 28, 31, 0.22);
  --customers-clock-halo-opacity: 0.85;
  --customers-clock-halo-filter: saturate(1.02) blur(0.18px);

  /* ========== Neutral slate (cool, slightly blue/green) ========== */
  --neutral-50: #f7fafa;
  --neutral-100: #eef4f5;
  --neutral-200: #dae4e6;
  --neutral-300: #bccad0;
  --neutral-400: #9aa9b1;
  --neutral-500: #74858e;
  --neutral-600: #5c6c74;
  --neutral-700: #445258;
  --neutral-800: #2d383c;
  --neutral-900: #171c1f;

  /* ========== Light theme semantics ========== */
  --bg: var(--neutral-50);
  --surface: #ffffff;
  --surface-2: var(--neutral-100);
  --border: var(--neutral-200);
  --fg: #000000; /* near-black “ink” */
  --fg-muted: #5a6b73;

  --link: var(--accent-800); /* meets 4.5:1 on white */
  --link-hover: var(--accent-700);
  --ring: var(--accent-500);
  --eyebrow-letter-spacing: 0.28em;
  --eyebrow-color: color-mix(in srgb, var(--fg) 88%, var(--accent-700) 12%);

  /* Accent surfaces (e.g., primary buttons) */
  --accent: var(--accent-500);
  --on-accent: #000000; /* darker than black works well across states */

  /* Subtle accent UI (chips, tags, callouts) */
  --accent-soft-bg: var(--accent-50);
  --accent-soft-fg: var(--accent-800);
  --pillars-header-fg: #ffffff;
  --header-overlap: clamp(3.25rem, 6vw, 4.75rem);
  --header-overlap-extra: clamp(0.75rem, 1.8vw, 1.25rem);
  --header-outer-gap: clamp(0.75rem, 2vw, 1.25rem);
  --header-glass-bg: rgba(255, 255, 255, 0.12);
  --header-glass-border: color-mix(
    in srgb,
    rgba(255, 255, 255, 0.36) 18%,
    rgba(17, 197, 198, 0.14)
  );
  --header-glass-shadow: 0 18px 48px -28px
    color-mix(in srgb, var(--fg) 8%, transparent);

  /* Hero theming */
  --hero-base-tone: color-mix(in srgb, var(--bg) 94%, rgba(12, 28, 31, 0.08));
  --hero-overlay-top: rgba(12, 28, 31, 0.35);
  --hero-overlay-bottom: rgba(247, 250, 250, 0.98);
  --hero-content-anchor-manual-offset: -40px;
  --hero-fg: var(--fg);
  --hero-subtitle-color: #000000;
  --hero-emphasis-base: #c61211; /* complement to brand accent */
  --hero-emphasis-color: var(--hero-emphasis-base);
  --hero-emphasis-glow: rgba(198, 18, 17, 0.38);
  --hero-eyebrow-shadow: 0 4px 16px rgba(255, 255, 255, 0.4);
  /* Hero chroma sweep tokens are consolidated in styles.css */

  --contact-plasma-opacity: 0.72;
  --contact-plasma-color: #a2f2ff;
  --contact-plasma-fallback: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(236, 252, 255, 0.92) 44%,
    rgba(193, 241, 250, 0.78) 72%,
    rgba(146, 225, 242, 0.55) 100%
  );
  --contact-pattern-primary: #dbeff1;
  --contact-pattern-secondary: #b6e4e9;
  --contact-pattern-tertiary: #62c3cd;
  --contact-pattern-quaternary: #0b7784;

  /* ========== FAQ background pattern ========== */
  --faq-background-top: #dbeff1;
  --faq-pattern-primary: #dbeff1;
  --faq-pattern-secondary: #b6e4e9;
  --faq-pattern-tertiary: #62c3cd;
  --faq-pattern-quaternary: #0b7784;
  --faq-overlay-top: rgba(219, 239, 241, 0.42);
  --faq-overlay-bottom: rgba(15, 62, 69, 0.56);
  --faq-gradient-stop-0: rgba(219, 239, 241, 0.42);
  --faq-gradient-stop-1: rgba(219, 239, 241, 0.22);
  --faq-gradient-stop-2: rgba(219, 239, 241, 0.1);
  --faq-radial-inner: rgba(219, 239, 241, 0.26);
  --faq-radial-middle: rgba(102, 189, 198, 0.18);
  --faq-overlay-soft: rgba(219, 239, 241, 0.18);
  --faq-overlay-mid: rgba(28, 104, 114, 0.24);
  --faq-overlay-strong: rgba(15, 62, 69, 0.48);
  --faq-card-flat-bg: #ffffff;
  --faq-card-flat-border: rgba(15, 23, 42, 0.08);
  --faq-card-flat-shadow: 0 24px 60px -40px rgba(15, 23, 42, 0.4);
  --faq-card-flat-heading: color-mix(in srgb, var(--fg) 92%, var(--fg-muted) 8%);
  --faq-card-flat-body: color-mix(in srgb, var(--fg) 78%, var(--fg-muted) 22%);
  --faq-card-flat-muted: color-mix(in srgb, var(--fg-muted) 85%, var(--fg) 15%);
  --faq-card-flat-badge-bg: rgba(65, 105, 225, 0.14);
  --faq-card-flat-badge-fg: color-mix(in srgb, var(--accent-800) 80%, var(--fg) 20%);
  --faq-card-flat-divider: rgba(15, 23, 42, 0.08);
  /* ========== Customers section ========== */
  --customers-pillar-gap: clamp(1.1rem, 1.6vw, 1.65rem);
  --customers-proof-bg: color-mix(in srgb, var(--accent-50) 50%, var(--surface) 50%);
  --customers-kpi-color: var(--accent-800);
  --customers-cta-sticky-offset: 1rem;
  /* ========== Pillars section ========== */
  --pillars-header-fg: #ffffff;
}

/* Prefer automatic dark mode; you can also force with [data-theme="dark"] */
@media (prefers-color-scheme: dark) {
  :root {
    /* ========== Dark theme semantics ========== */
    --bg: #0b1214; /* blue-black */
    --surface: #0f1719;
    --surface-2: #132024;
    --border: #22363c;
    --fg: #e8f1f2; /* ink for dark */
    --fg-muted: #a8bec4;

    /* Links & accents pop more; lighter shades are nicer here */
    --link: var(--accent-400); /* 10:1 vs bg — very legible */
    --link-hover: var(--accent-300);
    --ring: var(--accent-400);

    /* Primary/CTA in dark */
    --accent: var(--accent-500); /* still great in dark */
    --on-accent: #0b1214;

    /* Subtle accent UI in dark */
    --accent-soft-bg: var(--accent-900);
    --accent-soft-fg: var(--accent-300);
    --header-overlap: clamp(3.25rem, 6vw, 4.75rem);
    --header-overlap-extra: clamp(0.75rem, 1.8vw, 1.25rem);
    --header-outer-gap: clamp(0.75rem, 2vw, 1.25rem);
    --header-glass-bg: color-mix(
      in srgb,
      var(--surface) 18%,
      rgba(8, 18, 20, 0.4)
    );
    --header-glass-border: color-mix(
      in srgb,
      rgba(64, 128, 132, 0.42) 38%,
      transparent
    );
    --header-glass-shadow: 0 26px 64px -34px
      color-mix(in srgb, var(--fg) 20%, transparent);

    /* Hero theming */
    --hero-base-tone: color-mix(in srgb, var(--bg) 55%, rgba(3, 8, 10, 0.65));
    --hero-overlay-top: rgba(6, 14, 16, 0.6);
    --hero-overlay-bottom: rgba(3, 8, 10, 0.9);
    --hero-fg: var(--fg);
    --hero-subtitle-color: var(--fg);
    --hero-emphasis-base: #c61211; /* complement to brand accent */
    --hero-emphasis-color: var(--hero-emphasis-base);
    --hero-emphasis-glow: rgba(198, 18, 17, 0.42);
    --hero-eyebrow-shadow: 0 4px 16px rgba(255, 255, 255, 0.4);
    /* Hero chroma sweep tokens are consolidated in styles.css */
    --logo-three-base-color: #eaf0ff;
    --logo-three-base-opacity: 1;
    --logo-three-emissive-color: rgba(55, 88, 255, 0.95);
    --logo-three-emissive-intensity: 2.8;
    --logo-three-metalness: 0.42;
    --logo-three-roughness: 0.26;
    --customers-clock-base-color: #0b5056;
    --customers-clock-rim-color: #e8f1f2;
    --customers-clock-hour-hand-color: #e8f1f2;
    --customers-clock-minute-hand-color: #e8f1f2;
    --customers-clock-pin-color: #e8f1f2;
    --customers-clock-halo-inner: rgba(232, 241, 242, 0.85);
    --customers-clock-halo-outer: rgba(168, 190, 196, 0.62);
    --customers-clock-shadow-color: rgba(4, 20, 24, 0.85);
    --customers-clock-halo-opacity: 1;
    --customers-clock-halo-filter: saturate(1.22) blur(0.35px);

    --contact-plasma-opacity: 0.65;
    --contact-plasma-color: #70dcdd;
    --contact-plasma-fallback: linear-gradient(
      135deg,
      rgba(112, 220, 221, 0.32) 0%,
      rgba(12, 106, 109, 0.24) 52%,
      rgba(7, 79, 79, 0.4) 100%
    );
    --contact-pattern-primary: #0e2b31;
    --contact-pattern-secondary: #0f434a;
    --contact-pattern-tertiary: #0e6c73;
    --contact-pattern-quaternary: #36c2c6;

    --faq-background-top: #7eb3b9;
    --faq-pattern-primary: #7eb3b9;
    --faq-pattern-secondary: #4f8f98;
    --faq-pattern-tertiary: #2f6f7b;
    --faq-pattern-quaternary: #1f5865;
    --faq-overlay-top: rgba(126, 179, 185, 0.55);
    --faq-overlay-bottom: rgba(9, 30, 35, 0.7);
    --faq-gradient-stop-0: rgba(126, 179, 185, 0.46);
    --faq-gradient-stop-1: rgba(126, 179, 185, 0.28);
    --faq-gradient-stop-2: rgba(126, 179, 185, 0.14);
    --faq-radial-inner: rgba(85, 149, 159, 0.32);
    --faq-radial-middle: rgba(54, 110, 120, 0.26);
    --faq-overlay-soft: rgba(126, 179, 185, 0.26);
    --faq-overlay-mid: rgba(29, 73, 83, 0.34);
    --faq-overlay-strong: rgba(7, 30, 36, 0.62);
    --faq-card-flat-bg: #111417;
    --faq-card-flat-border: rgba(255, 255, 255, 0.08);
    --faq-card-flat-shadow: 0 24px 60px -40px rgba(0, 0, 0, 0.8);
    --faq-card-flat-heading: rgba(246, 249, 255, 0.96);
    --faq-card-flat-body: rgba(223, 230, 240, 0.88);
    --faq-card-flat-muted: rgba(172, 183, 196, 0.66);
    --faq-card-flat-badge-bg: rgba(86, 112, 255, 0.22);
    --faq-card-flat-badge-fg: rgba(235, 242, 255, 0.95);
    --faq-card-flat-divider: rgba(255, 255, 255, 0.08);

    /* ========== Customers section (dark mode) ========== */
    --customers-proof-bg: color-mix(in srgb, var(--accent-900) 50%, var(--surface) 50%);
    --customers-kpi-color: var(--accent-300);
    --pillars-header-fg: var(--fg);
  }
}

/* Optional: support an explicit theme switcher */
:root[data-theme="light"],
[data-theme="light"] {
  color-scheme: light;
  --bg: var(--neutral-50);
  --surface: #ffffff;
  --surface-2: var(--neutral-100);
  --border: var(--neutral-200);
  --fg: #0b1214;
  --fg-muted: #5a6b73;
  --link: var(--accent-800);
  --link-hover: var(--accent-700);
  --ring: var(--accent-500);
  --accent: var(--accent-500);
  --on-accent: #0b1214;
  --accent-soft-bg: var(--accent-50);
  --accent-soft-fg: var(--accent-800);
  --pillars-header-fg: #ffffff;
  --header-overlap: clamp(3.25rem, 6vw, 4.75rem);
  --header-overlap-extra: clamp(0.75rem, 1.8vw, 1.25rem);
  --header-outer-gap: clamp(0.75rem, 2vw, 1.25rem);
  --header-glass-bg: rgba(255, 255, 255, 0.12);
  --header-glass-border: color-mix(
    in srgb,
    rgba(255, 255, 255, 0.36) 18%,
    rgba(17, 197, 198, 0.14)
  );
  --header-glass-shadow: 0 18px 48px -28px
    color-mix(in srgb, var(--fg) 8%, transparent);
  --hero-base-tone: color-mix(in srgb, var(--bg) 94%, rgba(12, 28, 31, 0.08));
  --hero-overlay-top: rgba(12, 28, 31, 0.35);
  --hero-overlay-bottom: rgba(247, 250, 250, 0.98);
  --hero-fg: var(--fg);
  --hero-subtitle-color: #000000;
  --hero-emphasis-base: #c61211;
  --hero-emphasis-color: var(--hero-emphasis-base);
  --hero-emphasis-glow: rgba(198, 18, 17, 0.38);
  --hero-eyebrow-shadow: 0 4px 16px rgba(255, 255, 255, 0.4);
  --section-wave-bridge-light: color-mix(
    in srgb,
    var(--accent-500) 70%,
    var(--accent-700) 30%
  );
  --logo-three-base-color: #f6faff;
  --logo-three-base-opacity: 1;
  --logo-three-emissive-color: rgba(255, 255, 255, 0.9);
  --logo-three-emissive-intensity: 2.1;
  --logo-three-metalness: 0.35;
  --logo-three-roughness: 0.28;
  --customers-clock-base-color: #ffffff;
  --customers-clock-rim-color: #000000;
  --customers-clock-hour-hand-color: #000000;
  --customers-clock-minute-hand-color: #000000;
  --customers-clock-pin-color: #ffffff;
  --customers-clock-halo-inner: rgba(0, 0, 0, 0.36);
  --customers-clock-halo-outer: rgba(0, 0, 0, 0.18);
  --customers-clock-shadow-color: rgba(12, 28, 31, 0.22);
  --customers-clock-halo-opacity: 0.85;
  --customers-clock-halo-filter: saturate(1.02) blur(0.18px);
  --faq-background-top: #a0e8e8;
  --faq-pattern-primary: #f1fcfd;
  --faq-pattern-secondary: #89dfe3;
  --faq-pattern-tertiary: #3ab5c6;
  --faq-pattern-quaternary: #0c7c8a;
  --faq-overlay-top: rgba(160, 232, 232, 0.35);
  --faq-overlay-bottom: rgba(15, 62, 69, 0.56);
  --faq-gradient-stop-0: rgba(160, 232, 232, 0.4);
  --faq-gradient-stop-1: rgba(160, 232, 232, 0.22);
  --faq-gradient-stop-2: rgba(160, 232, 232, 0.1);
  --faq-radial-inner: rgba(160, 232, 232, 0.26);
  --faq-radial-middle: rgba(70, 174, 184, 0.18);
  --faq-overlay-soft: rgba(160, 232, 232, 0.16);
  --faq-overlay-mid: rgba(28, 104, 114, 0.22);
  --faq-overlay-strong: rgba(12, 66, 74, 0.48);
  --faq-card-flat-bg: #ffffff;
  --faq-card-flat-border: rgba(15, 23, 42, 0.08);
  --faq-card-flat-shadow: 0 24px 60px -40px rgba(15, 23, 42, 0.4);
  --faq-card-flat-heading: color-mix(in srgb, var(--fg) 92%, var(--fg-muted) 8%);
  --faq-card-flat-body: color-mix(in srgb, var(--fg) 78%, var(--fg-muted) 22%);
  --faq-card-flat-muted: color-mix(in srgb, var(--fg-muted) 85%, var(--fg) 15%);
  --faq-card-flat-badge-bg: rgba(65, 105, 225, 0.14);
  --faq-card-flat-badge-fg: color-mix(in srgb, var(--accent-800) 80%, var(--fg) 20%);
  --faq-card-flat-divider: rgba(15, 23, 42, 0.08);
  /* Hero chroma sweep tokens are consolidated in styles.css */
}

:root[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1214;
  --surface: #0f1719;
  --surface-2: #132024;
  --border: #22363c;
  --fg: #e8f1f2;
  --fg-muted: #a8bec4;
  --link: var(--accent-400);
  --link-hover: var(--accent-300);
  --ring: var(--accent-400);
  --accent: var(--accent-500);
  --on-accent: #0b1214;
  --accent-soft-bg: var(--accent-900);
  --accent-soft-fg: var(--accent-300);
  --pillars-header-fg: var(--fg);
  --header-overlap: clamp(3.25rem, 6vw, 4.75rem);
  --header-overlap-extra: clamp(0.75rem, 1.8vw, 1.25rem);
  --header-outer-gap: clamp(0.75rem, 2vw, 1.25rem);
  --header-glass-bg: color-mix(
    in srgb,
    var(--surface) 18%,
    rgba(8, 18, 20, 0.4)
  );
  --header-glass-border: color-mix(
    in srgb,
    rgba(64, 128, 132, 0.42) 38%,
    transparent
  );
  --header-glass-shadow: 0 26px 64px -34px
    color-mix(in srgb, var(--fg) 20%, transparent);
  --hero-base-tone: color-mix(in srgb, var(--bg) 55%, rgba(3, 8, 10, 0.65));
  --hero-overlay-top: rgba(6, 14, 16, 0.6);
  --hero-overlay-bottom: rgba(3, 8, 10, 0.9);
  --hero-fg: var(--fg);
  --hero-subtitle-color: var(--fg);
  --hero-emphasis-base: #c61211;
  --hero-emphasis-color: var(--hero-emphasis-base);
  --hero-emphasis-glow: rgba(198, 18, 17, 0.42);
  --hero-eyebrow-shadow: 0 4px 16px rgba(255, 255, 255, 0.4);
  --section-wave-bridge-dark: color-mix(
    in srgb,
    var(--accent-600) 55%,
    var(--neutral-800) 45%
  );
  --logo-three-base-color: #eaf0ff;
  --logo-three-base-opacity: 1;
  --logo-three-emissive-color: rgba(55, 88, 255, 0.95);
  --logo-three-emissive-intensity: 2.8;
  --logo-three-metalness: 0.42;
  --logo-three-roughness: 0.26;
  --customers-clock-base-color: #0b5056;
  --customers-clock-rim-color: #e8f1f2;
  --customers-clock-hour-hand-color: #e8f1f2;
  --customers-clock-minute-hand-color: #e8f1f2;
  --customers-clock-pin-color: #e8f1f2;
  --customers-clock-halo-inner: rgba(232, 241, 242, 0.85);
  --customers-clock-halo-outer: rgba(168, 190, 196, 0.62);
  --customers-clock-shadow-color: rgba(4, 20, 24, 0.85);
  --customers-clock-halo-opacity: 1;
  --customers-clock-halo-filter: saturate(1.22) blur(0.35px);
  --faq-background-top: #213940;
  --faq-pattern-primary: #0b1f24;
  --faq-pattern-secondary: #15414c;
  --faq-pattern-tertiary: #1e5f6e;
  --faq-pattern-quaternary: #2a8396;
  --faq-overlay-top: rgba(33, 57, 64, 0.55);
  --faq-overlay-bottom: rgba(9, 30, 35, 0.7);
  --faq-gradient-stop-0: rgba(33, 57, 64, 0.42);
  --faq-gradient-stop-1: rgba(33, 57, 64, 0.24);
  --faq-gradient-stop-2: rgba(33, 57, 64, 0.12);
  --faq-radial-inner: rgba(46, 94, 108, 0.3);
  --faq-radial-middle: rgba(28, 78, 90, 0.26);
  --faq-overlay-soft: rgba(33, 57, 64, 0.24);
  --faq-overlay-mid: rgba(18, 60, 70, 0.32);
  --faq-overlay-strong: rgba(8, 35, 40, 0.6);
  --faq-card-flat-bg: #111417;
  --faq-card-flat-border: rgba(255, 255, 255, 0.08);
  --faq-card-flat-shadow: 0 24px 60px -40px rgba(0, 0, 0, 0.8);
  --faq-card-flat-heading: rgba(246, 249, 255, 0.96);
  --faq-card-flat-body: rgba(223, 230, 240, 0.88);
  --faq-card-flat-muted: rgba(172, 183, 196, 0.66);
  --faq-card-flat-badge-bg: rgba(86, 112, 255, 0.22);
  --faq-card-flat-badge-fg: rgba(235, 242, 255, 0.95);
  --faq-card-flat-divider: rgba(255, 255, 255, 0.08);
  /* Hero chroma sweep tokens are consolidated in styles.css */
}

/* Example element mappings (use semantic tokens) */
body {
  background: var(--bg);
  color: var(--fg);
}
a {
  color: var(--link);
  text-decoration: none;
}
a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

.button-primary {
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid transparent;
}
.button-primary:hover {
  filter: brightness(0.96);
}
.button-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
}

/* SVG logo: use currentColor for fills so it adapts to theme */

.font-comfortaa {
  font-family: var(--ff-comfortaa);
  font-optical-sizing: auto;
}
.font-montserrat {
  font-family: var(--ff-montserrat);
  font-optical-sizing: auto;
}
.font-open-sans {
  font-family: var(--ff-open-sans);
  font-optical-sizing: auto;
}
.font-roboto {
  font-family: var(--ff-roboto);
  font-optical-sizing: auto;
}

/* Cross-platform text rendering (mac + Windows) */
.antialiased {
  /* macOS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* All platforms (helps Windows): real kerning/ligatures, no faux styles */
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings:
    "kern" 1,
    "liga" 1,
    "calt" 1;
  font-synthesis: none; /* avoid faux bold/italic on Windows */
  font-optical-sizing: auto; /* variable-font optical sizing when available */

  /* Non-standard; harmless no-op in most browsers, helps some Safari builds */
  font-smooth: always;
}

/* Revert helper if needed on a specific element */

/* Apply smoothing to your font utilities by default */
.font-montserrat,
.font-open-sans,
.font-roboto {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings:
    "kern" 1,
    "liga" 1,
    "calt" 1;
  font-synthesis: none;
  font-optical-sizing: auto;
}

/* (Optional) make it global for UI text */
body,
input,
textarea,
select,
button {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings:
    "kern" 1,
    "liga" 1,
    "calt" 1;
  font-synthesis: none;
  font-optical-sizing: auto;
}

/* ========== Custom Scrollbars ========== */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--neutral-300) var(--neutral-100);
}

[data-theme="dark"] * {
  scrollbar-color: var(--neutral-600) var(--neutral-800);
}

/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--neutral-100);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: var(--neutral-300);
  border-radius: 5px;
  border: 2px solid var(--neutral-100);
  transition: background 150ms ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-400);
}

::-webkit-scrollbar-corner {
  background: var(--neutral-100);
}

/* Dark mode scrollbars */
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--neutral-800);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--neutral-600);
  border-color: var(--neutral-800);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--accent-500);
}

[data-theme="dark"] ::-webkit-scrollbar-corner {
  background: var(--neutral-800);
}