/* Tax Free — marketing-site design system and sole local stylesheet.
   Brand tokens are defined here so every page pays one stylesheet fetch.
   Poppins is self-hosted to remove the cross-origin render-blocking chain. */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/poppins-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/poppins-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-latin-700.woff2") format("woff2");
}

/* ── Tax Free color system ─────────────────────────────────────────────────
   60 / 30 / 10 — 60% white/light surface, 30% near-black text & structure,
   10% Tax Red used surgically for CTAs, key stats and brand moments.
   Base values first, then semantic aliases. */

:root {
  /* ── Brand ── */
  --tax-red:        #d92546;
  --tax-red-dark:   #c11e3d;   /* hover / active for primary */
  --tax-red-light:  #f8d7dc;   /* subtle highlight / error bg */
  --white:          #ffffff;
  --dark:           #212529;   /* body text, headings, dark sections */

  /* ── Neutrals ── */
  --bg:        #f8f9fa;   /* page background, card surface, preferred logo bg */
  --gray:      #5f666d;   /* secondary text, captions, placeholders, icons.
                             #6c757d measured 4.45:1 on --bg — just under WCAG AA
                             (4.5:1) for 14px muted text; this passes at 5.5:1. */
  --border:    #dee2e6;   /* dividers, borders, input outlines */
  --gray-100:  #e9ecef;   /* neutral / pending badge background */
  --row-hover: #f8f9fb;   /* table row hover, expanded row */
  --panel:     #fafbfc;   /* expanded detail-panel background */

  /* ── Status / semantic (text + matching tint background) ── */
  --green:     #198754;  --green-bg:  #d1e7dd;  --green-dark:  #157347;
  --yellow:    #cc8a00;  --yellow-bg: #fff3cd;  --yellow-hover:#ffe69c;
  --blue:      #0d6efd;  --blue-bg:   #cfe2ff;
  --red:       #d92546;  --red-bg:    #f8d7dc;

  /* ── Semantic aliases (use these in product code) ── */
  --color-primary:        var(--tax-red);
  --color-primary-hover:  var(--tax-red-dark);
  --surface-page:         var(--bg);
  --surface-card:         var(--white);
  --surface-muted:        var(--panel);
  --text-strong:          var(--dark);
  --text-body:            var(--dark);
  --text-muted:           var(--gray);
  --text-on-primary:      var(--white);
  --border-default:       var(--border);
  --border-strong:        var(--gray);

  --status-success:       var(--green);
  --status-success-bg:    var(--green-bg);
  --status-warning:       var(--yellow);
  --status-warning-bg:    var(--yellow-bg);
  --status-info:          var(--blue);
  --status-info-bg:       var(--blue-bg);
  --status-error:         var(--red);
  --status-error-bg:      var(--red-bg);
  --status-neutral:       var(--gray);
  --status-neutral-bg:    var(--gray-100);
}

/* ── Tax Free typography ───────────────────────────────────────────────────
   Poppins everywhere. Max 2 weights per component. Sentence case for headings;
   ALL CAPS only for short overline labels. Stats/numbers are always Bold 700. */

:root {
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "SF Mono", "Menlo", "Consolas", ui-monospace, monospace;

  /* weights */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */

  /* type scale — size / line-height / tracking */
  --text-hero-size:   44px;  --text-hero-lh:   1.2;   --text-hero-ls:  -0.5px;  /* H1, 40–48 */
  --text-h2-size:     34px;  --text-h2-lh:     1.25;  --text-h2-ls:    -0.3px;  /* section, 32–36 */
  --text-h3-size:     26px;  --text-h3-lh:     1.3;   --text-h3-ls:     0;       /* subsection, 24–28 */
  --text-h4-size:     20px;  --text-h4-lh:     1.4;   --text-h4-ls:     0;       /* card title */
  --text-body-size:   16px;  --text-body-lh:   1.6;   --text-body-ls:   0;
  --text-small-size:  14px;  --text-small-lh:  1.5;   --text-small-ls:  0.1px;
  --text-button-size: 15px;  --text-button-lh: 1;     --text-button-ls: 0.4px;
  --text-overline-size: 12px; --text-overline-lh: 1;  --text-overline-ls: 0.5px; /* UPPERCASE label */
}

/* ── Tax Free spacing & radius ─────────────────────────────────────────────
   8px base grid. Common steps: 4 / 6 / 8 / 12 / 16 / 20 / 24 / 32px.
   Radius: 10px cards · 8px buttons/inputs/doc cards · 20px pills/badges. */

:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius:        10px;  /* cards */
  --radius-card:   10px;
  --radius-button: 8px;   /* buttons, inputs, doc cards */
  --radius-pill:   20px;  /* pills, badges */
  --radius-logo:   12px;  /* max on logo container */

  --container-max: 1200px;
  --container-pad: 24px 32px;

  --topbar-height: 64px;
  --breakpoint-mobile: 768px;
}

/* ── Tax Free elevation, borders & motion ──────────────────────────────────
   Soft, low shadows. Borders 1px #dee2e6. Stat cards add a 4px status-colored
   left border. Transitions: .15s for color/bg/shadow, .2s for transforms. */

:root {
  --shadow:       0 1px 3px rgba(0, 0, 0, .08);   /* resting cards */
  --shadow-lg:    0 4px 12px rgba(0, 0, 0, .1);    /* hover / raised */
  --shadow-red:   0 2px 8px rgba(217, 37, 70, .1); /* red focus glow */

  --border-width: 1px;
  --border-accent: 4px;   /* stat-card left accent */

  --transition-color: .15s ease; /* @kind other */
  --transition-transform: .2s ease; /* @kind other */
}