/* DevForm chrome for Cal.com login, app shell, and public booking pages. */

@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

:root {
  --df-forge: #0e0f10;
  --df-forge-deep: #08080a;
  --df-steel-900: #16181a;
  --df-steel-800: #1d2023;
  --df-steel-700: #2a2e32;
  --df-steel-300: #7b7a7a;
  --df-paper: #edede9;
  --df-ember: #e05c15;
  --df-ember-hot: #f5822f;

  --cal-brand: #e05c15 !important;
  --cal-brand-emphasis: #f5822f !important;
  --cal-brand-subtle: #7b7a7a !important;
  --cal-brand-text: #ffffff !important;
  --cal-brand-accent: #ffffff !important;
}

html,
body,
html * {
  --cal-brand: #e05c15 !important;
  --cal-brand-emphasis: #f5822f !important;
  --cal-brand-subtle: #7b7a7a !important;
  --cal-brand-text: #ffffff !important;
  --cal-brand-accent: #ffffff !important;
}

.dark {
  --cal-bg: #0e0f10;
  --cal-bg-subtle: #16181a;
  --cal-bg-muted: #08080a;
  --cal-bg-emphasis: #2a2e32;
  --cal-bg-inverted: #edede9;
  --cal-border: #2a2e32;
  --cal-border-subtle: #2a2e32;
  --cal-border-muted: #1d2023;
  --cal-border-emphasis: #7b7a7a;
  --cal-text: #edede9;
  --cal-text-emphasis: #edede9;
  --cal-text-subtle: #7b7a7a;
  --cal-brand: #e05c15 !important;
  --cal-brand-emphasis: #f5822f !important;
  --cal-brand-text: #ffffff !important;
  --cal-brand-accent: #ffffff !important;
}

html,
body {
  font-family: "IBM Plex Sans", var(--font-sans), Inter, system-ui, sans-serif;
}

h1,
h2,
h3,
h4,
.font-cal {
  font-family: "Chakra Petch", var(--font-cal), "IBM Plex Sans", sans-serif;
}

html:has([data-testid="login-form"]),
html:has(h3.logo) {
  color-scheme: dark;
}

html:has([data-testid="login-form"]) body,
html:has(h3.logo) body,
html:has([data-testid="login-form"]) .bg-subtle,
html:has(h3.logo) .bg-subtle {
  background-color: var(--df-forge) !important;
  color: var(--df-paper);
}

html:has([data-testid="login-form"]) .bg-default,
html:has(h3.logo) .bg-default,
html:has([data-testid="login-form"]) .dark\:bg-cal-muted {
  background-color: var(--df-steel-900) !important;
  border-color: var(--df-steel-700) !important;
  color: var(--df-paper);
}

h3.logo img,
img[src="/api/logo"],
img[src^="/api/logo"] {
  height: 64px !important;
  max-height: 64px !important;
  width: auto !important;
  max-width: 240px;
  filter: none !important;
  -webkit-filter: none !important;
  object-fit: contain;
}

button[data-testid="login-submit"],
button[type="submit"].bg-brand,
.bg-brand,
.bg-brand-default,
[class*="bg-brand"] {
  background-color: var(--df-ember) !important;
  border-color: var(--df-ember) !important;
  color: #fff !important;
}

button[data-testid="login-submit"]:hover,
.bg-brand:hover,
.bg-brand-default:hover,
[class*="bg-brand"]:hover {
  background-color: var(--df-ember-hot) !important;
  border-color: var(--df-ember-hot) !important;
}

a[href*="go.cal.com"],
a[href*="cal.com/booking"],
[data-testid="powered-by-cal"],
[data-testid="powered-by-cal-logo"] {
  display: none !important;
}

::selection {
  background: var(--df-ember);
  color: #fff;
}