/* Custom font override for basecoat - Futura PT */
/* This must be loaded after basecoat CSS to override Tailwind's font settings */

/* Using Jost font */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&display=swap');

html,
body,
html *,
body *,
html *::before,
html *::after,
body *::before,
body *::after {
  font-family: 'Futura PT', 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Override Tailwind font utilities */
.font-sans,
.font-serif,
.font-mono,
[class*="font-"] {
  font-family: 'Futura PT', 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Override basecoat component classes */
.btn,
.input,
.select,
.textarea,
.alert,
.card,
.card-header,
.card-body,
.field,
.fieldset,
.label,
.legend,
h1, h2, h3, h4, h5, h6,
p, span, div, section, article,
a, button, input, select, textarea,
table, th, td, tr {
  font-family: 'Futura PT', 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* The mobile shop-admin app has its own iOS-style font system (system UI
   font, for a native-app feel) — carve it out of the marketing site's
   brand-font enforcement above, which otherwise wins on every element. */
.admin-container,
.admin-container *,
.tabbar,
.tabbar * {
  font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif) !important;
}

/* Fix alert text wrapping - force inline display */
.alert {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  display: block !important;
  flex-direction: row !important;
}

.alert *,
.alert span,
.alert p,
.alert div {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  display: inline !important;
  flex-direction: row !important;
}

.alert > * {
  display: inline !important;
}

/* Override any flex/grid on alerts */
.alert-success,
.alert-info,
.alert-warning,
.alert-destructive,
.alert-danger,
.alert-error {
  display: block !important;
  flex-direction: row !important;
  white-space: normal !important;
}

.alert-success *,
.alert-info *,
.alert-warning *,
.alert-destructive *,
.alert-danger *,
.alert-error * {
  display: inline !important;
  white-space: normal !important;
}

/* ============================================================
   STUDIO DOCTORS PALETTE — match marketing site (thestudiodoctors.com)
   Overrides basecoat-css HSL variables.
   Marketing tokens:
     paper       #F2EBDD   ink         #1C1814
     paper-warm  #ECE3D2   ink-soft    #3A332C
     rule        #C9BFA9   oxblood     #8A2A1F  (deep #6B1E15)
   ============================================================ */
:root {
  --background:           41 49% 91%;     /* paper */
  --foreground:           30 17% 9%;      /* ink */
  --card:                 38 41% 87%;     /* paper-warm */
  --card-foreground:      30 17% 9%;
  --popover:              41 49% 91%;
  --popover-foreground:   30 17% 9%;
  --primary:              5 64% 33%;      /* oxblood */
  --primary-foreground:   41 49% 91%;
  --secondary:            38 41% 87%;     /* paper-warm */
  --secondary-foreground: 30 17% 9%;
  --muted:                38 41% 87%;
  --muted-foreground:     30 14% 20%;     /* ink-soft */
  --accent:               5 64% 33%;
  --accent-foreground:    41 49% 91%;
  --destructive:          5 64% 33%;
  --destructive-foreground: 41 49% 91%;
  --border:               41 30% 73%;     /* rule */
  --input:                41 30% 73%;
  --ring:                 5 64% 33%;
  --radius:               2px;            /* marketing site is sharp; small radius keeps form controls usable */
}

/* Body fallback in case basecoat hasn't loaded yet */
body {
  background-color: hsl(41 49% 91%);
  color: hsl(30 17% 9%);
}

/* Subtle paper-grain texture, same as marketing site */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0.18 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.35;
  mix-blend-mode: multiply;
}
/* Make sure interactive content stays above the grain */
.navbar,
.main-container,
nav,
main,
section,
form,
.card,
.btn,
button,
input,
select,
textarea,
a {
  position: relative;
  z-index: 2;
}

/* ---------- Marketing-style buttons ----------
   Excludes the mobile shop-admin's own button classes (btn-mobile-*,
   swipe-action-btn, timer-btn) — that app has its own iOS-style button
   system in admin-mobile.css and shouldn't inherit the marketing site's
   uppercase/letter-spaced/sharp-cornered look. Any NEW admin-mobile.css
   button class needs adding to this :not() list too, or it silently
   inherits the marketing look — bit us three times now. */
.btn,
.btn-primary,
.btn-default,
button[type="submit"]:not(.btn-secondary):not(.btn-outline):not(.btn-ghost):not(.btn-link):not(.btn-mobile-primary):not(.btn-mobile-secondary):not(.swipe-action-btn):not(.timer-btn) {
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  padding: 14px 22px !important;
  border-radius: 2px !important;
  transition: background-color 0.2s ease, transform 0.15s ease !important;
}

.btn-primary,
button[type="submit"]:not(.btn-secondary):not(.btn-outline):not(.btn-ghost):not(.btn-link):not(.btn-mobile-primary):not(.btn-mobile-secondary):not(.swipe-action-btn):not(.timer-btn) {
  background-color: hsl(5 64% 33%) !important;   /* oxblood */
  color: hsl(41 49% 91%) !important;
  border: none !important;
}

.btn-primary:hover,
button[type="submit"]:not(.btn-secondary):not(.btn-outline):not(.btn-ghost):not(.btn-link):not(.btn-mobile-primary):not(.btn-mobile-secondary):not(.swipe-action-btn):not(.timer-btn):hover {
  background-color: hsl(5 67% 25%) !important;   /* oxblood-deep */
  transform: translateY(-1px);
}

.btn-secondary,
.btn-outline {
  background-color: transparent !important;
  color: hsl(30 17% 9%) !important;
  border: 1.5px solid hsl(30 17% 9%) !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  padding: 13px 20px !important;
  border-radius: 2px !important;
}
.btn-secondary:hover,
.btn-outline:hover {
  background-color: hsl(30 17% 9%) !important;
  color: hsl(41 49% 91%) !important;
}

/* ---------- Cards ---------- */
.card,
.intake-card {
  border: 1px solid hsl(41 30% 73%) !important;
  border-radius: 2px !important;
  background-color: hsl(38 41% 87%) !important;
  box-shadow: none !important;
}

/* ---------- Inputs / selects / textareas ---------- */
.input,
.select,
.textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea {
  background-color: hsl(41 49% 91%) !important;
  border: 1px solid hsl(41 30% 73%) !important;
  border-radius: 2px !important;
  color: hsl(30 17% 9%) !important;
  font-size: 15px !important;
}
.input:focus,
.select:focus,
.textarea:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: hsl(5 64% 33%) !important;
  box-shadow: 0 0 0 1px hsl(5 64% 33%) !important;
}

/* ---------- Checkbox (e.g. login "Remember Me") ----------
   Basecoat's own checked-state styling reads --color-primary /
   --color-primary-foreground, which Basecoat itself maps to var(--primary)
   / var(--primary-foreground) — but this site's --primary tokens are bare
   HSL triplets ("5 64% 33%") meant to be wrapped as hsl(var(--primary)),
   not full color values on their own. So Basecoat's background-color:
   var(--color-primary) expands to the invalid "background-color: 5 64%
   33%", which the browser silently drops. Net effect: the checkbox keeps
   toggling correctly under the hood, it just never showed any visible
   checked state ("Remember Me does nothing"). Replace the checked-state
   look entirely with a self-contained checkmark that doesn't depend on
   Basecoat's variable chain. */
:is(.form, .field) input[type="checkbox"]:not([role="switch"]),
.input[type="checkbox"]:not([role="switch"]) {
  position: relative !important;
}
:is(.form, .field) input[type="checkbox"]:not([role="switch"]):checked,
.input[type="checkbox"]:not([role="switch"]):checked {
  border-color: hsl(5 64% 33%) !important;
  background-color: hsl(5 64% 33%) !important;
}
:is(.form, .field) input[type="checkbox"]:not([role="switch"]):checked::after,
.input[type="checkbox"]:not([role="switch"]):checked::after {
  content: "" !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: none !important;
  position: absolute;
  left: 50%;
  top: 42%;
  width: 4px;
  height: 8px;
  border: solid hsl(41 49% 91%);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* The marketing site's paper/ink card + form-field colors above are
   illegible on the shop admin's dark background — re-assert the admin's
   own dark tokens for anything inside it. */
.admin-container .card,
.admin-container .intake-card {
  border-color: hsl(var(--border)) !important;
  background-color: hsl(var(--card)) !important;
}
.admin-container input,
.admin-container select,
.admin-container textarea {
  background-color: hsl(var(--background)) !important;
  border-color: hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
}
.admin-container input:focus,
.admin-container select:focus,
.admin-container textarea:focus {
  border-color: hsl(var(--ring)) !important;
  box-shadow: 0 0 0 1px hsl(var(--ring)) !important;
}

/* ---------- Headings — match marketing wordmark/type rhythm ---------- */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em;
  font-weight: 300;
}
h1 { font-weight: 200; letter-spacing: -0.035em; }

/* ---------- Navbar — inherit marketing wordmark feel ---------- */
.navbar {
  background-color: hsl(41 49% 91% / 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid hsl(41 30% 73%);
}
.navbar-brand {
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 13px !important;
}
.nav-link {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px !important;
}

/* ---------- Labels ---------- */
label, .label {
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: hsl(30 14% 20%) !important;
  font-weight: 500 !important;
}
/* The marketing label color above (dark ink) is illegible on the shop
   admin's dark background — use the admin's own muted-foreground token. */
.admin-container label {
  color: hsl(var(--muted-foreground)) !important;
}