/* ============================================================
   Search Quest Design System Token Sheet (CSS)
   Purpose: the token schema as CSS custom properties, with the
   core default skin in :root and the Kirkpatrick Floors skin as
   a [data-skin="kirkpatrick"] override block.
   Companion to resources/design-system/foundations/tokens.md.
   Dated 2026-07-11.

   Rules:
   1. Skins override tokens only. Never restyle components per client.
   2. Re-skin rule: sweep per-page BB CSS for hard-coded hex values,
      do not just swap these variables.
   3. Every skin must ship a prefers-reduced-motion: reduce rule that
      disables reveals, stagger, marquee, and parallax. Not optional.
   4. Every skin must define a visible focus ring. outline: none is a bug.
   ============================================================ */

/* ------------------------------------------------------------
   Skin: SQ Core Default (Navy Marigold Cream)
   Source: core.searchquest.ai acf-branding-colors block + BB CSS.
   ------------------------------------------------------------ */
:root {
  /* ---- Palette: dark grounds ---- */
  --dark-base: #274165;            /* primary dark band ground: hero and .primary rows (navy) */
  --dark-deep: var(--dark-base);   /* footer ground, one step darker than dark-base; not defined in core (footer sits on cream), falls back to dark-base */
  --dark-elevated: #2b304c;        /* raised card and callout fill on dark (near-black indigo, --color-secondary) */
  --tertiary: #2fb3bc;             /* reserved teal slot (--color-tertiary), unused on captured pages */

  /* ---- Palette: text on light ---- */
  --ink: #000000;                  /* headings and primary text on light */
  --body-muted: var(--ink);        /* secondary body on light; not tokenized in core, black everywhere */
  --fineprint: var(--ink);         /* metadata, captions, disclaimers; not differentiated in core */

  /* ---- Palette: surfaces and seams ---- */
  --surface: #ffffff;              /* page white */
  --surface-cream: #f5efeb;        /* alternating warm band (--color-muted); cream bands always carry a top hairline */
  --hairline: #e6e6e6;             /* seams and dividers on light: header/footer borders, inputs, blockquote */
  --card-border: var(--hairline);  /* card outline on light; core reuses the hairline value */
  --input-bg: #fcfcfc;             /* form input background */

  /* ---- Palette: accent family ---- */
  --accent: #fdb241;               /* primary action color (marigold): buttons, links, nav hover, emphasis spans */
  --accent-on-dark: var(--accent); /* eyebrow and label accent on dark grounds; core falls back to accent */
  --accent-soft: var(--accent);    /* hover fill and highlight tint; core has no hover color swap, falls back to accent */
  --accent-tint: var(--accent);    /* icon chip fill on light grounds; no chip system in core yet, falls back to accent */
  --gradient-start: #ffa801;       /* CTA and kicker-text gradient start (90deg on .gradient-btn, promo bar, text fills) */
  --gradient-end: #ffcc01;         /* CTA and kicker-text gradient end */

  /* ---- Palette: on-dark text ladder (alpha steps over dark-base) ---- */
  --on-dark-nav: rgba(255, 255, 255, 0.92);       /* nav links on dark */
  --on-dark-body: rgba(255, 255, 255, 0.7);       /* body copy on dark */
  --on-dark-support: rgba(255, 255, 255, 0.66);   /* supporting text on dark */
  --on-dark-outline: rgba(255, 255, 255, 0.55);   /* taglines and ghost-button outlines on dark */
  --on-dark-copyright: rgba(255, 255, 255, 0.4);  /* copyright line on dark */
  --on-dark-fill-low: rgba(255, 255, 255, 0.06);  /* faint fills and hairlines on dark, low end */
  --on-dark-fill-high: rgba(255, 255, 255, 0.18); /* faint fills and hairlines on dark, high end */

  /* ---- Palette: status and overlay ---- */
  --star-gold: var(--accent);      /* review stars; core inherits the accent family */
  --state-error: #dd6420;          /* form validation error (copper) */
  --scrim-base: transparent;       /* hero overlay base; core hero is color-plus-pattern, no scrim */

  /* ---- Type ---- */
  --display-face: 'Raleway', sans-serif; /* heading face; must be Google Fonts loadable, weights 300/400/700 */
  --body-face: 'Raleway', sans-serif;    /* body face; same family in core */
  --heading-weight: 700;           /* heading weight */
  --heading-tracking: 0;           /* heading letter-spacing */
  --heading-line: 1.4;             /* heading line-height (h1 tightens to 1.0, h2 to 1.2) */
  --h1-size: 72px;                 /* h1 size, line-height 1.0 */
  --h2-size: 46px;                 /* h2 size, line-height 1.2 */
  --h3-size: 24px;                 /* h3 size */
  --h4-size: 20px;                 /* h4 size */
  --h5-size: 18px;                 /* h5 size */
  --h6-size: 12px;                 /* h6 size */
  --body-size: 16px;               /* body size */
  --body-line: 1.45;               /* body line-height */
  --eyebrow-weight: 700;           /* eyebrow/kicker weight (.pre-title, all caps, gradient text fill) */
  --eyebrow-tracking: 0.1em;       /* eyebrow letter-spacing */
  --eyebrow-size: 15px;            /* eyebrow size, pinned */
  --nav-weight: 700;               /* nav link weight */
  --nav-size: 14px;                /* nav link size */
  /* Emphasis move (one or none per skin): core = accent span on the key headline word, plus gradient text kicker. */

  /* ---- Buttons ---- */
  --btn-fill: var(--accent);       /* primary button fill */
  --btn-label: #000000;            /* primary button label color */
  --radius-button: 4px;            /* button corner radius, a signature token */
  --btn-pad-y: 12px;               /* button vertical padding */
  --btn-pad-x: 24px;               /* button horizontal padding */
  --btn-hover-fill: var(--accent); /* hover archetype: hold-color, no shift; :active nudges 1px down */
  --btn-hover-label: #000000;      /* hover label color, unchanged */
  --btn-hover-lift: 0px;           /* hover lift distance, none in this archetype */
  --focus-ring: 2px solid var(--accent); /* required visible focus ring; core currently sets outline none, fix in build */

  /* ---- Shape and elevation ---- */
  --radius-card: 4px;              /* card corner radius (universal 4px in core) */
  --radius-media: 4px;             /* media corner radius */
  --radius-chip: 100px;            /* chip and pill radius */
  --shadow-card: 0 2px 8px rgba(11, 15, 25, 0.06); /* soft card shadow on light */
  --card-accent-bar: 8px;          /* accent left border on summary/takeaway/conclusion cards */
  --card-hover-lift: 0px;          /* card hover lift; editorial hover family is off in core */

  /* ---- Motion ---- */
  --motion-enabled: 1;             /* enableMotion master switch, default true */
  --reveal-distance: 26px;         /* scroll reveal fade-up distance */
  --reveal-duration: 0.8s;         /* scroll reveal duration */
  --reveal-ease: cubic-bezier(0.2, 0.6, 0.2, 1); /* scroll reveal easing */
  --stagger-distance: 18px;        /* hero stagger fade-up distance */
  --stagger-step: 0.08s;           /* hero stagger delay per element */
  --arrow-nudge: 5px;              /* hover arrow nudge distance */

  /* ---- Layout constants (system-wide, rarely overridden) ---- */
  --rail: 1320px;                  /* content rail width */
  --rail-standard: 1240px;         /* editorial standard container */
  --rail-narrow: 1100px;           /* narrow rail */
  --gutter: 56px;                  /* side gutters */
  --section-pad-min: 96px;         /* section padding, low end (desktop) */
  --section-pad-max: 140px;        /* section padding, high end (desktop) */
}

/* ------------------------------------------------------------
   Skin: Kirkpatrick Floors (Espresso Copper Cream)
   Source: KF prototype pages, clients/kirkpatrick-floors/design/.
   Overrides tokens only. Same bones, different skin.
   ------------------------------------------------------------ */
[data-skin="kirkpatrick"] {
  /* ---- Palette: dark grounds ---- */
  --dark-base: #16120f;            /* primary dark band ground (espresso) */
  --dark-deep: #0e0b09;            /* footer ground, one visible step darker */
  --dark-elevated: #211a13;        /* raised card and callout fill on dark (callouts, nudge card, Materials final CTA) */

  /* ---- Palette: text on light ---- */
  --ink: #1a1611;                  /* headings and primary text on light */
  --body-muted: #6b6258;           /* secondary body on light (long-form #4a443c, card body #5e564c) */
  --fineprint: #9a8f80;            /* metadata, captions, disclaimers (lighter step #bcb2a3) */

  /* ---- Palette: surfaces and seams ---- */
  --surface: #ffffff;              /* page white */
  --surface-cream: #f7f3ee;        /* alternating warm band, always with the top hairline */
  --hairline: #ece5dd;             /* seams and dividers on light */
  --card-border: #e7e0d8;          /* card outline on light (cream-section divider #e2d9cf) */

  /* ---- Palette: accent family ---- */
  --accent: #ad6930;               /* primary action color (copper) */
  --accent-on-dark: #c79461;       /* eyebrow and label accent on dark grounds */
  --accent-soft: #e7d3bf;          /* hover fill: primary button swaps into this with ink text */
  --accent-tint: #f0e2d2;          /* icon chip fill on light (dark-ground chip: rgba(199,148,97,.16) with #e7d3bf glyph) */
  --gradient-start: #bd7838;       /* guide CTA card gradient start, 152deg, border #c98a4f */
  --gradient-end: #9a5524;         /* guide CTA card gradient end */

  /* ---- Palette: status and overlay ---- */
  --star-gold: #e0a52e;            /* review stars */
  --state-error: #dd6420;          /* form validation; inherits core value until KF defines one */
  --scrim-base: rgba(16, 12, 8, 1); /* hero scrim base hue; photo-scrim double overlay derives its alphas from this */

  /* ---- Type ---- */
  --display-face: 'Inter', sans-serif; /* heading face, weights 400-900, Google Fonts */
  --body-face: 'Inter', sans-serif;    /* body face, same family */
  --heading-weight: 800;           /* heading weight */
  --heading-tracking: -0.03em;     /* heading letter-spacing (-.03 to -.035em in prototypes) */
  --heading-line: 1.05;            /* heading line-height (~1.02-1.05) */
  --h1-size: clamp(40px, 5.5vw, 82px); /* h1 clamp scale, 40-82px by page */
  --h2-size: clamp(28px, 4vw, 60px);   /* h2 clamp scale, 28-60px by view */
  --body-size: 17px;               /* body size (16-18px in prototypes) */
  --body-line: 1.65;               /* body line-height (1.6-1.7 in prototypes) */
  --eyebrow-weight: 800;           /* eyebrow weight */
  --eyebrow-tracking: 0.2em;       /* eyebrow letter-spacing */
  --eyebrow-size: 15px;            /* eyebrow size, pinned (prototypes drift 15-20px) */
  /* Emphasis move: 4px ink underline on the final headline word (process view). */

  /* ---- Buttons ---- */
  --btn-fill: var(--accent);       /* primary button fill (copper) */
  --btn-label: #ffffff;            /* primary button label color */
  --radius-button: 2px;            /* signature sharp button radius against 10px cards */
  --btn-pad-y: 11px;               /* button vertical padding (10-12px in prototypes) */
  --btn-pad-x: 22px;               /* button horizontal padding (18-24px in prototypes) */
  --btn-hover-fill: var(--accent-soft); /* hover archetype: color-swap to accent-soft */
  --btn-hover-label: var(--ink);   /* hover label swaps to ink */
  --btn-hover-lift: -2px;          /* hover lift with soft shadow */
  --focus-ring: 2px solid var(--accent); /* required visible focus ring, add in build */

  /* ---- Shape and elevation ---- */
  --radius-card: 10px;             /* standard card and media radius (serve cards 6, banners 12-14) */
  --radius-media: 10px;            /* media corner radius */
  --radius-chip: 100px;            /* chip and pill radius */
  --shadow-card: 0 16px 34px rgba(26, 22, 17, 0.13), 0 4px 9px rgba(26, 22, 17, 0.07); /* layered warm shadow on light */
  --card-hover-lift: -6px;         /* card hover lift; full family on: border darkens to ink, 4px copper top-bar wipe, chip inverts */

  /* ---- Motion ---- */
  --motion-enabled: 1;             /* enableMotion true; full editorial set: reveals, stagger, marquee, scroll-spy, doc parallax */
  --marquee-duration-a: 38s;       /* logo marquee track A duration */
  --marquee-duration-b: 44s;       /* logo marquee counter track B duration */
}