/* =============================================================
   A-Z Shades — Design Studio theme layer
   Re-skins the 3D studio onto the NEW site's brand (cream / ink /
   orange, Playfair Display headings) so design.html reads as part
   of index.html + the sector pages rather than the old site.

   Loaded AFTER styles.css and design.css: remap the design tokens
   first (which carries ~90% of the studio), then fix the handful of
   components that hard-code the old blue/navy.
   ============================================================= */

:root {
  /* --- brand surfaces --- */
  --navy: #14202A;
  --navy-700: #1B2A32;

  /* --teal drives every "selected / active" affordance in the studio
     (active product, swatch ring, slider thumb, toggles, spinner), so it
     becomes the brand accent. --teal-700 is the WCAG-safe accent ink used
     for link-ish text and values. */
  --teal: #F7941E;
  --teal-600: #E8850F;
  --teal-700: #9A4E08;
  --sky: #F7941E;

  --sun: #F7941E;
  --sun-600: #FF9F2E;
  --sun-700: #CC7409;

  /* --- neutrals, warmed to sit on cream --- */
  --ink: #1B2A32;
  --body: #5B666E;
  --muted: #8B949A;
  --line: #E7E3DB;
  --bg: #ffffff;
  --bg-soft: #F6F4F0;
  --bg-tint: #FFF4E6;

  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 22px;
  --ring: 0 0 0 4px rgba(247, 148, 30, .34);
  --shadow-sm: 0 1px 2px rgba(27, 42, 50, .05), 0 1px 3px rgba(27, 42, 50, .07);
  --shadow: 0 12px 30px -14px rgba(27, 42, 50, .28);
  --shadow-lg: 0 34px 64px -26px rgba(27, 42, 50, .36);

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* ---------- typography ----------
   Display serif for real headings only. The studio's micro-labels
   (.seg / .chip / .tool-tag / .pgroup__head) keep Poppins via --font-head. */
h1, h2,
.section-head h2,
.card h3,
.dropzone h3,
.drawer__head h2,
.intro__card h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}
h1 em, h2 em { font-style: italic; color: var(--sun); }

/* eyebrow: uppercase Poppins, no leading dash (matches the rest of the site) */
.eyebrow { font-family: var(--font-head); font-weight: 500; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--teal-700); }
.eyebrow::before { display: none; }

/* ---------- header / nav ---------- */
.site-header { background: rgba(255,255,255,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav a { font-family: var(--font-head); font-weight: 600; font-size: 14.5px; color: var(--ink); }
.nav a:hover { color: var(--teal-700); }
.nav a[aria-current="page"] { color: var(--teal-700); }
.nav .btn, .nav-actions .btn { color: #fff; }

/* ---------- buttons ---------- */
.btn { font-family: var(--font-head); font-weight: 600; }
.btn--sun { --btn-bg: var(--sun); --btn-fg: #fff; }
.btn--sun:hover { background: var(--sun-600); }
.btn--teal { --btn-bg: var(--navy); --btn-fg: #fff; }
.btn--teal:hover { background: var(--navy-700); }
.btn--ghost { --btn-fg: var(--ink); border-color: var(--line); }
.btn--ghost:hover { --btn-fg: var(--teal-700); border-color: rgba(247,148,30,.55); background: var(--bg-tint); }

/* ---------- studio shell ---------- */
.studio { background: var(--bg-soft); }
.studio__stage { background: linear-gradient(180deg, #E6ECEF, #F2F0EA); }
.toolbar__tabs { background: var(--bg-soft); }
.tool-tag__n { background: var(--sun); color: #fff; }

/* The nav carries a Free Quote pill for the mobile drawer AND a desktop one in
   .nav-actions; above 1000px both were rendering side by side. Show one. */
@media (min-width: 1001px) { .nav > .btn { display: none; } }

/* Selected states put a text label on the fill, and white-on-orange is a weak
   contrast pair — so selections use the dark brand surface with an orange icon
   (orange stays for CTAs, step numbers and non-text accents). */
.prod.is-active { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 8px 18px -10px rgba(20,32,42,.7); }
.prod.is-active .ico { color: var(--sun); }
.pt-btn.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.intro__badge { background: var(--navy); color: #fff; }

.swatch.is-active { box-shadow: 0 0 0 2px var(--teal), 0 0 0 4px rgba(247,148,30,.28); }
.armodal__ar { color: #fff; }

/* dark chrome retoned from the old #1b2e38 to the new #14202A */
.stage__hint { background: rgba(20,32,42,.84); }

/* last of the old-site blues (#1f96c9/#6ec1e4/#cfeafe) that survived the re-skin */
.stage__loader { background: linear-gradient(180deg, #F6F4F0, #fff); }
.spinner { border-color: rgba(247,148,30,.22); border-top-color: var(--sun); }
.sun-select:focus { border-color: var(--sun); box-shadow: 0 0 0 4px rgba(247,148,30,.14); }

/* quote-step hint text */
.qf-hint { font-size: .88rem; line-height: 1.55; color: var(--muted); margin: 0 0 12px; }
.qf-hint .linklike { font-size: inherit; }

/* keyboard users: hidden drawer must leave the tab order, but keep the slide */
.drawer { visibility: hidden; transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s .3s; }
.drawer.is-open { visibility: visible; transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s; }
.drawer-backdrop { background: rgba(20,32,42,.58); }
.armodal { background: rgba(20,32,42,.62); }
.armodal__close { color: var(--ink); }

/* ---------- content band under the tool + footer ---------- */
.section--soft { background: var(--bg-soft); }
.card { border-radius: 18px; }
.card__icon { color: var(--teal-700); }
.site-footer { background: var(--navy); }