/* ==========================================================================
   BOPOIL Toilettage & Boutique — Design Tokens
   Extracted from www.bopoil.ca (Square Online "birdseye" framework,
   theme preset "midnight-green", styleset "square", fontpair "square-market")
   ========================================================================== */

:root {
  /* ---------- BRAND PALETTE ---------- */
  --primary-color:            #000000;  /* site primary — header, footer, dark sections */
  --primary-contrast-color:   #ffffff;  /* text/icons on primary */
  --secondary-contrast-color: #000000;

  /* Derived primary tints/shades used by the theme */
  --primary-bright-dark:  #463939;
  --primary-bright-light: #c6b9b9;
  --primary-subtle-dark:  #301d1d;
  --primary-subtle-light: #f5efef;

  /* Named secondary/accent swatches (original Square IDs kept as comments) */
  --accent-plum:   #b14f7e;  /* --color-secondary-bright-green-gabmPT  — MAIN ACCENT (hero card panel) */
  --accent-cream:  #F2EDE3;  /* --color-secondary-midnight-green-xqtXNE — warm off-white sections */
  --accent-teal:   #1d3c41;  /* --color-secondary-midnight-green-ainlRv */
  --accent-green:  #3b8e54;  /* --color-secondary-VHIwge */
  --accent-orange: #e28a4d;  /* --color-secondary-bright-green-lxwMVW */
  --accent-peach:  #f59d7c;  /* --color-secondary-kzeAgK */
  --accent-gold:   #dabc5c;  /* --color-secondary-kdyjiV */
  --near-black:    #141414;  /* --color-secondary-minimal-black-iojGVX */
  --pure-white:    #ffffff;  /* --color-secondary-uDLqcX */

  /* Neutrals */
  --color-black: #000000;
  --color-white: #ffffff;
  --gray-light-one: #f6f7f9;   /* "Light Neutral" section background */
  --gray-light-two: #ebedef;
  --color-gray-05: #f2f2f2;
  --color-gray-10: #e6e6e6;
  --color-gray-20: #cccccc;
  --color-gray-30: #b3b3b3;
  --color-gray-40: #999999;
  --color-gray-50: #808080;
  --color-gray-60: #666666;
  --color-gray-70: #4d4d4d;
  --color-gray-80: #333333;
  --color-gray-85: #262626;
  --color-neutral-800: #707070;
  --color-neutral-900: #1b1b1b;

  /* Alpha overlays (used for image scrims) */
  --color-black-alpha-30: rgba(0,0,0,.30);
  --color-black-alpha-50: rgba(0,0,0,.50);
  --color-white-alpha-20: rgba(255,255,255,.20);

  /* Status */
  --color-alert:    #ff7734;
  --color-critical: #a12712;
  --color-urgent:   #d92b2b;
  --color-link:     #3374ff;

  /* ---------- TYPOGRAPHY ---------- */
  --headline-font: "Playfair Display", Georgia, serif;   /* h1–h4, titles, callouts, site title */
  --title-font:    "Playfair Display", Georgia, serif;
  --body-font:     "Libre Franklin", Helvetica, Arial, sans-serif;  /* body, labels, buttons, nav */
  --button-font:   "Libre Franklin", Helvetica, Arial, sans-serif;
  --navigation-font: "Libre Franklin", Helvetica, Arial, sans-serif;

  --headline-font-weight: 400;
  --body-font-weight: 400;

  /* Fluid modular type scale.
     baseSize = 16px, ratio = 1.3 at 320px viewport → 1.41 at 1280px viewport.
     Line height starts at 1.5 and multiplies by 0.9 per step up. */
  --base-font-size: 16px;
  --type-ratio-min: 1.3;
  --type-ratio-max: 1.41;

  --font-step--2: clamp(12px, calc(9.47px + 0.13vw),  13.2px);   /* ≈ 16/1.3² */
  --font-step--1: clamp(14px, calc(12.3px + 0.09vw),  15.0px);   /* ≈ 16/1.3  */
  --font-step-0:  16px;                                          /* body */
  --font-step-1:  clamp(20.8px, calc(20.8px + 0.19vw), 22.6px);
  --font-step-2:  clamp(27.0px, calc(27.0px + 0.51vw), 31.8px);
  --font-step-3:  clamp(35.2px, calc(35.2px + 1.03vw), 44.8px);
  --font-step-4:  clamp(45.7px, calc(45.7px + 1.87vw), 63.2px);
  --font-step-5:  clamp(59.4px, calc(59.4px + 3.20vw), 89.1px);
  --font-step-6:  clamp(77.2px, calc(77.2px + 5.30vw), 125.6px);
  --font-step-7:  clamp(100.4px, calc(100.4px + 8.50vw), 177.1px);

  --lh-step-0:  1.5;
  --lh-step-1:  1.35;    /* 1.5 × 0.9   */
  --lh-step-2:  1.215;   /* 1.5 × 0.9²  */
  --lh-step-3:  1.0935;  /* 1.5 × 0.9³  */
  --lh-step-4:  0.984;
  --lh-headline: 1.1;    /* explicit override on headline style */
  --lh-step--1: 1.667;   /* 1.5 / 0.9 */

  /* Navigation links: 14px / 1.58 / 1px tracking / UPPERCASE */
  --nav-font-size: 14px;
  --nav-line-height: 22.1px;
  --nav-letter-spacing: 1px;
  --nav-text-transform: uppercase;

  /* ---------- SHAPE ---------- */
  --button-border-radius:  8px;
  --image-border-radius:   16px;
  --card-border-radius:    4px;   /* theme value; rendered content cards use 0 */
  --default-border-radius: 8px;
  --item-card-border-radius: 2px;
  --item-card-image-border-radius: 8px;
  --checkbox-border-radius: 2px;
  --form-donation-border-radius: 4px;
  --button-style: squared;

  /* ---------- SIZING & SPACING ---------- */
  --button-large-height: 48px;
  --button-small-height: 40px;
  --gutter-column: 16px;
  --gutter-row: 16px;
  --full-width-max-width: 1920px;
  --content-max-width: 1200px;   /* observed content column at 1440px viewport */
  --z-index-header: 3;
  --z-index-block-element: 1;

  /* Section vertical rhythm (measured from rendered pages) */
  --section-pad-y-sm: 48px;
  --section-pad-y-md: 80px;
  --section-pad-y-lg: 120px;

  /* Banner heights (Square "height" prop → rendered) */
  --banner-h-extra-small: 220px;
  --banner-h-small: 420px;
  --banner-h-medium: 560px;
  --banner-h-large: 700px;

  /* Form fields */
  --form-text-color: #000000;
  --form-placeholder-color: rgba(2,1,1,.4);
}

/* ==========================================================================
   COLOR PROFILES
   Square applies one of these per block. Recreate as utility classes.
   ========================================================================== */

/* "primary-bold" — solid black section, white text. Header + footer use this. */
.profile-primary-bold {
  background: var(--primary-color);
  color: var(--pure-white);
  --title-color: var(--pure-white);
  --label-color: var(--pure-white);
  --paragraph-color: var(--pure-white);
  --btn-filled-bg: var(--pure-white);
  --btn-filled-text: var(--primary-color);
  --btn-outline: var(--pure-white);
}

/* "primary-dark-bold" — plum background, cream text. */
.profile-primary-dark-bold {
  background: var(--accent-plum);       /* #b14f7e */
  color: var(--accent-cream);           /* #F2EDE3 */
  --title-color: var(--accent-cream);
  --label-color: var(--accent-cream);
  --paragraph-color: var(--accent-cream);
  --btn-filled-bg: var(--primary-color);
  --btn-filled-text: var(--primary-contrast-color);
  --btn-outline: var(--primary-color);
}

/* "primary-light-neutral" — near-white section, black text. Service list pages. */
.profile-primary-light-neutral {
  background: var(--gray-light-one);    /* #f6f7f9 */
  color: var(--color-black);
  --title-color: var(--color-black);
  --label-color: var(--color-black);
  --paragraph-color: var(--color-black);
  --btn-filled-bg: var(--primary-color);
  --btn-filled-text: var(--primary-contrast-color);
  --btn-outline: var(--primary-color);
}

/* "primary-muted-bold" — warm cream band, used behind gallery carousels. */
.profile-primary-muted-bold {
  background: var(--accent-cream);      /* #F2EDE3 */
  color: var(--color-black);
}

/* ==========================================================================
   BASE / COMPONENT DEFAULTS
   ========================================================================== */

html { font-size: var(--base-font-size); }

body {
  font-family: var(--body-font);
  font-size: var(--font-step-0);
  line-height: var(--lh-step-0);
  font-weight: 400;
  color: var(--color-black);
  background: var(--color-black);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .title, .callout {
  font-family: var(--headline-font);
  font-weight: 400;
  line-height: var(--lh-headline);
  margin: 0;
}

h1 { font-size: var(--font-step-3); }
h2 { font-size: var(--font-step-2); }
h3 { font-size: var(--font-step-1); }
h4 { font-size: var(--font-step-0); }

p { margin: 0 0 1em; }

/* Nav link */
.nav-link {
  font-family: var(--navigation-font);
  font-size: var(--nav-font-size);
  line-height: var(--nav-line-height);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: uppercase;
  color: var(--pure-white);
  text-decoration: none;
}
.nav-link:hover { opacity: .7; }

/* Buttons — "squared" style, 8px radius, 48px tall, Libre Franklin 400 */
.btn {
  font-family: var(--button-font);
  font-size: var(--font-step-0);
  font-weight: 400;
  height: var(--button-large-height);
  padding: 0 24px;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity .18s ease, background .18s ease, color .18s ease;
  text-decoration: none;
}
.btn--filled  { background: var(--btn-filled-bg, #fff); color: var(--btn-filled-text, #000); }
.btn--outline { background: transparent; color: var(--btn-outline, #fff); border-color: var(--btn-outline, #fff); }
.btn--small   { height: var(--button-small-height); }
.btn:hover    { opacity: .85; }

/* Images */
.img-rounded { border-radius: var(--image-border-radius); }

/* Text input / textarea (contact + intake forms) */
.field {
  font-family: var(--body-font);
  font-size: var(--font-step-0);
  color: var(--form-text-color);
  border-radius: var(--default-border-radius);
  border: 1px solid var(--color-gray-20);
  padding: 12px 16px;
  width: 100%;
  background: transparent;
}
.field::placeholder { color: var(--form-placeholder-color); }
/* On dark/plum sections the fields render as black fills with a subtle border */
.profile-primary-dark-bold .field {
  background: rgba(0,0,0,.85);
  color: var(--pure-white);
  border-color: rgba(255,255,255,.25);
}

/* Image scrim used over all photographic banners */
.scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,var(--scrim-opacity, .35));
  pointer-events: none;
}
/* Observed overlayOpacity values: 0.35 (dogs hero, small animals), 0.45 (gallery bg), 0.49 (cats hero) */

/* ==========================================================================
   BREAKPOINTS (Square birdseye)
   ========================================================================== */
/*
  xs  <  480px
  sm  >= 480px
  md  >= 768px
  lg  >= 1024px
  xl  >= 1280px
  Fluid type interpolates between 320px and 1280px viewport.
  Header collapses to a hamburger below 1024px.
*/