/* CONVXA design tokens — Appendix C (CONVXA_DESIGN_SPEC.md) §2.
   SINGLE SOURCE OF TRUTH for the whole codebase.

   Deviation from the literal spec, noted deliberately: §2 says to extend the
   token block inside static/css/supplier.css. But the public pages (products,
   product_details, seo/*) load home.css and never load supplier.css, so tokens
   defined there are unreachable on exactly the pages that matter most. Loading
   the whole supplier portal sheet on public pages would bleed its body/nav
   rules into them.

   So the tokens live here, defined ONCE, and both stylesheets' pages link this
   file. This honours the intent — one source, no competing system — rather than
   the letter. */

/* ═══════════════════════════════════════════════════════════════════════
   CONVXA DESIGN SYSTEM — Appendix C (CONVXA_DESIGN_SPEC.md) §2
   ───────────────────────────────────────────────────────────────────────
   Direction: "Fiche technique". Industrial, dense, legible, light-only.
   This is the single token source for the whole codebase — do not create a
   competing file. The legacy --supplier-* names below are kept as ALIASES
   pointing at these tokens so existing templates keep working.

   Rules that are easy to break, so they are restated here:
     · ONE orange action per screen. Two oranges = no action.
     · --cvx-wa appears on the WhatsApp control and nowhere else.
     · Semantic colours are status only, never decoration, never > badge size.
     · No dark mode. Paint every ground explicitly.
     · No new colour outside this block.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    /* ── Brand ─────────────────────────────────────────────────────── */
    --cvx-navy-900: #021A3A;   /* headers, footer ground */
    --cvx-navy-800: #03244F;   /* PRIMARY */
    --cvx-navy-600: #0A3A75;   /* links, hover on navy fills, focus ring */
    --cvx-navy-100: #E7EDF6;   /* tint fills, table header ground */

    /* ── Action — safety orange, primary action only ───────────────── */
    --cvx-action: #C2410C;     /* text-safe on white; fills carry white text */
    --cvx-action-hi: #E2600F;  /* large fills, hover, icon-only surfaces */
    --cvx-action-50: #FDF0E7;  /* callout ground */

    /* ── WhatsApp — brand-fixed, WhatsApp control only ─────────────── */
    --cvx-wa: #1EA952;         /* darkened from #25D366 for white-text contrast */

    /* ── Neutrals — biased toward navy so greys never read dead ────── */
    --cvx-ink: #101B2B;
    --cvx-ink-2: #41506A;      /* secondary text */
    --cvx-ink-3: #6C7C95;      /* captions, meta */
    --cvx-line: #D8DFE9;
    --cvx-line-soft: #EBF0F6;
    --cvx-surface: #FFFFFF;
    --cvx-ground: #F5F7FA;

    /* ── Semantic — status only ────────────────────────────────────── */
    --cvx-ok: #12703F;   --cvx-ok-bg: #E4F2EA;    /* en stock, livré, payé */
    --cvx-warn: #8A5B04; --cvx-warn-bg: #FBF0D9;  /* sur commande, en attente */
    --cvx-crit: #A32B20; --cvx-crit-bg: #FAE7E4;  /* rupture, retard, à traiter */

    /* ── Type (§2.2) ───────────────────────────────────────────────────
       Plex has a real Arabic sibling sharing the same skeleton, so the FR
       and AR pages read as one company. Weights 400/600/700 only.
       TODO(fonts): self-host WOFF2 Latin+Arabic subsets and preload them —
       the spec forbids linking Google Fonts. Until the files are added the
       fallback stack below renders correctly on its own. */
    --cvx-font-latin: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
    --cvx-font-ar: 'IBM Plex Sans Arabic', 'IBM Plex Sans', Tahoma, sans-serif;
    --cvx-font-num: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

    /* ── Space, shape, elevation (§2.3) ────────────────────────────── */
    --cvx-s1: 4px;  --cvx-s2: 8px;  --cvx-s3: 12px; --cvx-s4: 16px;
    --cvx-s5: 24px; --cvx-s6: 32px; --cvx-s7: 48px; --cvx-s8: 64px;
    --cvx-radius: 4px;          /* everything: cards, inputs, buttons */
    --cvx-radius-pill: 999px;   /* badges only */
    --cvx-shadow-bar: 0 -2px 12px rgba(2, 26, 58, .12); /* sticky bar only */

    /* ── Motion (§2.4) — hover/focus only ──────────────────────────── */
    --cvx-transition: 120ms ease-out;

    /* ═══ Legacy aliases — existing templates depend on these names ═══ */
    --supplier-primary: var(--cvx-navy-800);
    --supplier-primary-dark: var(--cvx-navy-900);
    --supplier-primary-light: var(--cvx-navy-100);
    --supplier-secondary: var(--cvx-navy-600);
    --supplier-accent: var(--cvx-navy-600);
    --supplier-accent-light: var(--cvx-navy-600);

    /* Neutral Colors - Professional Palette */
    --supplier-white: var(--cvx-surface);
    --supplier-gray-50: var(--cvx-ground);
    --supplier-gray-100: var(--cvx-line-soft);
    --supplier-gray-200: var(--cvx-line);
    --supplier-gray-300: var(--cvx-line);
    --supplier-gray-400: var(--cvx-ink-3);
    --supplier-gray-500: var(--cvx-ink-3);
    --supplier-gray-600: var(--cvx-ink-2);
    --supplier-gray-700: var(--cvx-ink-2);
    --supplier-gray-800: var(--cvx-ink);
    --supplier-gray-900: var(--cvx-ink);
    
    /* Status Colors */
    --supplier-success: var(--cvx-ok);
    --supplier-warning: var(--cvx-warn);
    --supplier-danger: var(--cvx-crit);
    --supplier-info: var(--cvx-navy-600);
    
    /* Typography - Inter Font (matching home) */
    --supplier-font-family: var(--cvx-font-latin);
    --supplier-font-size-xs: 0.75rem;
    --supplier-font-size-sm: 0.875rem;
    --supplier-font-size-base: 1rem;
    --supplier-font-size-lg: 1.125rem;
    --supplier-font-size-xl: 1.25rem;
    --supplier-font-size-2xl: 1.5rem;
    --supplier-font-size-3xl: 1.875rem;
    --supplier-font-size-4xl: 2.25rem;
    
    /* Spacing */
    --supplier-space-1: 0.25rem;
    --supplier-space-2: 0.5rem;
    --supplier-space-3: 0.75rem;
    --supplier-space-4: 1rem;
    --supplier-space-5: 1.25rem;
    --supplier-space-6: 1.5rem;
    --supplier-space-8: 2rem;
    --supplier-space-10: 2.5rem;
    --supplier-space-12: 3rem;
    --supplier-space-16: 4rem;
    
    /* Shadows - Subtle and Professional */
    --supplier-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --supplier-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --supplier-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --supplier-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --supplier-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Border Radius - SHARP EDGES (Ralph Lauren Style) */
    --supplier-radius-none: 0;              /* Sharp edges everywhere */
    --supplier-radius-sm: 0;
    --supplier-radius-base: 0;
    --supplier-radius-md: 0;
    --supplier-radius-lg: 0;
    --supplier-radius-xl: 0;
    --supplier-radius-2xl: 0;
    --supplier-radius-3xl: 0;
    
    /* Transitions */
    --supplier-transition-fast: 150ms ease-in-out;
    --supplier-transition-base: 200ms ease-in-out;
    --supplier-transition-slow: 300ms ease-in-out;
    
    /* Gradients - Professional Blue Gradients */
    --supplier-gradient-primary: linear-gradient(135deg, #03244F 0%, #021a38 100%);
    --supplier-gradient-accent: linear-gradient(135deg, #1094e9 0%, #03244F 100%);
    --supplier-gradient-light: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

/* ═══════════════════════════════════════════════════════════════════════
   Sticky contact bar — Appendix C §3.1
   Lives here (not in a page sheet) because it is included on both home.css
   and supplier.css surfaces.
   ═══════════════════════════════════════════════════════════════════════ */
.cvx-bar{ font-family:var(--cvx-font-latin); }
.cvx-bar__strip{
  margin:0; background:var(--cvx-navy-800); color:var(--cvx-surface);
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  height:28px; display:flex; align-items:center; justify-content:center;
  text-align:center; padding-inline:var(--cvx-s3);
}
.cvx-bar__tel-lg{ display:none; }
.cvx-bar__actions{ display:flex; gap:0; }
.cvx-bar__btn{
  flex:1 1 50%; min-height:52px;               /* gloved thumb target */
  display:inline-flex; align-items:center; justify-content:center; gap:var(--cvx-s2);
  font-size:15px; font-weight:600; color:var(--cvx-surface); text-decoration:none;
  border:0; border-radius:0;
  transition:background var(--cvx-transition);
}
.cvx-bar__btn svg{ flex:none; }
.cvx-bar__btn--call{ background:var(--cvx-action); }       /* THE one orange action */
.cvx-bar__btn--call:hover{ background:var(--cvx-action-hi); }
.cvx-bar__btn--wa{ background:var(--cvx-wa); }             /* WhatsApp only */
.cvx-bar__btn--wa:hover{ filter:brightness(.92); }
.cvx-bar__quiet, .cvx-bar__note{ display:none; }

/* Mobile: fixed to the bottom (both placements) */
@media (max-width:767px){
  .cvx-bar{
    position:fixed; inset-inline:0; bottom:0; z-index:1200;
    box-shadow:var(--cvx-shadow-bar);
    padding-bottom:env(safe-area-inset-bottom, 0px);
    background:var(--cvx-surface);
  }
  /* reserve space so the bar never covers the last line (CLS budget) */
  body{ padding-bottom:80px; }
}

/* Desktop, in-column (product detail): sticky card on navy, per §3.1 */
@media (min-width:768px){
  .cvx-bar--column{
    position:sticky; top:24px;
    background:var(--cvx-navy-800); color:var(--cvx-surface);
    border-radius:var(--cvx-radius); overflow:hidden;
    max-width:360px; margin-inline-start:auto;
  }
  .cvx-bar__body{ padding:var(--cvx-s5); display:grid; gap:var(--cvx-s3); }
  .cvx-bar__tel-lg{
    display:block; margin:0;
    font-family:var(--cvx-font-num); font-variant-numeric:tabular-nums;
    font-size:24px; font-weight:600; line-height:1.2;
  }
  .cvx-bar__tel-lg a{ color:var(--cvx-surface); text-decoration:none; }
  .cvx-bar__tel-lg a:hover{ text-decoration:underline; }
  .cvx-bar__actions{ flex-direction:column; gap:var(--cvx-s2); }
  .cvx-bar__btn{ border-radius:var(--cvx-radius); flex:none; width:100%; }
  .cvx-bar__strip{
    background:transparent; height:auto; justify-content:flex-start;
    text-align:start; padding:0; opacity:.72; order:-1;
  }
  .cvx-bar__quiet{
    display:inline-block; color:var(--cvx-surface); font-size:14px;
    text-decoration:underline; text-underline-offset:3px;
    text-decoration-color:var(--cvx-navy-600);
  }
  .cvx-bar__quiet:hover{ text-decoration-color:var(--cvx-surface); }
  .cvx-bar__note{ display:block; margin:0; font-size:13px; opacity:.7; }
}

/* Desktop, floating (listing / SEO pages — no right column exists): stay
   bottom-fixed rather than render as an orphan card at the end of the page. */
@media (min-width:768px){
  .cvx-bar--floating{
    position:fixed; inset-inline:0; bottom:0; z-index:1200;
    background:var(--cvx-surface); box-shadow:var(--cvx-shadow-bar);
  }
  .cvx-bar--floating .cvx-bar__body{ display:flex; align-items:stretch; }
  .cvx-bar--floating .cvx-bar__actions{ flex-direction:row; margin-inline-start:auto; max-width:520px; }
  .cvx-bar--floating .cvx-bar__btn{ padding-inline:var(--cvx-s6); }
  .cvx-bar--floating .cvx-bar__tel-lg,
  .cvx-bar--floating .cvx-bar__note,
  .cvx-bar--floating .cvx-bar__quiet{ display:none; }
  body:has(.cvx-bar--floating){ padding-bottom:84px; }
}

/* §6 accessibility floor */
.cvx-bar a:focus-visible{ outline:2px solid var(--cvx-navy-600); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .cvx-bar__btn{ transition:none; } }