/* ==========================================================================
   OTOKA GARAGE · PRECISION
   Shared tokens for the site-wide refinement. Loaded after night-shift.css on
   every page. Page-specific rules live in assets/css/pages/<page>.css.
   Surfaces, roughly: silver/neutral most of the page, steel and metallic
   panels next, graphite and photography for feature moments, red as accent.
   ========================================================================== */
:root {
  /* surfaces, light to dark */
  --p-white: #FFFFFF;
  --p-silver: #F1F3F4;      /* default page ground */
  --p-steel: #DDE2E5;       /* panels, alternating bands */
  --p-metal: #AAB5BC;       /* hairlines on steel, muted marks */
  --p-graphite: #242B31;    /* feature sections */
  --p-carbon: #111519;      /* deepest: hero scrim, final CTA, footer */

  /* text */
  --p-ink: #14191E;         /* body text on light */
  --p-ink-2: #4A555E;       /* secondary text on light (AA on silver and steel) */
  --p-on-dark: #F1F3F4;     /* body text on graphite/carbon */
  --p-on-dark-2: #B4BEC5;   /* secondary text on graphite/carbon */

  /* lines */
  --p-rule: #CDD4D9;        /* hairline on silver */
  --p-rule-dark: #3A444C;   /* hairline on graphite */

  /* brand */
  --p-red: #C8102E;
  --p-red-hover: #A80C26;
  --p-red-on-dark: #F76A7C;  /* was #F25C6E (4.46:1 on graphite); now 4.99:1 on graphite, 6.38:1 on carbon */

  /* type */
  --p-f-display: "Archivo", "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --p-f-body: "Manrope", "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --p-f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* type scale (fluid) */
  --p-t-hero: clamp(2.6rem, 1.4rem + 5.2vw, 6rem);
  --p-t-h2: clamp(1.9rem, 1.3rem + 2.4vw, 3.4rem);
  --p-t-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --p-t-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --p-t-small: 0.875rem;
  --p-t-label: 0.72rem;

  /* rhythm */
  --p-wrap: 1280px;
  --p-pad: clamp(20px, 4vw, 56px);
  --p-sec: clamp(72px, 9vw, 136px);
  --p-measure: 68ch;
  --p-radius: 4px;          /* precise, not bubbly */
  --p-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ==========================================================================
   GLOBAL LAYER (site-wide base). Added in the Precision pass.
   --------------------------------------------------------------------------
   Extra tokens
     --p-t-h1          page h1 (inner pages); the home hero keeps --p-t-hero
     --p-t-h4          small heading
     --p-wdth          Archivo width for display type (font-stretch)
     --p-hdr-h         header height (60px mobile, 72px desktop; = --hdr-h)
     --p-quick-h       mobile bottom bar height without the safe area
     --p-shadow        one restrained shadow for raised panels

   Utility classes for page CSS / markup (all optional, low specificity):
     .p-display        Archivo display face, wide, tight leading (h1/h2/feature headings)
     .p-h1 .p-h2 .p-h3 apply the global heading sizes to any element
     .p-eyebrow        mono label with a short red lead line ("01 / SERVICES")
     .p-label          mono label, no line
     .p-lede           intro paragraph, larger, secondary ink, 56ch
     .p-measure        caps a text block at the reading measure (68ch)
     .p-btn            base button (48px min, 4px radius). Combine with:
       .p-btn--primary   brand red; the one dominant action (Book appointment)
       .p-btn--ghost     hairline secondary (Get estimate, More ...)
       .p-btn--dark      graphite fill, for light panels that need weight
       .p-btn--sm        44px compact size (still a full tap target)
     .p-link           inline text link with a red underline
     .p-rule           1px hairline divider (uses --p-rule / --p-rule-dark)
     .p-rule-red       short 2px red accent bar (48px); block element
     .p-accent-top     adds a short red line on the top edge of a panel/section
     .p-surface-white / -silver / -steel / -graphite / -carbon
                       section grounds; graphite/carbon also flip text, rules
                       and focus colour to the on-dark set
     .p-wrap           centred content column (--p-wrap + --p-pad)
   The legacy classes (.btn .btn-red .btn-ghost .eyebrow .mono .display .wrap)
   keep working and share the same look.
   ========================================================================== */
:root {
  --p-t-h1: clamp(2.1rem, 1.45rem + 2.9vw, 3.75rem);
  --p-t-h4: 1.0625rem;
  --p-wdth: 112%;
  --p-hdr-h: var(--hdr-h, 60px);
  --p-quick-h: var(--quick-h, 58px);
  --p-shadow: 0 1px 2px rgba(17,21,25,.06), 0 8px 24px rgba(17,21,25,.06);
}

/* ---------- base ground + type ---------- */
html { background: var(--p-silver); }
body {
  background: var(--p-silver);
  color: var(--p-ink);
  font-family: var(--p-f-body);
  font-size: var(--p-t-body);
  line-height: 1.62;
  font-weight: 400;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { color: inherit; text-wrap: balance; overflow-wrap: break-word; }
h1, h2 {
  font-family: var(--p-f-display); font-stretch: var(--p-wdth); font-weight: 700;
  letter-spacing: -.012em;
}
h1 { font-size: var(--p-t-h1); line-height: 1.06; }
h2 { font-size: var(--p-t-h2); line-height: 1.1; }
h3 { font-family: var(--p-f-body); font-weight: 700; font-size: var(--p-t-h3); line-height: 1.25; letter-spacing: -.01em; }
h4 { font-family: var(--p-f-body); font-weight: 700; font-size: var(--p-t-h4); line-height: 1.35; }
p { text-wrap: pretty; }
main p { max-width: var(--p-measure); }
:where(.text-center, [style*="text-align: center"], [style*="text-align:center"]) p { margin-inline: auto; }
strong, b { font-weight: 700; }
small { font-size: var(--p-t-small); }
code, kbd, samp { font-family: var(--p-f-mono); font-size: .92em; }

/* the legacy display helpers get the wide display cut */
.display, .hero-h1, .page-hero h1, .p-display { font-family: var(--p-f-display); font-stretch: var(--p-wdth); }
.display { font-weight: 700; letter-spacing: -.012em; line-height: 1.08; }
.hero-h1 { letter-spacing: -.018em; line-height: 1.0; }
.mono { letter-spacing: .1em; }

/* ---------- focus: one visible ring everywhere ---------- */
:focus-visible { outline: 2px solid var(--p-red); outline-offset: 3px; }
.hero :focus-visible, .close :focus-visible, .site-footer :focus-visible, .menu :focus-visible,
.site-header:not(.is-light) :focus-visible, .site-header.is-menu :focus-visible,
.p-surface-graphite :focus-visible, .p-surface-carbon :focus-visible { outline-color: #FFFFFF; }
:focus:not(:focus-visible) { outline: none; }
#main:focus { outline: none; }
.skip { background: var(--p-carbon); border-radius: var(--p-radius); font-family: var(--p-f-body); min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- buttons (legacy .btn and new .p-btn share one look) ---------- */
.btn, .p-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: var(--p-radius);
  font-family: var(--p-f-body); font-size: 15px; font-weight: 700; letter-spacing: .005em; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
  border: 1px solid currentColor; background: transparent; color: var(--fg, var(--p-ink));
  transition: background-color .25s var(--p-ease), border-color .25s, color .25s, transform .25s var(--p-ease);
}
.btn svg, .p-btn svg { width: 16px; height: 16px; flex: none; }
.btn:active, .p-btn:active { transform: translateY(1px); }
.btn-red, .p-btn--primary { background: var(--p-red); border-color: var(--p-red); color: #fff; }
.btn-red:hover, .btn-red:focus-visible, .p-btn--primary:hover, .p-btn--primary:focus-visible { background: var(--p-red-hover); border-color: var(--p-red-hover); color: #fff; }
.p-btn--ghost { background: transparent; border-color: var(--p-metal); color: var(--p-ink); }
.p-btn--ghost:hover, .p-btn--ghost:focus-visible { background: var(--p-ink); border-color: var(--p-ink); color: #fff; }
.p-btn--dark { background: var(--p-graphite); border-color: var(--p-graphite); color: #fff; }
.p-btn--dark:hover, .p-btn--dark:focus-visible { background: var(--p-carbon); border-color: var(--p-carbon); color: #fff; }
.p-btn--sm, .btn-sm { min-height: 44px; padding: 0 16px; font-size: 14px; }
.btn-xl { min-height: 54px; padding: 0 28px; font-size: 16px; }
/* ghost on dark grounds */
.p-surface-graphite .p-btn--ghost, .p-surface-carbon .p-btn--ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.p-surface-graphite .p-btn--ghost:hover, .p-surface-carbon .p-btn--ghost:hover,
.p-surface-graphite .p-btn--ghost:focus-visible, .p-surface-carbon .p-btn--ghost:focus-visible { background: #fff; border-color: #fff; color: var(--p-carbon); }

/* ---------- text helpers ---------- */
.p-h1 { font-family: var(--p-f-display); font-stretch: var(--p-wdth); font-weight: 700; font-size: var(--p-t-h1); line-height: 1.06; letter-spacing: -.012em; text-wrap: balance; }
.p-h2 { font-family: var(--p-f-display); font-stretch: var(--p-wdth); font-weight: 700; font-size: var(--p-t-h2); line-height: 1.1; letter-spacing: -.012em; text-wrap: balance; }
.p-h3 { font-family: var(--p-f-body); font-weight: 700; font-size: var(--p-t-h3); line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.p-display { font-weight: 700; line-height: 1.06; letter-spacing: -.012em; text-wrap: balance; }
.p-label, .p-eyebrow {
  font-family: var(--p-f-mono); font-size: var(--p-t-label); font-weight: 500; line-height: 1.4;
  letter-spacing: .1em; text-transform: uppercase; color: var(--p-ink-2);
}
.p-eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.p-eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--p-red); flex: none; }
.p-lede { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.55; color: var(--p-ink-2); max-width: 56ch; }
.p-measure { max-width: var(--p-measure); }
.p-link {
  color: inherit; text-decoration: underline; text-decoration-color: var(--p-red); text-decoration-thickness: 1px;
  text-underline-offset: .22em; transition: color .2s, text-decoration-thickness .2s;
}
.p-link:hover { color: var(--p-red); text-decoration-thickness: 2px; }
.p-wrap { width: 100%; max-width: var(--p-wrap); margin-inline: auto; padding-inline: var(--p-pad); }

/* ---------- rules and the red accent line ---------- */
.p-rule { display: block; height: 1px; border: 0; margin: 0; background: var(--p-rule); }
.p-rule-red { display: block; width: 48px; height: 2px; border: 0; margin: 0; background: var(--p-red); }
.p-accent-top { position: relative; }
.p-accent-top::before { content: ""; position: absolute; top: 0; left: 0; width: 48px; height: 2px; background: var(--p-red); }

/* ---------- section grounds ---------- */
.p-surface-white { background: var(--p-white); color: var(--p-ink); }
.p-surface-silver { background: var(--p-silver); color: var(--p-ink); }
.p-surface-steel { background: var(--p-steel); color: var(--p-ink); --p-rule: #BFC8CE; }
.p-surface-graphite, .p-surface-carbon {
  color: var(--p-on-dark); --p-rule: var(--p-rule-dark); --p-ink-2: var(--p-on-dark-2);
  --fg: var(--p-on-dark); --fg-2: var(--p-on-dark-2); --text: var(--p-on-dark); --text-2: var(--p-on-dark-2); --line: var(--p-rule-dark);
}
.p-surface-graphite { background: var(--p-graphite); }
.p-surface-carbon { background: var(--p-carbon); }
.p-surface-graphite .p-eyebrow::before, .p-surface-carbon .p-eyebrow::before,
.p-surface-graphite .p-rule-red, .p-surface-carbon .p-rule-red { background: var(--p-red-on-dark); }
.p-surface-graphite .p-link:hover, .p-surface-carbon .p-link:hover { color: #fff; }

::selection { background: var(--p-red); color: #fff; }

/* ---------- reduced motion: global safety net ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .menu, .menu-links a { transition: none !important; transform: none !important; }
}