/* ============================================================================
   Reco Tak — design tokens
   ----------------------------------------------------------------------------
   The truth block below is the Reco Tak Light Design System, copied verbatim
   from its tokens/*.css. The alias block after it remaps the legacy token names
   the ported admin stylesheet still references, BY ROLE rather than by hue —
   admin.css resolves ~520 references and is 2 200 lines, so aliasing is what
   lets the whole backoffice re-skin from this one file instead of a rewrite.

   New CSS should reference the brand tokens directly. The aliases exist to
   avoid touching admin.css, not as a second vocabulary to build on.
   ========================================================================== */

/* ── Fonts ──────────────────────────────────────────────────────────────────
   Self-hosted rather than the design system's Google Fonts @import: the app
   ships as one binary with everything embedded, and a Swedish site that sends
   every visitor's IP to a third party on first paint is a GDPR liability with
   no upside. latin covers Swedish (å ä ö); latin-ext is listed so imported
   names with other diacritics still render.
   font-display: swap — text must be readable before the font arrives. */
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/barlow-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/barlow-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/barlow-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/barlow-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/barlow-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/barlow-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/fonts/barlow-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/fonts/barlow-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/barlow-condensed-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/barlow-condensed-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/fonts/barlow-condensed-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/fonts/barlow-condensed-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* The site is light-only: the design system ships no dark theme. Declaring
     the scheme makes the browser render form controls, scrollbars and default
     backgrounds light even when the device is in dark mode — otherwise
     dark-mode UA styling leaks in and looks like a stray half-theme. */
  color-scheme: light;

  /* ── Brand blues (from the logo gradient) ── */
  --blue-100: #E3F4FD;
  --blue-200: #B9E4FA;
  --blue-300: #6FCBF5;
  --blue-400: #2BB7F0; /* logo cyan */
  --blue-500: #189BE0;
  --blue-600: #1273D4; /* logo deep blue — primary */
  --blue-700: #0C56A8;
  --blue-800: #0A3F7C;

  /* ── Neutrals — cool, light ── */
  --ink-900: #101820; /* near-black, from the vehicle wrap */
  --ink-700: #2E3A45;
  --ink-500: #5B6B78;
  --ink-300: #9FADB8;
  --line-1: #DCE5EC;
  --line-2: #EBF1F5;
  --paper-0: #FFFFFF;
  --paper-1: #F5F9FC; /* section tint */
  --paper-2: #EAF3F9;

  /* ── Semantic ── */
  --success: #1F9D55;
  --warning: #D98A0B;
  --danger:  #D6453D;

  /* ── Warm accent — roof-tile amber, same L/C plane as the blues.
        The public site no longer uses it as an accent (those chips and
        checkmarks moved to the light blues); it remains the backoffice's
        warn tint — draft badges, failed-pull cards, the spend meter —
        where reading as a warning is the point. ── */
  --amber-100: oklch(0.95 0.035 60);
  --amber-300: oklch(0.85 0.08 60);
  --amber-500: oklch(0.70 0.15 55);
  --amber-600: oklch(0.62 0.15 50);

  /* ── Role aliases (design system) ── */
  --brand-gradient: linear-gradient(135deg, var(--blue-400), var(--blue-600));
  --text-heading: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-on-brand: #FFFFFF;
  --surface-page: var(--paper-0);
  --surface-section: var(--paper-1);
  --surface-card: var(--paper-0);
  --border-card: var(--line-1);
  --accent: var(--blue-500);
  --accent-strong: var(--blue-600);
  --link: var(--blue-600);
  --link-hover: var(--blue-700);
  --focus-ring: 0 0 0 3px var(--blue-200);

  /* ── Typography ──
     Display is ALWAYS uppercase, 600-700, with .02em tracking. */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --display-xl: 700 64px/1.02 var(--font-display);
  --display-lg: 700 44px/1.05 var(--font-display);
  --display-md: 600 30px/1.1 var(--font-display);
  --display-sm: 600 22px/1.15 var(--font-display);
  --display-tracking: 0.02em;
  --kicker: 600 14px/1.2 var(--font-display);
  --kicker-tracking: 0.14em;
  --body-lg: 400 18px/1.6 var(--font-body);
  --body-md: 400 16px/1.6 var(--font-body);
  --body-sm: 400 14px/1.5 var(--font-body);
  --label: 600 14px/1.2 var(--font-body);

  /* ── Spacing ──
     The design system's --sp-* scale. --space-* below is the identical scale
     under the name admin.css already uses; the two are byte-identical by
     coincidence of both being a 4pt scale, which is why the alias is safe. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --container: 1140px;
  --section-pad: 96px;

  /* ── Effects ──
     Buttons are --radius-sm (6px). The pill radius exists for badges and
     status chips only — the design system is explicit that buttons are never
     pills. */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(16,24,32,.05), 0 8px 24px rgba(16,24,32,.07);
  --shadow-raised: 0 12px 40px rgba(12,86,168,.16);
  --ease: cubic-bezier(.2,.7,.3,1);
  --speed: 160ms;

  /* ══ Legacy aliases — remapped by ROLE, not by hue ═══════════════════════
     admin.css was written against the sibling project's palette (sand/coral/
     ocean, a warm scheme). Every name below resolves to the Reco Tak token
     that plays the SAME PART in the interface, so the backoffice re-skins
     without a single edit to that file. The names are legacy: do not
     reference them in new CSS. */
  --sand-100:    var(--paper-1);   /* page background            */
  --sand-200:    var(--paper-0);   /* cards / raised panels      */
  --sand-300:    var(--line-1);    /* hairline borders / inputs  */
  --sand-400:    var(--ink-300);   /* stronger borders           */
  --coral:       var(--blue-600);  /* primary action             */
  --coral-dark:  var(--blue-700);  /* primary hover / pressed    */
  --coral-muted: var(--blue-100);  /* subtle primary fills       */
  --ocean-deep:  var(--ink-900);   /* headings / body text       */
  --ocean-mid:   var(--ink-700);   /* field labels               */
  --ocean-light: var(--ink-500);   /* muted text                 */
  --tide:        var(--blue-500);  /* selection / highlight      */
  --tide-light:  var(--blue-200);
  --white:       var(--paper-0);   /* cards / text on dark       */
  --error:       var(--danger);
  --charcoal:      var(--ink-900); /* headings / body text       */
  --charcoal-soft: var(--ink-700); /* field labels               */
  --warm-white:    var(--paper-1); /* page background            */
  --panel-2:       var(--paper-2); /* deeper panel tint          */
  --border:        var(--line-1);  /* hairline                   */
  /* The "roof" family is the sibling project's red; here it is purely the
     danger role — cms-counter.js paints an over-limit character counter with
     it, so it must read as a warning and never as a success. */
  --roof:      var(--danger);
  --roof-dark: #A9332C;
  --roof-soft: #FBE9E8;

  /* admin.css animates with --ease-out; the design system's curve is --ease.
     Same role, different name. */
  --ease-out: var(--ease);

  /* The 4pt scale under admin.css's name. */
  --space-1: var(--sp-1); --space-2: var(--sp-2); --space-3: var(--sp-3);
  --space-4: var(--sp-4); --space-5: var(--sp-5); --space-6: var(--sp-6);
  --space-7: var(--sp-7); --space-8: var(--sp-8); --space-9: var(--sp-9);

  /* admin.css uses a serif for the sibling project's wordmark. Reco Tak's
     display face is condensed and its logo is a supplied PNG that is never
     redrawn, so the serif role collapses onto the display font. */
  --font-serif: var(--font-display);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* The reset above also zeroes the ONE margin that must survive it: the user
   agent centres a showModal() dialog with `margin: auto` on `dialog`, so the
   blanket margin: 0 pinned every modal (the CMS upload dialog among them) to
   the viewport's top-left corner. Restore it here, beside the rule that broke
   it, so the next reset audit sees the pair together. */
dialog {
  margin: auto;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background-color: var(--surface-page);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  /* Taps are always clicks on interactive elements: kills iOS double-tap-zoom
     disambiguation, which otherwise eats the first tap on buttons. touch-action
     does NOT inherit, so this must name the elements themselves, not body.
     Pinch-zoom stays. */
  button, a, input, select, textarea {
    touch-action: manipulation;
  }
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  font-family: var(--font-body);
  border: none;
  background: none;
}

input, textarea, select {
  font-family: var(--font-body);
}

/* Visible, brand-coloured focus for keyboard users on every interactive
   element, including ones the admin stylesheet styles itself. :focus-visible
   keeps it off mouse clicks. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ── Brand lockup ──
   The Reco Tak mark is a supplied PNG that is never redrawn or recoloured, and
   the brand rule is that it always sits on dark. Both backoffice surfaces (the
   light admin header, the light login card) therefore place it on an ink-900
   plate rather than tinting the artwork to fit a light background. */
.admin-brand,
.login-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}

.brand-plate-img {
  display: block;
  height: 1.9em;
  width: auto;
  background: var(--ink-900);
  padding: 0.36em 0.62em;
  border-radius: var(--radius-sm);
}

/* ── Shared button (the design system's primary/secondary/ghost trio) ──
   Radius is --radius-sm. Hover darkens one step, press sinks 1px. No bounce,
   no pill. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: var(--brand-gradient);
  color: var(--text-on-brand);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-sm);
  transition: filter var(--speed) var(--ease), transform var(--speed) var(--ease);
  white-space: nowrap;
}

.btn-primary:hover {
  filter: brightness(0.94);
  color: var(--text-on-brand);
}

.btn-primary:active {
  transform: translateY(1px);
}

/* Section utilities shared by the public page. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

.section-label {
  font: var(--kicker);
  letter-spacing: var(--kicker-tracking);
  text-transform: uppercase;
  /* blue-700, not the blue-600 brand accent, because this kicker is 14px
     normal weight and therefore needs 4.5:1. blue-600 measures 4.74 on white
     but only 4.22 on --paper-2 and 4.48 on --paper-1, so it failed on every
     tinted section and merely scraped past on the white ones. blue-700 is
     6.42 on the darkest tint and 7.21 on white, which clears all three
     surfaces this label is used on with room to spare. */
  color: var(--blue-700);
  margin-bottom: var(--sp-3);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  color: var(--text-heading);
}

/* Field primitives, shared by the public quote form. The admin CMS has its own
   .cms-input family in admin.css. */
.field-label {
  display: block;
  font: var(--label);
  color: var(--ink-700);
  margin-bottom: var(--sp-2);
}

.field-input {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper-0);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-sm);
  font-size: 16px; /* never below 16px: iOS zooms the page on focus otherwise */
  color: var(--ink-900);
  transition: border-color var(--speed) var(--ease);
}

.field-input:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: var(--focus-ring);
}

.required {
  color: var(--blue-600);
}