/*!
 * Doan Tattoo Studio — compiled stylesheet. GENERATED, do not edit by hand.
 *
 * Assembled by tools/build-theme.js from:
 *   1. self-hosted webfonts (Inter + Oswald; the comp loaded both from CDNs)
 *   2. the Subtle design-system tokens shipped with the comp
 *   3. the comp's authored CSS, verbatim
 *   4. the hover/focus/active rules the comp generated at runtime
 *   5. progressive enhancements (smooth anchors, focus rings, reduced motion)
 */

/* ============ 1. Webfonts (self-hosted) ============ */
@font-face {
  font-family: 'InterVariable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-latin.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-latin.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('../fonts/oswald-var-latin.woff2') format('woff2-variations');
}

/* ============ 2. Design-system tokens ============ */
/* ---- tokens/colors.css ---- */
/* Subtle — color tokens.
   Base tokens name the raw hue; semantic aliases below name the role.
   Prefer the semantic alias in product code; reach for a base token only when no alias fits. */
:root {
  /* ── Brand & accent ─────────────────────────────── */
  --primary: #6558d9;             /* signature indigo CTA */
  --primary-deep: #5146b8;        /* gradient mid-stop / hover */
  --primary-press: #3d357f;       /* pressed lift */
  --primary-soft: #8176e8;        /* product-UI accent, chart highlight */
  --primary-subdued: #dad7f7;     /* pale indigo tag fill */
  --brand-dark-900: #20233f;      /* featured tier + dashboard chrome */
  --ruby: #d95b7f;                /* gradient accent / chart — never a button */
  --magenta: #c77bcb;             /* brighter gradient stop */
  --lemon: #a77942;               /* warm sherbet gradient stop */

  /* ── Ink (text) ─────────────────────────────────── */
  --ink: #172033;                 /* deep navy — body text, never pure black */
  --ink-secondary: #334155;
  --ink-mute: #6b7280;
  --ink-mute-2: #667085;          /* nav-weight mute */
  --on-primary: #ffffff;

  /* ── Surface ────────────────────────────────────── */
  --canvas: #ffffff;
  --canvas-soft: #f7f8fb;         /* cool off-white feature band */
  --canvas-cream: #f4ecdd;        /* warm interlude band */

  /* ── Line ───────────────────────────────────────── */
  --hairline: #e4e7ec;            /* card + table borders */
  --hairline-input: #aebbd0;      /* cooler input border */
  --shadow-blue: #334a6b;         /* shadow base hue */

  /* ── Gradient-mesh stops (upper-third backdrop) ──── */
  --mesh-cream: #f4ecdd;
  --mesh-sherbet: #e6a86b;
  --mesh-lavender: #b3a6ee;
  --mesh-indigo: #6558d9;
  --mesh-ruby: #d95b7f;
  --mesh-magenta: #c77bcb;

  /* ── Semantic aliases ───────────────────────────── */
  --text-body: var(--ink);
  --text-secondary: var(--ink-secondary);
  --text-muted: var(--ink-mute);
  --text-nav: var(--ink-mute-2);
  --text-on-dark: var(--on-primary);

  --surface-page: var(--canvas);
  --surface-soft: var(--canvas-soft);
  --surface-cream: var(--canvas-cream);
  --surface-dark: var(--brand-dark-900);

  --border-default: var(--hairline);
  --border-input: var(--hairline-input);
  --border-focus: var(--primary);

  --cta: var(--primary);
  --cta-hover: var(--primary-deep);
  --cta-press: var(--primary-press);
  --link: var(--primary);
  --link-hover: var(--primary-deep);

  --tag-bg: var(--primary-subdued);
  --tag-text: var(--primary-deep);
}

/* ---- tokens/typography.css ---- */
/* Subtle — type tokens + role utilities.
   Signature: Inter at weight 300 with negative tracking on display. ss01 global; tnum for money. */
:root {
  --font-sans: 'InterVariable', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-feature-default: "ss01" 1;
  --font-feature-tabular: "ss01" 1, "tnum" 1;

  --fw-thin: 300;      /* @kind font */
  --fw-regular: 400;   /* @kind font */

  /* size scale (by role) */
  --fs-display-xxl: 56px;
  --fs-display-xl: 48px;
  --fs-display-lg: 32px;
  --fs-display-md: 26px;
  --fs-heading-lg: 22px;
  --fs-heading-md: 20px;
  --fs-heading-sm: 18px;
  --fs-body-lg: 16px;
  --fs-body-md: 15px;
  --fs-body-tabular: 14px;
  --fs-button-md: 16px;
  --fs-button-sm: 14px;
  --fs-caption: 13px;
  --fs-micro: 11px;
  --fs-micro-cap: 10px;

  /* letter-spacing (by role) — the negative-tracking signature. @kind font */
  --ls-display-xxl: -1.4px;  /* @kind font */
  --ls-display-xl: -0.96px;  /* @kind font */
  --ls-display-lg: -0.64px;  /* @kind font */
  --ls-display-md: -0.26px;  /* @kind font */
  --ls-heading-lg: -0.22px;  /* @kind font */
  --ls-heading-md: -0.2px;   /* @kind font */
  --ls-heading-sm: 0;        /* @kind font */
  --ls-body: 0;              /* @kind font */
  --ls-body-tabular: -0.42px;/* @kind font */
  --ls-caption: -0.39px;     /* @kind font */
  --ls-micro: 0;             /* @kind font */
  --ls-micro-cap: 0.1px;     /* @kind font */

  /* line-height (by role). @kind font */
  --lh-display-xxl: 1.03;  /* @kind font */
  --lh-display-xl: 1.15;   /* @kind font */
  --lh-display-lg: 1.1;    /* @kind font */
  --lh-display-md: 1.12;   /* @kind font */
  --lh-heading-lg: 1.1;    /* @kind font */
  --lh-body: 1.4;          /* @kind font */
  --lh-button: 1;          /* @kind font */
  --lh-micro-cap: 1.15;    /* @kind font */
}

/* Role utility classes — consumers can apply these directly. */
.t-display-xxl { font-family: var(--font-sans); font-weight: var(--fw-thin); font-size: var(--fs-display-xxl); line-height: var(--lh-display-xxl); letter-spacing: var(--ls-display-xxl); font-feature-settings: var(--font-feature-default); }
.t-display-xl  { font-family: var(--font-sans); font-weight: var(--fw-thin); font-size: var(--fs-display-xl);  line-height: var(--lh-display-xl);  letter-spacing: var(--ls-display-xl);  font-feature-settings: var(--font-feature-default); }
.t-display-lg  { font-family: var(--font-sans); font-weight: var(--fw-thin); font-size: var(--fs-display-lg);  line-height: var(--lh-display-lg);  letter-spacing: var(--ls-display-lg);  font-feature-settings: var(--font-feature-default); }
.t-display-md  { font-family: var(--font-sans); font-weight: var(--fw-thin); font-size: var(--fs-display-md);  line-height: var(--lh-display-md);  letter-spacing: var(--ls-display-md);  font-feature-settings: var(--font-feature-default); }
.t-heading-lg  { font-family: var(--font-sans); font-weight: var(--fw-thin); font-size: var(--fs-heading-lg);  line-height: var(--lh-heading-lg);  letter-spacing: var(--ls-heading-lg);  font-feature-settings: var(--font-feature-default); }
.t-heading-md  { font-family: var(--font-sans); font-weight: var(--fw-thin); font-size: var(--fs-heading-md);  line-height: var(--lh-body);        letter-spacing: var(--ls-heading-md);  font-feature-settings: var(--font-feature-default); }
.t-heading-sm  { font-family: var(--font-sans); font-weight: var(--fw-thin); font-size: var(--fs-heading-sm);  line-height: var(--lh-body);        letter-spacing: var(--ls-heading-sm);  font-feature-settings: var(--font-feature-default); }
.t-body-lg     { font-family: var(--font-sans); font-weight: var(--fw-thin); font-size: var(--fs-body-lg);     line-height: var(--lh-body);        letter-spacing: var(--ls-body);        font-feature-settings: var(--font-feature-default); }
.t-body-md     { font-family: var(--font-sans); font-weight: var(--fw-thin); font-size: var(--fs-body-md);     line-height: var(--lh-body);        letter-spacing: var(--ls-body);        font-feature-settings: var(--font-feature-default); }
.t-body-tabular{ font-family: var(--font-sans); font-weight: var(--fw-thin); font-size: var(--fs-body-tabular);line-height: var(--lh-body);        letter-spacing: var(--ls-body-tabular);font-feature-settings: var(--font-feature-tabular); }
.t-button-md   { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-button-md); line-height: var(--lh-button);     letter-spacing: var(--ls-body);        font-feature-settings: var(--font-feature-default); }
.t-button-sm   { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-button-sm); line-height: var(--lh-button);     letter-spacing: var(--ls-body);        font-feature-settings: var(--font-feature-default); }
.t-caption     { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-caption);  line-height: var(--lh-body);        letter-spacing: var(--ls-caption);     font-feature-settings: var(--font-feature-tabular); }
.t-micro       { font-family: var(--font-sans); font-weight: var(--fw-thin); font-size: var(--fs-micro);       line-height: var(--lh-body);        letter-spacing: var(--ls-micro);       font-feature-settings: var(--font-feature-default); }
.t-micro-cap   { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-micro-cap); line-height: var(--lh-micro-cap);  letter-spacing: var(--ls-micro-cap);   text-transform: uppercase; font-feature-settings: var(--font-feature-default); }

/* Apply tabular figures to any money / numeric cell. */
.tnum { font-feature-settings: var(--font-feature-tabular); }

/* ---- tokens/spacing.css ---- */
/* Subtle — spacing. Base unit 8px, with 2/4/12 sub-tokens for fine work. */
:root {
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-huge: 64px;

  /* semantic */
  --section-pad-marketing: 96px;  /* 64–96 range; heroes toward 96 */
  --section-pad-product: 40px;    /* 32–48 range on dashboard */
  --card-pad: 32px;               /* feature / pricing cards */
  --card-pad-mockup: 24px;        /* dashboard mockups */
  --container-max: 1200px;
}

/* ---- tokens/radius.css ---- */
/* Subtle — border radius. Pills for buttons/tags; tight radii for chrome. */
:root {
  --radius-xs: 4px;     /* hairline tags, table chrome */
  --radius-sm: 6px;     /* form inputs */
  --radius-md: 8px;     /* compact cards, alerts */
  --radius-lg: 12px;    /* pricing + feature cards */
  --radius-xl: 16px;    /* dashboard mockup chrome */
  --radius-pill: 9999px;/* all buttons, tag pills */
}

/* ---- tokens/elevation.css ---- */
/* Subtle — elevation. Literal shadows are subtle and reserved for product-UI;
   the gradient mesh is the system's primary depth medium (see GradientMesh). */
:root {
  --shadow-0: none;
  --shadow-1: rgba(0, 55, 112, 0.08) 0 1px 3px;                                      /* card lift on white */
  --shadow-2: rgba(0, 55, 112, 0.08) 0 8px 24px, rgba(0, 55, 112, 0.04) 0 2px 6px;   /* floating panels, mockup chrome */
  --focus-ring: 0 0 0 3px rgba(101, 88, 217, 0.28);                                  /* keyboard focus on indigo */
}

/* ---- tokens/base.css ---- */
/* Subtle — base element defaults. ss01 global (the stylistic-set signature).
   Links default to indigo, no underline; hover deepens. */
:root { font-feature-settings: "ss01" 1; }
body {
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--link); text-decoration: none; transition: color 120ms ease; }
a:hover { color: var(--link-hover); }

/* ============ 3. Authored page CSS (verbatim from the comp) ============ */
*{box-sizing:border-box}
  html,body{margin:0}
  body{background:#100e0b;color:#f2ebdc;font-family:var(--font-sans);font-weight:300;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  img{display:block;max-width:100%}
  a{color:#d9b978;text-decoration:none}
  a:hover{color:#f0d99a}
  .lucide{stroke-width:1.6}
  input::placeholder,textarea::placeholder{color:#8a7d64;opacity:1}
  ::selection{background:#c9a25a;color:#12100c}
  .disp{font-family:'Oswald',var(--font-sans);text-transform:uppercase;letter-spacing:0.5px;line-height:1.0;color:#f2ebdc}
  .gold{background:linear-gradient(180deg,#f2d78f 0%,#d3aa5e 46%,#96692c 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
  .eyebrow{font-family:'Oswald',var(--font-sans);text-transform:uppercase;letter-spacing:3px;font-size:12px;font-weight:600;color:#c9a25a}
  @keyframes doanFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ============ 4. Hover / focus / active rules ============ */
.scp0:hover { color: rgb(240, 217, 154) !important; }
.scp1:hover { filter: brightness(1.08) !important; }
.scp2:active { transform: scale(0.97) !important; }
.scp3:active { transform: scale(0.98) !important; }
.scp4:hover { background: rgba(201, 162, 90, 0.12) !important; border-color: rgb(201, 162, 90) !important; }
.scp5:hover { background: rgba(16, 14, 11, 0.95) !important; }
.scp6:hover { transform: translateY(-4px) !important; border-color: rgba(201, 162, 90, 0.6) !important; }
.scp7:hover { transform: scale(1.05) !important; }
.scp8:focus { border-color: rgb(201, 162, 90) !important; box-shadow: rgba(201, 162, 90, 0.18) 0px 0px 0px 3px !important; }
.scp9:hover { transform: scale(1.06) !important; }
.scpa:hover { filter: brightness(1.25) !important; }
.scpb:hover { background: rgb(18, 16, 12) !important; color: rgb(240, 217, 154) !important; }

/* ============ 5. Enhancements ============ */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px; /* clears the sticky header on anchor jumps */
}
:where(a, button, input, select, textarea, [role="button"]):focus-visible {
  outline: 2px solid #e4c583;
  outline-offset: 2px;
  border-radius: 2px;
}
.site-header { -webkit-backdrop-filter: blur(14px); }
[data-faq-q] { -webkit-tap-highlight-color: transparent; }
img { background-color: #1b1710; } /* avoids white flashes while images decode */

/* ---- Booking form (Contact Form 7) ----
   CF7 form tags cannot carry inline style attributes, so the comp's field
   styling is reproduced here. Values are taken verbatim from the comp. */
.wpcf7 form.wpcf7-form { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.wpcf7 .doan-field { display: flex; flex-direction: column; gap: 6px; }
.wpcf7 .doan-row { display: flex; gap: 16px; flex-wrap: wrap; }
.wpcf7 .doan-col { flex: 1 1 180px; display: flex; flex-direction: column; gap: 6px; }
.wpcf7 .doan-label { font-size: 13px; font-weight: 400; color: #b8a98d; }
.wpcf7 .doan-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 2px; position: relative; }
.wpcf7 .doan-note { color: #8a7d64; }

/* CF7 emits its spinner as a sibling of the submit button. Left in the flex
   flow it costs ~40px, which is enough to push the reply-time note onto a
   second line instead of sitting beside the button as the comp has it. Taken
   out of flow and shown under the button while a submission is in flight. */
.wpcf7 .doan-actions .wpcf7-spinner {
  position: absolute;
  left: 0;
  top: 100%;
  margin: 8px 0 0;
}

/* CF7 wraps every control in an inline span; make it lay out like the input. */
.wpcf7 .wpcf7-form-control-wrap { display: block; }

.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  color: #f2ebdc;
  background: #12100c;
  padding: 10px 12px;
  min-height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(201, 162, 90, 0.28);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.wpcf7 textarea {
  min-height: 0;
  line-height: 1.5;
  padding: 11px 12px;
  resize: vertical;
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  border-color: #c9a25a;
  box-shadow: 0 0 0 3px rgba(201, 162, 90, 0.18);
}
.wpcf7 select option { color: #111; }

.wpcf7 .doan-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Oswald', var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 14px;
  font-weight: 600;
  color: #12100c;
  background: linear-gradient(180deg, #eccd84, #c9a25a);
  border: none;
  border-radius: var(--radius-pill);
  padding: 13px 26px;
  min-height: 46px;
  cursor: pointer;
  transition: filter 120ms ease, transform 80ms ease;
}
.wpcf7 .doan-submit:hover { filter: brightness(1.08); }
.wpcf7 .doan-submit:active { transform: scale(0.98); }
.wpcf7 .doan-submit:disabled { cursor: progress; filter: saturate(0.6); }

/* Honeypot: off-screen rather than display:none, so bots that skip hidden
   inputs still fill it. */
.wpcf7 .doan-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Validation and status messages, restyled for the dark palette. */
.wpcf7 .wpcf7-not-valid-tip {
  font-size: 13px;
  color: #f0a8bb;
  margin-top: 2px;
}
.wpcf7 input.wpcf7-not-valid,
.wpcf7 select.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid {
  border-color: rgba(217, 91, 127, 0.75);
}
.wpcf7 form .wpcf7-response-output {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  line-height: 1.45;
  border: 1px solid rgba(201, 162, 90, 0.45);
  background: rgba(201, 162, 90, 0.1);
  color: #f0e6d2;
}
/* Genuine problems the client has to act on. */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
  border-color: rgba(217, 91, 127, 0.6);
  background: rgba(217, 91, 127, 0.12);
  color: #f4d3dc;
}

/* Success — and 'failed', which is CF7's class for "the notification email
   could not be sent". Flamingo has already stored the request by that point, so
   the enquiry did reach the studio and an alarming red box would wrongly tell
   the client to try again. The mail problem is reported in wp-admin instead. */
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  border-color: rgba(201, 162, 90, 0.7);
  background: rgba(201, 162, 90, 0.16);
  color: #f7ecd4;
}
.wpcf7 .wpcf7-spinner { background-color: #c9a25a; }

/* Shown only if CF7 is deactivated or the form has not been imported. */
.doan-form-fallback { padding: 8px 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .site-header, #book, iframe { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}