/* ==========================================================================
   VanTele Brand Tokens — the single source of truth
   ==========================================================================
   Import this FIRST in every VanTele asset (site pages, documents, emails
   rendered to PDF, print artwork). Never hardcode a brand color, font, or
   radius anywhere else — use these custom properties.

   Fonts are SELF-HOSTED (static/brand/fonts/ — variable TTFs, Syne 400–800 +
   DM Sans 100–1000) so documents render identically in browsers, headless
   printing, and server-side WeasyPrint, with no dependency on Google Fonts.

   NOTE: legacy variables (--primary-color, --secondary-color…) still live in
   static/css/custom.css and keep their current values so nothing on the live
   site shifts. New work uses --vt-* only; migrate old CSS gradually.
   ========================================================================== */

@font-face {
  font-family: 'Syne';
  src: url('fonts/Syne.ttf') format('truetype-variations'),
       url('fonts/Syne.ttf') format('truetype');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans.ttf') format('truetype-variations'),
       url('fonts/DMSans.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Color: core palette ------------------------------------------- */
  --vt-navy:        #1a2f54;   /* primary — headers, wordmark, footers    */
  --vt-navy-dark:   #0f1f3a;   /* deep backgrounds, gradients             */
  --vt-navy-alt:    #2A4B7C;   /* legacy site primary — links on light    */
  --vt-teal:        #028090;   /* brand accent — actions, highlights      */
  --vt-teal-light:  #03a8bf;   /* hovers, gradients, dark-bg accents      */
  --vt-green:       #00A86B;   /* success, money-in, badges               */
  --vt-green-light: #00c97f;   /* success hovers, dark-bg success         */
  --vt-green-text:  #007a4d;   /* green that passes 4.5:1 on white        */
  --vt-amber:       #F59E0B;   /* warnings, pending states                */
  --vt-red:         #EF4444;   /* errors, destructive actions             */

  /* ---- Color: neutrals ------------------------------------------------ */
  --vt-offwhite:    #F8FAFC;   /* page background                         */
  --vt-white:       #ffffff;
  --vt-slate:       #64748B;   /* secondary text on light                 */
  --vt-slate-light: #cbd5e1;   /* borders, dividers                       */
  --vt-ink:         #0f172a;   /* body text on light                      */

  /* ---- Color: semantic aliases (use these in components) -------------- */
  --vt-bg:              var(--vt-offwhite);
  --vt-surface:         var(--vt-white);
  --vt-text:            var(--vt-ink);
  --vt-text-muted:      var(--vt-slate);
  --vt-text-inverse:    var(--vt-offwhite);
  --vt-border:          var(--vt-slate-light);
  --vt-link:            var(--vt-teal);
  --vt-success:         var(--vt-green-text);
  --vt-warning:         var(--vt-amber);
  --vt-danger:          var(--vt-red);

  /* ---- Typography ------------------------------------------------------ */
  --vt-font-display: 'Syne', 'Arial Black', system-ui, sans-serif;
  --vt-font-body:    'DM Sans', 'Segoe UI', system-ui, sans-serif;

  /* Type scale (1.250 ratio, rem-based) */
  --vt-text-xs:   0.75rem;   /* 12px — legal, captions                    */
  --vt-text-sm:   0.875rem;  /* 14px — secondary, table cells             */
  --vt-text-base: 1rem;      /* 16px — body                               */
  --vt-text-lg:   1.25rem;   /* 20px — lead paragraphs                    */
  --vt-text-xl:   1.5625rem; /* 25px — h3                                 */
  --vt-text-2xl:  1.953rem;  /* 31px — h2                                 */
  --vt-text-3xl:  2.441rem;  /* 39px — h1                                 */
  --vt-text-4xl:  3.052rem;  /* 49px — display / hero                     */

  --vt-weight-body:      400;
  --vt-weight-medium:    500;
  --vt-weight-semibold:  600;
  --vt-weight-bold:      700;
  --vt-weight-display:   800;  /* Syne headlines & wordmark               */

  --vt-leading-tight: 1.15;    /* headings                                */
  --vt-leading-body:  1.6;     /* body copy                               */

  /* ---- Radius (spec: 14 cards · 8 inputs · 50 pills) ------------------- */
  --vt-radius-card:  14px;
  --vt-radius-input: 8px;
  --vt-radius-pill:  50px;

  /* ---- Spacing scale ---------------------------------------------------- */
  --vt-space-1: 0.25rem;   /*  4px */
  --vt-space-2: 0.5rem;    /*  8px */
  --vt-space-3: 0.75rem;   /* 12px */
  --vt-space-4: 1rem;      /* 16px */
  --vt-space-6: 1.5rem;    /* 24px */
  --vt-space-8: 2rem;      /* 32px */
  --vt-space-12: 3rem;     /* 48px */
  --vt-space-16: 4rem;     /* 64px */

  /* ---- Elevation --------------------------------------------------------- */
  --vt-shadow-sm: 0 2px 4px rgba(15, 31, 58, 0.06);
  --vt-shadow-md: 0 4px 12px rgba(15, 31, 58, 0.10);
  --vt-shadow-lg: 0 12px 32px rgba(15, 31, 58, 0.16);

  /* ---- Brand gradients ----------------------------------------------------- */
  --vt-gradient-navy: linear-gradient(160deg, var(--vt-navy) 0%, var(--vt-navy-dark) 100%);
  --vt-gradient-teal: linear-gradient(160deg, var(--vt-teal-light) 0%, var(--vt-teal) 100%);
}

/* ==========================================================================
   Base document styles for brand assets (documents, letterhead, invoices).
   Scoped under .vt-doc so importing this file never restyles existing pages.
   ========================================================================== */

.vt-doc {
  font-family: var(--vt-font-body);
  font-size: var(--vt-text-base);
  font-weight: var(--vt-weight-body);
  line-height: var(--vt-leading-body);
  color: var(--vt-text);
  background: var(--vt-surface);
  -webkit-font-smoothing: antialiased;
}

.vt-doc h1, .vt-doc h2, .vt-doc h3 {
  font-family: var(--vt-font-display);
  font-weight: var(--vt-weight-display);
  line-height: var(--vt-leading-tight);
  color: var(--vt-navy);
  margin: 0 0 var(--vt-space-4);
}
.vt-doc h1 { font-size: var(--vt-text-3xl); }
.vt-doc h2 { font-size: var(--vt-text-2xl); }
.vt-doc h3 { font-size: var(--vt-text-xl); }

.vt-doc a { color: var(--vt-link); text-decoration: none; }
.vt-doc a:hover { text-decoration: underline; }

.vt-doc .vt-muted { color: var(--vt-text-muted); }
.vt-doc .vt-tagline {
  font-family: var(--vt-font-display);
  font-weight: var(--vt-weight-semibold);
  color: var(--vt-teal);
}

/* Money — always right-aligned, tabular figures */
.vt-doc .vt-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Cards / panels */
.vt-doc .vt-card {
  background: var(--vt-surface);
  border: 1px solid var(--vt-border);
  border-radius: var(--vt-radius-card);
  box-shadow: var(--vt-shadow-sm);
  padding: var(--vt-space-6);
}

/* Status badges */
.vt-doc .vt-badge {
  display: inline-block;
  padding: 0.2em 0.9em;
  border-radius: var(--vt-radius-pill);
  font-size: var(--vt-text-sm);
  font-weight: var(--vt-weight-bold);
  letter-spacing: 0.02em;
}
.vt-doc .vt-badge--paid    { background: var(--vt-green); color: var(--vt-white); }
.vt-doc .vt-badge--pending { background: var(--vt-amber); color: var(--vt-navy-dark); }
.vt-doc .vt-badge--overdue { background: var(--vt-red);   color: var(--vt-white); }
.vt-doc .vt-badge--draft   { background: var(--vt-slate-light); color: var(--vt-ink); }