/* NATNT brand palette. Loaded after the application and wordmark styles. */
:root,
:root.light,
[data-theme-preset] {
  --natnt-brand: #087f75;
  --natnt-ink: #163b37;
  --natnt-blue: var(--natnt-brand); /* Compatibility with the previous theme. */
  --natnt-action: var(--natnt-brand);
  --natnt-hover: #076a62;
  --background: #f4f8f7;
  --foreground: #163b37;
  --card: #ffffff;
  --card-foreground: #163b37;
  --popover: #ffffff;
  --popover-foreground: #163b37;
  --primary: #087f75;
  --primary-foreground: #ffffff;
  --secondary: #eaf3f1;
  --secondary-foreground: #274b42;
  --muted: #eef5f3;
  --muted-foreground: #5a726c;
  --accent: #e1f2ed;
  --accent-foreground: #075b53;
  --border: #d8e6e2;
  --input: #809e94;
  --ring: #087f75;
  --sidebar: #eef5f1;
  --sidebar-foreground: #294a40;
  --sidebar-primary: #087f75;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #dceee5;
  --sidebar-accent-foreground: #075b53;
  --sidebar-border: #d2e2d9;
  --sidebar-ring: #087f75;
  --info: #087f75;
  --info-foreground: #ffffff;
  --success: #287344;
  --success-foreground: #ffffff;
  --warning: #976313;
  --warning-foreground: #ffffff;
  --destructive: #bc3d49;
  --destructive-foreground: #ffffff;
  --neutral: #60776d;
  --neutral-foreground: #ffffff;
  --chart-1: #087f75;
  --chart-2: #547a92;
  --chart-3: #b98935;
  --chart-4: #9d7796;
  --chart-5: #7a9653;
  --overview-accent-1: #087f75;
  --overview-accent-2: #57968b;
  --overview-accent-3: #9dbbb2;
  --skeleton-base: #e2ece6;
  --skeleton-highlight: #f4f8f5;

  /* Legacy blue utilities are used for informational UI, not provider SVGs. */
  --color-blue-50: #f0f8f4;
  --color-blue-100: #e0f0e8;
  --color-blue-200: #bce2d6;
  --color-blue-300: #8ed0bf;
  --color-blue-400: #54b5a3;
  --color-blue-500: #208e80;
  --color-blue-600: #087f75;
  --color-blue-700: #076a62;
  --color-blue-800: #08554d;
  --color-blue-900: #154139;
  --color-blue-950: #0d2b25;
  --color-sky-50: var(--color-blue-50);
  --color-sky-200: var(--color-blue-200);
  --color-sky-300: var(--color-blue-300);
  --color-sky-400: var(--color-blue-400);
  --color-sky-500: var(--color-blue-500);
  --color-sky-700: var(--color-blue-700);
  --color-sky-900: var(--color-blue-900);
  --color-sky-950: var(--color-blue-950);
  --color-indigo-500: #087f75;
  --color-cyan-300: #9bd6c6;
  --color-cyan-400: #64bfa9;
  --color-cyan-500: #388f7d;
  --color-cyan-700: #23685a;
}

:root.dark,
.dark [data-theme-preset],
[data-theme-preset].dark {
  --natnt-action: #6ed8bd;
  --natnt-hover: #95e5d1;
  --background: #10201c;
  --foreground: #e9f3ed;
  --card: #172b24;
  --card-foreground: #e9f3ed;
  --popover: #1c332b;
  --popover-foreground: #e9f3ed;
  --primary: #6ed8bd;
  --primary-foreground: #09291f;
  --secondary: #233c31;
  --secondary-foreground: #d3e8dc;
  --muted: #20372d;
  --muted-foreground: #abc4b6;
  --accent: #27493a;
  --accent-foreground: #9ae9d2;
  --border: #355345;
  --input: #608772;
  --ring: #6ed8bd;
  --sidebar: #13251e;
  --sidebar-foreground: #d2e6d9;
  --sidebar-primary: #6ed8bd;
  --sidebar-primary-foreground: #09291f;
  --sidebar-accent: #264b39;
  --sidebar-accent-foreground: #9ae9d2;
  --sidebar-border: #304d3d;
  --sidebar-ring: #6ed8bd;
  --info: #6ed8bd;
  --info-foreground: #09291f;
  --success: #91d0a0;
  --success-foreground: #102919;
  --warning: #e8bd72;
  --warning-foreground: #352508;
  --destructive: #f0979d;
  --destructive-foreground: #3a151b;
  --neutral: #abc4b6;
  --neutral-foreground: #10201c;
  --chart-1: #6ed8bd;
  --chart-2: #8ab2c6;
  --chart-3: #dfb76e;
  --chart-4: #c8a2c0;
  --chart-5: #b2c888;
  --overview-accent-1: #6ed8bd;
  --overview-accent-2: #8dc7b4;
  --overview-accent-3: #b4c993;
  --skeleton-base: #264335;
  --skeleton-highlight: #355b47;
  --color-indigo-500: #6ed8bd;
}

/* Override only the legacy brand utility classes, including their hover state. */
[class~="text-[#0064DB]"] { color: var(--primary); }
[class~="bg-[#0064DB]"] {
  background-color: var(--primary);
  color: var(--primary-foreground);
}
@media (hover: hover) {
  [class~="hover:bg-[#0056BD]"]:hover { background-color: var(--natnt-hover); }
}

/* The pricing hero has an inline blue/purple gradient in the shipped bundle. */
div.pointer-events-none[style*="oklch(0.72 0.18 250"] {
  background: radial-gradient(60% 50% at 20% 20%, #087f7580 0%, transparent 70%),
              radial-gradient(50% 40% at 80% 15%, #57968b73 0%, transparent 70%),
              radial-gradient(40% 35% at 50% 70%, #9dbbb240 0%, transparent 70%) !important;
}
.dark div.pointer-events-none[style*="oklch(0.72 0.18 250"] {
  background: radial-gradient(60% 50% at 20% 20%, #6ed8bd99 0%, transparent 70%),
              radial-gradient(50% 40% at 80% 15%, #8dc7b480 0%, transparent 70%),
              radial-gradient(40% 35% at 50% 70%, #b4c99359 0%, transparent 70%) !important;
}

html { accent-color: var(--primary); }
::selection { background: #087f7529; color: #163b37; }
.dark ::selection { background: #6ed8bd45; color: #e9f3ed; }
input::placeholder, textarea::placeholder { color: var(--muted-foreground); }
:root:not(.dark) footer span[aria-label="NATNT"] { filter: none; }


/* V2: preserve the teal shield, opaque white N and pale backing in every mode. */
:root { --natnt-paper: #f4f8f7; }
a:has(img[src*="natnt-mark"]) { background-color: var(--natnt-paper); border-radius: 9px; padding: 5px 8px; }
img[src*="natnt-mark"], .dark img[src*="natnt-mark"] { filter: none !important; }
.dark span[aria-label="NATNT"], footer span[aria-label="NATNT"], .dark a:has(img[src*="natnt-mark"]) > h1, .dark a:has(> div > img[src*="natnt-mark"]) > span:not([aria-label]) { filter: none; }