/* ============================================================
   MOTORCLASS — "LA PRUEBA" design system
   Canonical token file. Single source of truth.
   The /brandbook page parses THIS file at runtime, so anything
   changed here is documented automatically. Do not duplicate
   these values anywhere else.
   ============================================================ */

:root{
  color-scheme: light;

  /* ---- SURFACES ------------------------------------------
     Cool near-white page, pure white cards. Cards lift off the page
     with the reference's 12px shadow, and a hairline as the fallback edge because
     shadows fade in glare. */
  --mc-bg:        #F4F6FA;  /* page ground */
  --mc-surface:   #FFFFFF;  /* raised: vehicle cards, forms */
  --mc-band:      #E8EDF5;  /* alternating section band. Darkest light surface
                               — every text token is proven against THIS one */
  --mc-blue-tint: #EBF1FA;  /* blue wash. Max one section per page */

  /* ---- NAVY — footer and any fixed bar --------------------
     Deliberately not near-black: 1.55:1 against #000 so it still reads as
     navy on a cheap 6-bit Android panel. car-planet's own "navy" is 1.08:1
     from black — functionally black. */
  --mc-navy:      #0E2E57;  /* 13.57:1 with white */
  --mc-navy-line: #2B4D73;  /* hairline inside navy. Decorative only */

  /* ---- INK — blue-cast, never pure black ------------------
     #000 haloes in direct sun on a phone fighting reflections. */
  --mc-ink:       #111C2E;  /* headings, body, spec values. 15.79:1 on bg */
  --mc-ink-2:     #475467;  /* labels, captions, metadata. 7.10:1 on bg */
  --mc-ink-3:     #5D6B80;  /* LIGHTEST TEXT PERMITTED. 4.60:1 on --mc-band */

  --mc-on-navy:   #FFFFFF;  /* 13.57:1 */
  --mc-on-navy-2: #A6B6C8;  /* 6.56:1 on navy. NEVER on light (2.07:1) */

  /* ---- BORDERS — three tiers ------------------------------ */
  --mc-hairline:  #E3E8F0;  /* decorative: list separators */
  --mc-rule:      #C9D2DF;  /* structural: card edge, section divider */
  --mc-control:   #7A889B;  /* MUST-PASS: inputs, textareas, the sign-off box.
                               >=3:1 on all four grounds (3.33/3.61/3.07/3.76) */

  /* ---- BLUE — the brand, hue 213 --------------------------
     Below 220 to stay out of the OLED violet shift; above 208 to stay out
     of municipal cyan. At 37% lightness one value does two jobs: 7.13:1 as
     link text AND as a button fill with a white label. */
  --mc-blue:       #1558D6;  /* PRIMARY. Hue 219, under the 220 OLED ceiling.
                                6.18:1 white label, 5.71 on bg, 5.26 on band.
                                Was #0E56AC, which measured as navy next to
                                car-planet's #1B55EC. */
  --mc-blue-dark:  #093E7D;  /* hover, pressed, large headings. 9.72:1 on bg */
  --mc-blue-light: #6CAAE7;  /* links and icons ON NAVY ONLY. 5.52:1 on navy.
                                Forbidden on light: 2.46:1 */
  --mc-blue-100:   var(--mc-blue-tint);  /* chips share the wash. One value, one name */

  /* ---- ACCENT — the darker red step, for small text and errors ----
     Two jobs: the contact CTA, and the price. Nothing else.
     car-planet pairs its blue with a warm red-orange (#E65848) that fails
     at 3.59:1 both ways; this keeps the relationship and fixes the contrast. */
  --mc-accent:      #A8330F;  /* the darker red step: 13-16px text, error borders.
                                6.68:1 on white. 1.25:1 from --mc-price - a step the
                                eye can see; the old #C03D15 was 1.006:1 from it */
  --mc-price:       #C6352A;  /* the price. car-planet's coral hue (OKLCH 29°)
                                at the lightness that passes 4.5 on EVERY ground:
                                5.32 white, 4.92 bg, 4.53 band, 4.69 tint. Was --mc-accent, 9° browner
                                and 11 points darker, which is exactly "rust". */
  --mc-accent-dark: #9D3110;  /* hover; label colour when a CTA sits on navy */
  --mc-accent-tint: #FBEAE5;  /* price chip ground */

  /* ---- STATE — exactly two, neither a Bootstrap default --- */
  /* ---- WHATSAPP — the channel colour, and the system's ONE green ----
     "One accent only" is restated: one brand accent (price, errors) plus one
     channel colour reserved for the WhatsApp affordance and for send/opened
     confirmations. That is car-planet's distribution exactly.
     White on the brand #25D366 is 1.98:1 and fails everywhere, including on
     their own site. This is WhatsApp's hue (OKLCH ~150°) at the lightness
     that clears 4.5:1 with a white 16px label. */
  --mc-wa:        #017B37;  /* 5.40:1 white label; 4.99 vs bg, 4.59 vs band */
  --mc-wa-dark:   #006E30;  /* hover; label colour when the CTA sits on navy (6.42 on white) */
  --mc-wa-deep:   #075E54;  /* WhatsApp's own dark teal (their brand palette). A FIELD,
                               not a button: the /contacto band. 7.67:1 white. Deep
                               like the marque rows (OKLCH L .43), and 74° from the
                               blue beside it instead of 112°, so the seam between
                               them does not vibrate. Buttons keep --mc-wa. */
  --mc-wa-tint:   #E3F7EF;  /* confirmation ground. 4.87:1 with --mc-wa text */
  --mc-ok:        #017B37;  /* = --mc-wa. Confirmation only, never "disponible" */
  --mc-ok-tint:   var(--mc-wa-tint);
  --mc-warn:      #7B5200;  /* indicative: "precio orientativo", "km aprox." */
  --mc-warn-tint: #FDF4E3;

  /* ---- FOCUS — two rings, and this is why -----------------
     A single ink ring drawn on the blue fill measures 2.40:1 and fails
     SC 1.4.11. The white inner ring means the ink ring only ever touches
     white (17.08) or the ground (15.79). */
  --mc-focus:       #111C2E;
  --mc-focus-inner: #FFFFFF;

  /* ---- CHROME HEIGHTS ------------------------------------- */
  --mc-head-h: 56px;
  --mc-bar-h:  64px;

  /* ---- TYPEFACES ----------------------------------------- */
  /* DM Sans is what car-planet renders on 485 of 509 measured text nodes. Taken
     on the owner's instruction to get as close as possible; one family, no serif,
     exactly as they do. */
  --f-ui:    "DM Sans","DM Sans Fallback","Helvetica Neue",Arial,sans-serif;
  --f-voice: "DM Sans","DM Sans Fallback","Helvetica Neue",Arial,sans-serif;

  /* ---- TYPE SCALE — fluid 390px → 1200px, base 16px ------- */
  /* slopes solved for exactly 390px → 1200px, so a 390px phone renders the floor */
  --t-display: var(--t-h1);   /* one 34 → 52 step; two names would be two ladders */
  /* One step above the ladder, for a page that opens with a statement rather
     than a heading. Added because the ladder stops at 52px and 52px is a
     caption, not the first thing anyone is meant to see. Used on the contact
     page's opening line and nowhere else; if a second page needs it, it is a
     ladder step, not a one-off.
     The ceiling is 100, not 112: the line sits in a 7-of-12 column beside a
     photograph, not across the full page. Measured, not guessed — the longest
     line renders 461px at 88px in a 663px column, and the size that keeps a
     comfortable margin at every width down to the 900px split breakpoint (431
     of 488 there) is 100. The size is set by the measure it has to fit. */
  --t-mega:    clamp(3.25rem,1.8056rem + 5.9259vw,6.25rem);    /* 52 → 100 */
  --t-h1:      clamp(2.125rem,1.5833rem + 2.2222vw,3.25rem);   /* 34 → 52 */
  --t-h2:      clamp(1.75rem,1.3889rem + 1.4815vw,2.5rem);     /* 28 → 40. car-planet's h2 is 40 */
  --t-sub:     1.125rem;                                    /* 18. the grey line under an h2 */
  --t-h3:      1.125rem;                                    /* 18 fixed */
  --t-price:   clamp(1.75rem,1.5093rem + 0.9877vw,2.25rem);    /* 28 → 36 */
  --t-km:      clamp(1.375rem,1.1944rem + 0.7407vw,1.75rem);   /* 22 → 28 */
  --t-prose:   clamp(1.0625rem,1.0324rem + 0.1235vw,1.125rem); /* 17 → 18 */
  --t-body:    1rem;                                        /* 16 fixed */
  --t-ui:      1rem;                                        /* 16 fixed */
  --t-value:   1.0625rem;                                   /* 17 fixed */
  --t-small:   0.875rem;                                    /* 14 fixed */
  --t-label:   0.8125rem;                                   /* 13 fixed — system floor */
  --t-caption: clamp(0.875rem,0.8148rem + 0.2469vw,1rem);   /* 14 → 16, italic. the customer's words */

  /* ---- SHAPE — measured on car-planet, not assumed ---------
     Their filled and outlined CTAs are 10px in 100% of cases, cards 22px in
     26/26, chips 4px in 144/169. The earlier "0px everywhere" held only for
     photographs and bare text links, and it read as old-school. */
  --mc-r-s:    4px;      /* chips, badges, small tabs, spec rows */
  --mc-r:     10px;      /* buttons, inputs */
  --mc-r-l:   22px;      /* BRANDBOOK SPECIMENS ONLY. Product cards are --mc-r-card 0px (square). Was car-planet's card radius */
  --mc-r-pill: 999px;    /* icon discs only */
  /* The foot of the page. Two stops of one descent, on the navy hue (256°):
     the top joins the last marque field, the bottom is where the name is cut.
     Measured against the fields above it — Mercedes, the darkest, is L .20;
     these are L .165 and L .14, so the page ends lower than anything on it. */
  --mc-deep:    #040B1F;
  --mc-deep-2:  #02061A;
  --mc-scrim:   4, 7, 14;    /* the black used inside gradients over photographs, as
                                channels so it can carry an alpha. Was written as a
                                literal rgba(4,7,14,…) in catalog.css and #05070C in
                                car.css — three names for one idea. */
  --mc-r-card:  0px;     /* the car card and everything inside it: frame, price box,
                            badge. Square, because on a full-bleed marque field a
                            rounded card pulls the eye into itself while a square one
                            lets the colour hold the row — and because sharp corners
                            read as serious where rounded read as friendly. One token,
                            so the card cannot go half-square by accident. */

  /* ---- ELEVATION — shadow PLUS hairline, never instead of ----
     car-planet's exact card shadow. Shadows fade in glare, so the hairline
     stays as the fallback edge. */
  --mc-shadow-1: 0 0 12px rgba(16,24,40,.10);
  --mc-shadow-2: 0 4px 12px rgba(16,24,40,.10);
  --mc-shadow-up: 0 -4px 12px rgba(16,24,40,.08);

  /* ---- SPACING — 4px base, 10 values, no others ----------- */
  --s-1:.25rem;  --s-2:.5rem;   --s-3:.75rem;  --s-4:1rem;    --s-5:1.5rem;
  --s-6:2rem;    --s-7:3rem;    --s-8:4rem;    --s-9:6rem;    --s-10:8rem;

  /* ---- ASPECT RATIOS ------------------------------------- */
  --ar-card:      4 / 3;    /* vehicle card, gallery thumb */
  --ar-hero-m:    4 / 3;    /* detail lead photo, mobile */
  --ar-hero-d:    3 / 2;    /* detail lead photo, desktop */
  --ar-portrait:  4 / 5;    /* LEGACY — brandbook specimen only. Product testimonial photos are never cropped (CLAUDE.md §5) */
  --ar-tall:      5 / 7;    /* tall-tail testimonial (ratio < 0.62). 3/4 was measured
                               against the real library and FAILS the 25% rule
                               on 1 file (27.6%); 5/7 gives 23.9% worst case. */
  --ar-wide:      4 / 3;    /* landscape testimonial */
  --ar-editorial: 3 / 2;    /* section imagery */
  --ar-social:   40 / 21;   /* 1200×630 OG, generated, never displayed */

  /* Object-position for customer photographs. NOT "top": a skin-tone scan of
     all 25 files puts the face band at 20-50% depth, peaking at 30-40%. Only
     8.8% of skin pixels are in the top fifth, which is sky and warehouse
     ceiling. Biasing upward preserves empty headroom and eats the car. */
  --pos-portrait: 50% 40%;  /* LEGACY — only meaningful where something is cropped; product testimonial photos are not */
  --pos-vehicle:  50% 42%;   /* protects the roofline */

  /* ---- SOLD --------------------------------------------------
     A car that is gone is still worth showing: 31 of the 32 sold cars carry
     five or more of the dealer's own photographs, and they are the evidence
     that he sells what he says he sells. The state has to read at a glance
     without destroying them.
     grayscale(100%) is what the catalogue card used, and it turns a car into an
     archive scan — no red is red, no marque colour survives.
     Chosen by rendering .60 / .72 / .82 / .90 on the same photograph of a red
     Clio and looking. At .60 and .72 it is still a red car, which is not what
     was asked for; at .90 the colour is gone. At .82 it reads as grey with a
     red cast — "sa aiba si culoare dar sa bata si ele in gri" — and the
     contrast nudge puts back what desaturation flattens.
     One token, because the card and the car page must agree: clicking a grey
     card into a differently-grey page is exactly the kind of seam that reads
     as unfinished. */
  --mc-sold-img: grayscale(.82) contrast(1.05);

  /* ---- MOTION -------------------------------------------- */
  --m-instant:  80ms;   /* press down */
  --m-quick:   160ms;   /* colour, border, opacity */
  --m-state:   220ms;   /* focus, header state */
  --m-move:    280ms;   /* the sending button's line, accordion, panel */
  --m-reveal:  420ms;   /* the single scroll reveal */

  --e-out:   cubic-bezier(.22,.61,.36,1);
  --e-inout: cubic-bezier(.4,0,.2,1);
  --e-in:    cubic-bezier(.4,0,1,1);
  --e-line:  cubic-bezier(.65,0,.35,1);   /* the sending line: drawn, not thrown */

  /* ---- LAYOUT -------------------------------------------- */
  --mc-container: 1200px;
  --mc-gutter-m:  1rem;
  --mc-gutter-d:  2rem;
  --mc-tap:       44px;    /* absolute minimum touch target */
  --mc-tap-pref:  48px;    /* preferred touch target */
}

/* Metric-matched fallbacks: the page does not reflow when the webfont lands */
@media (min-width:768px){ :root{ --mc-head-h:72px; } }

@font-face{ font-family:"DM Sans Fallback"; src:local("Arial"),local("Helvetica Neue");
  size-adjust:101%; ascent-override:96%; descent-override:27%; line-gap-override:0%; }