/* ═════════════════════════════════════════════════════════════════════════
   THE SEVEN TEMPLATES — ORIGINAL DESIGNS, EXPRESSED AS TOKENS

   Each block below re-tunes the custom properties front/layout.blade.php
   already declares. Nothing here introduces a component, a layout or a
   colour system of its own — that is what "one design system, no second
   framework" means in practice, and it is what makes a template change a
   one-string write that can be undone.

   WHAT A TEMPLATE IS ALLOWED TO CHANGE:
     · the type scale, weight and letter-spacing
     · the rhythm — space between sections, inside cards, around text
     · corner radius and shadow depth
     · how loudly the accent is used (a wash, an edge, a full field)
     · the hero's treatment
   WHAT IT MUST NEVER CHANGE:
     · the content, the page set, or the order of anything
     · text colours below the platform's contrast floor — every template is
       held to the same 4.5:1 by the contrast test, because a look that
       cannot be read is not a look, it is a fault.

   The accent colour stays the BUSINESS's own in every template. A template
   that overrode it would be a template that takes somebody's brand away.
   ═════════════════════════════════════════════════════════════════════════ */

/* Shared template scaffolding. The section rhythm and heading scale are
   variables so a template sets two numbers rather than restating a page. */
html[data-site-template] {
    --tpl-section-y: 5rem;        /* vertical air between sections */
    --tpl-h1: clamp(2.25rem, 5vw, 3.5rem);
    --tpl-h2: clamp(1.5rem, 3vw, 2.125rem);
    --tpl-lead: 1.0625rem;
    --tpl-track: -0.01em;          /* heading letter-spacing */
    --tpl-weight: 800;             /* heading weight */
    --tpl-case: none;              /* eyebrow / nav case */
    --tpl-accent-wash: 8%;         /* how much accent tints soft surfaces */

    /* The shadow scale's base. It used to be declared in the front layout's
       own style block, which is emitted AFTER this file at the same
       specificity — so every "no shadow" template silently got the default
       shadow back. It lives here so a template can actually re-tune it. */
    --shadow-sm: 0 1px 2px rgba(10,10,15,.06);
    --shadow:    0 10px 30px -8px rgba(10,10,15,.12);
    --shadow-lg: 0 30px 60px -12px rgba(10,10,15,.18);
}
html[data-site-template] section { padding-block: var(--tpl-section-y); }
html[data-site-template] h1 { font-size: var(--tpl-h1); font-weight: var(--tpl-weight); letter-spacing: var(--tpl-track); }
html[data-site-template] h2 { font-size: var(--tpl-h2); font-weight: var(--tpl-weight); letter-spacing: var(--tpl-track); }
html[data-site-template] .lead, html[data-site-template] .hero p { font-size: var(--tpl-lead); }
html[data-site-template] .eyebrow { text-transform: var(--tpl-case); }

/* ── 1. MINIMAL ──────────────────────────────────────────────────────────
   For a business whose work should be the only thing on the page. Hairline
   rules instead of cards, almost no shadow, one accent touch per screen. */
html[data-site-template="minimal"] {
    --tpl-section-y: 6rem;
    --tpl-h1: clamp(2rem, 4vw, 2.875rem);
    --tpl-h2: clamp(1.375rem, 2.4vw, 1.75rem);
    --tpl-weight: 600;
    --tpl-track: -0.015em;
    --tpl-accent-wash: 4%;
    --radius: 4px; --radius-lg: 6px; --radius-xl: 8px; --radius-pill: 6px;
    --shadow-sm: none;
    --shadow: none;
    --shadow-lg: none;
    --bg-soft: #ffffff;
}
html[data-site-template="minimal"] .card,
html[data-site-template="minimal"] .panel { border: 1px solid var(--border); background: transparent; }
html[data-site-template="minimal"] .eyebrow { background: transparent; padding-inline: 0; letter-spacing: .12em; }

/* ── 2. CLEAN CORPORATE ──────────────────────────────────────────────────
   The default, and the safest answer for a firm that must look established
   before it looks interesting. Even rhythm, soft cards, restrained accent. */
html[data-site-template="clean_corporate"] {
    --tpl-section-y: 5rem;
    --tpl-weight: 700;
    --tpl-case: uppercase;
    --radius: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px;
    --bg-soft: #f7f8fa;
}

/* ── 3. MODERN SERVICE ───────────────────────────────────────────────────
   For a trade that sells responsiveness — a garage, a clinic, a courier.
   Rounder, warmer, the accent doing more work so the action is obvious. */
html[data-site-template="modern_service"] {
    --tpl-section-y: 4.5rem;
    --tpl-h1: clamp(2.25rem, 5.5vw, 3.75rem);
    --tpl-weight: 800;
    --tpl-accent-wash: 12%;
    --radius: 18px; --radius-lg: 26px; --radius-xl: 34px; --radius-pill: 999px;
    --shadow: 0 12px 34px -10px color-mix(in srgb, var(--accent) 28%, rgba(10,10,15,.14));
    --bg-soft: color-mix(in srgb, var(--accent) 4%, #f8f9fb);
}
html[data-site-template="modern_service"] .btn-primary,
html[data-site-template="modern_service"] .nav-cta { font-weight: 800; }

/* ── 4. PREMIUM PROFESSIONAL ─────────────────────────────────────────────
   Weight without noise: tighter headings, deeper shadow, more air. For a
   consultancy, a law firm, an energy operator. */
html[data-site-template="premium_professional"] {
    --tpl-section-y: 6rem;
    --tpl-h1: clamp(2.5rem, 5vw, 3.75rem);
    --tpl-h2: clamp(1.625rem, 3vw, 2.25rem);
    --tpl-weight: 700;
    --tpl-track: -0.025em;
    --tpl-lead: 1.125rem;
    --tpl-case: uppercase;
    --radius: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 8px;
    --shadow: 0 18px 48px -18px rgba(10,10,15,.22);
    --shadow-lg: 0 40px 80px -20px rgba(10,10,15,.28);
    --bg-soft: #f4f5f7;
}
html[data-site-template="premium_professional"] .eyebrow { letter-spacing: .16em; }

/* ── 5. EDITORIAL ────────────────────────────────────────────────────────
   Reading first. A long measure, serif headings, generous leading — for a
   business whose case is made in sentences rather than in features. */
html[data-site-template="editorial"] {
    --tpl-section-y: 5.5rem;
    --tpl-h1: clamp(2.5rem, 5.5vw, 4rem);
    --tpl-h2: clamp(1.75rem, 3.2vw, 2.5rem);
    --tpl-weight: 500;
    --tpl-track: -0.02em;
    --tpl-lead: 1.1875rem;
    --tpl-accent-wash: 6%;
    --radius: 2px; --radius-lg: 3px; --radius-xl: 4px; --radius-pill: 2px;
    --shadow: none;
    --bg-soft: #faf8f4;
}
html[data-site-template="editorial"] h1,
html[data-site-template="editorial"] h2,
html[data-site-template="editorial"] h3 {
    font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
}
html[data-site-template="editorial"] p { line-height: 1.75; max-width: 68ch; }
html[data-site-template="editorial"] .eyebrow { background: transparent; padding-inline: 0; font-weight: 600; letter-spacing: .18em; }

/* ── 6. LUXURY ───────────────────────────────────────────────────────────
   Slow and dark. Wide letter-spacing, very high contrast, almost no colour
   except the accent as a hairline. For a salon, a hotel, a private service. */
html[data-site-template="luxury"] {
    --tpl-section-y: 7rem;
    --tpl-h1: clamp(2.25rem, 5vw, 3.5rem);
    --tpl-h2: clamp(1.5rem, 2.8vw, 2rem);
    --tpl-weight: 400;
    --tpl-track: 0.06em;
    --tpl-lead: 1.0625rem;
    --tpl-case: uppercase;
    --tpl-accent-wash: 5%;
    --radius: 0; --radius-lg: 0; --radius-xl: 0; --radius-pill: 0;
    --shadow: none;
    --shadow-lg: 0 40px 90px -30px rgba(10,10,15,.35);
    --bg-soft: #f6f4f1;
    --border: #e2ded7;
}
html[data-site-template="luxury"] h1,
html[data-site-template="luxury"] h2 { text-transform: uppercase; }
html[data-site-template="luxury"] .eyebrow {
    background: transparent; padding-inline: 0; letter-spacing: .3em; font-weight: 500;
    border-bottom: 1px solid var(--accent); border-radius: 0; padding-bottom: .35rem;
}
html[data-site-template="luxury"] .btn-primary,
html[data-site-template="luxury"] .nav-cta { letter-spacing: .12em; font-weight: 500; }

/* ── 7. BOLD COMMERCIAL ──────────────────────────────────────────────────
   Loud on purpose. For a shop, a market trader, a promotion — where the
   offer is the message and hesitation costs the sale. */
html[data-site-template="bold_commercial"] {
    --tpl-section-y: 4rem;
    --tpl-h1: clamp(2.5rem, 7vw, 4.5rem);
    --tpl-h2: clamp(1.75rem, 4vw, 2.75rem);
    --tpl-weight: 900;
    --tpl-track: -0.035em;
    --tpl-lead: 1.125rem;
    --tpl-case: uppercase;
    --tpl-accent-wash: 16%;
    --radius: 14px; --radius-lg: 20px; --radius-xl: 26px; --radius-pill: 999px;
    --shadow: 0 14px 40px -12px color-mix(in srgb, var(--accent) 40%, rgba(10,10,15,.16));
    --bg-soft: color-mix(in srgb, var(--accent) 6%, #f8f9fb);
}
html[data-site-template="bold_commercial"] .btn-primary,
html[data-site-template="bold_commercial"] .nav-cta { font-weight: 900; text-transform: uppercase; letter-spacing: .02em; }
html[data-site-template="bold_commercial"] .eyebrow { font-weight: 900; letter-spacing: .1em; }

/* ── RESTRAINT, AND THE READER ───────────────────────────────────────────
   Two rules that apply to every template above, and are not negotiable per
   design: motion is opt-out, and nothing gets smaller than it can be read. */
@media (prefers-reduced-motion: reduce) {
    html[data-site-template] *,
    html[data-site-template] *::before,
    html[data-site-template] *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
@media (max-width: 560px) {
    /* A phone is not a small desktop. Every template loses a little of its
       vertical drama so a one-handed reader is not scrolling through air. */
    html[data-site-template] { --tpl-section-y: 3rem; }
}