/* Podrelay: light surfaces and the existing gold identity, with a dark option. */
:root {
  color-scheme: light;
  --charcoal: #1C1F23;
  --white: #FFFFFF;
  /* Light mode uses the richer, less yellow shade of the brand gold; dark mode
     keeps #F4A915 (set below). Matches the website's apple.css tokens. */
  --amber: #E8960F;
  --amber-dark: #9A5F00;
  --background: #FFFFFF;
  --foreground: #1C1F23;
  --card: #FFFFFF;
  --card-foreground: #1C1F23;
  --popover: #FFFFFF;
  --popover-foreground: #1C1F23;
  --secondary: #F2F3F5;
  --secondary-foreground: #5B636E;
  --muted-surface: #F2F3F5;
  --muted-foreground: #5B636E;
  --border: #DDE1E6;
  --input: #DDE1E6;
  --primary: #E8960F;
  --primary-foreground: #1C1F23;
  --action-background: #E8960F;
  --action-hover: #D48406;
  --link: #9A5F00;
  --accent: #FFF4DF;
  --accent-foreground: #9A5F00;
  --ring: #9A5F00;
  --sidebar-background: #F2F3F5;
  --chart-1: #E8960F;
  --chart-2: #9A5F00;
  --chart-3: #C68A30;
  --chart-4: #5B636E;
  --chart-5: #1C1F23;
  --success: #1E8E5A;
  --error: #C8372D;
  --destructive: var(--error);
  --dark-background: #1C1F23;
  --dark-foreground: #FFFFFF;
  --dark-muted-foreground: #A3AAB3;
  --dark-border: #3E434A;
  --font-sans: "Poppins", system-ui, sans-serif;
  --font-serif: var(--font-sans);
  --font-mono: var(--font-sans);
  --radius: 8px;
  --shadow-md: 0 12px 32px rgba(28,31,35,.08);
  --header-background: rgba(255,255,255,.95);
  --gold: linear-gradient(135deg,#E8960F 0%,#F3AC38 48%,#D48406 100%);
  /* Compatibility aliases used by the existing page components. */
  --blue: var(--primary);
  --blue-hover: var(--action-hover);
  --blue-tint: var(--accent);
  --text-muted: var(--muted-foreground);
  --grey-bg: var(--secondary);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  /* Dark mode keeps the brighter original gold. */
  --amber: #F4A915;
  --primary: #F4A915;
  --action-background: #F4A915;
  --action-hover: #E99A08;
  --chart-1: #F4A915;
  --background: #0D0C0A;
  --foreground: #EDE7DA;
  --card: #14120E;
  --card-foreground: #EDE7DA;
  --popover: #1A1712;
  --popover-foreground: #EDE7DA;
  --secondary: #090806;
  --secondary-foreground: #A3AAB3;
  --muted-surface: #1A1712;
  --muted-foreground: #A3AAB3;
  --border: #2B2820;
  --input: #3E3A31;
  --link: #F4A915;
  --accent: #342815;
  --accent-foreground: #F2C784;
  --ring: #F4A915;
  --sidebar-background: #11100D;
  --chart-2: #F2C784;
  --chart-3: #C68A30;
  --chart-4: #A3AAB3;
  --chart-5: #EDE7DA;
  --header-background: rgba(13,12,10,.95);
  --shadow-md: 0 12px 32px rgba(0,0,0,.28);
  --gold: linear-gradient(135deg,#F4A915 0%,#FFBD38 48%,#E99A08 100%);
}

/* Reuse the transparent brand mark with the palette of its surrounding UI. */
@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
  :is(.site-header, .site-footer) :is(.wordmark-glyph, .mark) { position: relative; }
  :is(.site-header, .site-footer) :is(.wordmark-glyph, .mark) img { opacity: 0; }
  :is(.site-header, .site-footer) :is(.wordmark-glyph, .mark)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--amber);
    -webkit-mask: url("/assets/branding/pod-infrastructure-flow-plug-v3-amber.png") center / contain no-repeat;
    mask: url("/assets/branding/pod-infrastructure-flow-plug-v3-amber.png") center / contain no-repeat;
  }
}
.pi-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 44px; padding: 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--foreground); cursor: pointer;
}
.pi-theme-toggle svg { width: 20px; height: 20px; }
.pi-theme-toggle:hover { background: var(--accent); border-color: var(--link); }
.pi-theme-toggle:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.site-header .wordmark { margin-right: auto; }
.site-header .nav, .site-header .header-nav { margin-left: auto; }
.header-inner > .pi-theme-toggle { margin-left: .2rem; }
/* One booking button across public pages, headers and the mobile sticky bar. */
:root body a[href="https://cal.com/podrelay/30min"]:is(.btn, .button, .pi-btn) {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .8rem 1.35rem;
  border: 1px solid var(--amber); border-radius: 4px;
  background: var(--gold); background-size: 100% 100%;
  color: var(--charcoal); font-family: var(--font-sans);
  font-size: .8rem; font-weight: 600; line-height: 1.2;
  letter-spacing: 0; text-transform: none; text-decoration: none;
  text-align: center; white-space: nowrap;
  box-shadow: 0 10px 30px -12px rgba(244,169,21,.4);
  transition: background-position .2s ease, box-shadow .2s ease;
}
:root body a[href="https://cal.com/podrelay/30min"]:is(.btn, .button, .pi-btn):hover {
  background: var(--gold); background-size: 100% 100%; background-position: 100% 50%;
  border-color: var(--amber); color: var(--charcoal); transform: none; filter: none;
  box-shadow: 0 12px 30px -12px rgba(244,169,21,.55);
}
:root body a[href="https://cal.com/podrelay/30min"]:is(.btn, .button, .pi-btn):focus-visible {
  outline: 2px solid var(--ring); outline-offset: 3px;
}
@media (max-width:480px) {
  :root body a[href="https://cal.com/podrelay/30min"]:is(.btn, .button, .pi-btn) {
    min-height: 44px; padding: .7rem .9rem; font-size: .75rem;
  }
}
@media (max-width:480px) {
  .site-header .header-inner { gap: .5rem; }
  .site-header .header-nav > a[href$="insights/"] { display: none; }
  .site-header .header-nav .button { min-height: 40px; padding: .6rem .65rem; font-size: .6rem; white-space: nowrap; }
}