@charset "UTF-8";
/* ==========================================================================
   CarHub — theme-indigo.css        THE DEFAULT THEME
   The standard look the platform ships with, and the palette the client
   approved in docs/CARHUB_REDESIGN.md section 3.

   This file is the CONTRACT. Every other theme in this folder must define
   every token named below — tools/theme-audit.py T2 fails if one is missing,
   because a theme with a hole in it renders an invisible button.

   To add a theme: copy this file, change the values, change nothing else.
   Four steps in docs/THEMING.md.

   Semantic rules, and they are rules:
     --action   every primary call to action. The buttons are orange.
     --live     auctions, countdowns and the LIVE dot. Nothing else.
     --ok       verified and trusted. --warning  featured and needs-attention.

   --live AND --danger ARE DELIBERATELY DIFFERENT REDS AND MUST STAY SO.
   Red is the auction colour across this whole project. A shared value would
   make an expiring auction look like a failure, and a failed form look
   urgent-but-fine. They are 0D apart in the red channel and that is enough.
   ========================================================================== */
:root{
  /* ---- Ink and primary ------------------------------------------------
     --ink is the darkest value in the palette and the base every dark
     surface and every shadow is built from. --primary is the BRAND ACCENT:
     the logo mark, links, focus rings, selected states and the make
     monograms. It is not "the top of the page" — the header is white. */
  --ink:#0D1B2A;
  --primary:#17285C;
  --primary-hover:#0F1C45;
  --primary-soft:#E8ECF7;
  --on-primary:#FFFFFF;

  /* ---- Action — the call to action ------------------------------------
     THE CLIENT'S BRAND ORANGE, UNCHANGED. #FF6A00.

     White on it measures 2.87:1, which fails WCAG AA at every size, so the
     text on an orange fill is near-black — 5.58:1 — rather than the orange
     being quietly darkened. --action-text is the same orange darkened for
     the OTHER case: action-coloured TEXT on a light surface, which is what a
     price is. #FF6A00 on white is 2.87:1; #B34700 is 5.50:1. The fill is the
     client's colour; the text beside it is legible. docs/THEMING.md §3. */
  --action:#FF6A00;
  --action-hover:#E85F00;
  --on-action:#3A1800;
  --action-text:#B34700;

  /* ---- Live — auctions and nothing else -------------------------------- */
  --live:#E4322B;
  --live-soft:#FDECEB;
  --on-live:#FFFFFF;
  --live-text:#A32D2D;

  /* ---- Surfaces --------------------------------------------------------
     --bg is the PAGE. --surface is a CARD on it. That distinction is new in
     REDESIGN-01 and it is what makes a white card read as a card:
     docs/CARHUB_REDESIGN.md section 3 lists Background and Surface as two
     rows, and before this cycle the page and the card were both white.

     --surface-dark is the header over the hero, the footer and the seller
     CTA band. --surface-dark-2 is a panel INSIDE one of those. */
  --bg:#F8FAFC;
  --surface:#FFFFFF;
  --surface-alt:#F1F5F9;
  --surface-dark:#0D1B2A;
  --surface-dark-2:#1B263B;

  /* The wash over the hero photograph. It is a colour value and it belongs
     to the theme, not to the component: a lighter theme needs a heavier
     overlay to keep white text at 4.5:1 over a bright photograph. */
  --hero-overlay:rgba(13,27,42,.66);

  /* ---- Text ------------------------------------------------------------ */
  --text:#111827;
  --text-2:#6B7280;
  --text-3:#9AA1B0;
  --text-inverse:#FFFFFF;
  --text-on-dark-2:#B9C2DC;

  /* ---- Borders --------------------------------------------------------- */
  --border:#E5E7EB;
  --border-strong:#C9D0DE;
  --border-dark:#2A3A5C;

  /* ---- Status ----------------------------------------------------------
     Each of the three has a FILL, a TINT and a TEXT value, and they are not
     interchangeable. #16A34A on white is 3.30:1 and #F59E0B on white is
     2.15:1 — both fail AA for body text — so a green or amber WORD uses
     --ok-text / --warning-text and the raw value is kept for the fill, the
     tick and the rule. --on-warning is the near-black that sits on a solid
     amber Featured badge, where white would be 2.15:1. */
  --ok:#16A34A;
  --ok-soft:#E8F6EE;
  --ok-text:#128040;

  --danger:#DC2626;
  --danger-soft:#FEF2F2;
  --danger-text:#B91C1C;

  --warning:#F59E0B;
  --warning-soft:#FEF3E2;
  --warning-text:#B45309;
  --on-warning:#3A2A00;

  /* ---- Elevation -------------------------------------------------------
     The three levels of docs/CARHUB_REDESIGN.md section 5, exactly: card,
     hover, dropdown. Wide and soft rather than tight and dark — the document
     asks for "very subtle shadows rather than heavy borders". */
  --shadow-1:0 4px 20px rgba(17,24,39,.06);
  --shadow-2:0 10px 30px rgba(17,24,39,.08);
  --shadow-3:0 10px 25px rgba(17,24,39,.10);

  --overlay:rgba(13,27,42,.45);

  /* THE LIGHTBOX, REDESIGN-02 Part 4, and it is a SECOND overlay rather than
     a heavier use of the first. --overlay dims the page behind a filter sheet
     and the page must still read as being there; --overlay-strong is the
     ground a photograph is looked AT on, and anything showing through it is a
     distraction from the one thing on screen. Two jobs, two values. */
  --overlay-strong:rgba(13,27,42,.92);

  /* Two focus rings, and the second one is not decoration. --focus-ring on
     --surface-dark measures 1.24:1 — invisible. A keyboard user tabbing the
     nav over the home page hero would have no idea where he was. */
  --focus-ring:#17285C;
  --focus-ring-dark:#FFB27A;

  /* ---- Type ------------------------------------------------------------
     ONE FAMILY, SELF-HOSTED. Inter, from wwwroot/fonts/inter-latin.woff2 —
     see docs/THEMING.md. Three tokens rather than one so that a client who
     wants a display face for headings is a theme file rather than a code
     change; today all three are Inter and that is deliberate.

     --font-num is prices, mileage, countdowns and registration numbers. It
     was --font-mono and it was IBM Plex Mono. Inter's TABULAR figures line
     up in a column, which is the whole reason Inter was chosen over Poppins
     for a site made of "PKR 52.5 lac" and "78,000 km" — base.css sets
     font-variant-numeric on everything that uses this token. */
  --font-display:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --font-num:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
}