/* ============================================================
   PayVault — Brand & Product Design System
   v1.0 · April 2026
   Drop-in CSS custom properties.
   ----------------------------------------------------------------
   Conventions
   - Tokens are namespaced --pv-*
   - Color uses oklch() so per-tenant overrides stay perceptually
     consistent (chroma/lightness preserved when only hue changes).
   - The 14 tokens marked [WHITE-LABEL] may be overridden per
     tenant. Everything else stays locked — that’s what keeps a
     PayVault invoice still feeling like a PayVault invoice.
   - Two surfaces, one system:
       App   → sharp 2px borders, --pv-radius-app    (locked at 2px)
       Mktg  → soft 8–24px radii, --pv-radius-mktg-* (overridable)
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLOR · CORE  (PayVault Brand Kit v1.0)
     ---------------------------------------------------------- */
  --pv-ink:        #0B1929;                 /* Navy — body text, primary dark */
  --pv-ink-2:      #1D6FEB;                 /* Blue — primary action */
  --pv-ink-3:      #4A8FF5;                 /* Blue Light — hover / link */
  --pv-ink-fg:     #ffffff;                 /* foreground on brand */

  /* COLOR · NEUTRAL RAMP (brand kit navy-slate scale) */
  --pv-neutral-50:  #F7F9FC;               /* White */
  --pv-neutral-100: #E8F0FE;               /* Blue Pale */
  --pv-neutral-200: #C4D0DE;               /* Silver Light */
  --pv-neutral-300: #C4D0DE;               /* Silver Light — hairline / divider */
  --pv-neutral-400: #8A9BB0;               /* Silver */
  --pv-neutral-500: #4A5D73;               /* Slate — muted text */
  --pv-neutral-600: #4A5D73;               /* Slate */
  --pv-neutral-700: #1E3550;               /* Navy Light */
  --pv-neutral-800: #152337;               /* Navy Mid */
  --pv-neutral-900: #0B1929;               /* Navy */

  /* Convenience aliases */
  --pv-paper:    var(--pv-neutral-50);
  --pv-paper-2:  var(--pv-neutral-100);
  --pv-paper-3:  var(--pv-neutral-200);
  --pv-line:     var(--pv-neutral-300);
  --pv-muted:    var(--pv-neutral-500);

  /* ----------------------------------------------------------
     COLOR · ACCENT & SEMANTIC
     ---------------------------------------------------------- */
  --pv-accent:        #15803D;               /* Success — Charged / Paid */
  --pv-accent-soft:   #dcfce7;
  --pv-accent-strong: #15803D;
  --pv-accent-fg:     #ffffff;

  --pv-success:       #15803D;
  --pv-success-soft:  #dcfce7;

  --pv-warn:          #D97706;               /* Warning — Pending / Review */
  --pv-warn-soft:     #fef3c7;
  --pv-warn-strong:   #D97706;
  --pv-warn-fg:       #ffffff;

  --pv-danger:        #B91C1C;               /* Error — Failed / Declined */
  --pv-danger-soft:   #fee2e2;
  --pv-danger-strong: #B91C1C;
  --pv-danger-fg:     #ffffff;

  --pv-info:          #1D6FEB;               /* Info / Action — Links / Buttons */
  --pv-info-soft:     #E8F0FE;
  --pv-info-strong:   #1D6FEB;
  --pv-info-fg:       #ffffff;

  /* ----------------------------------------------------------
     COLOR · DARK SURFACES
     For the nav bar, login left panel, and contact-form section.
     Not a full dark mode — a deliberate accent against parchment.
     ---------------------------------------------------------- */
  --pv-dark-1: #0B1929;                /* Navy — nav, login left, contact */
  --pv-dark-2: #152337;                /* Navy Mid — cards on dark */
  --pv-dark-3: #1E3550;                /* Navy Light — dividers on dark */
  --pv-dark-fg:        #F7F9FC;
  --pv-dark-fg-muted:  #8A9BB0;        /* Silver */

  /* ----------------------------------------------------------
     SURFACE · APP / MARKETING
     ---------------------------------------------------------- */
  --pv-bg-app:           #F7F9FC;
  --pv-bg-app-elevated:  #ffffff;
  --pv-bg-mktg:          var(--pv-paper);
  --pv-bg-mktg-alt:      var(--pv-paper-2);

  /* ----------------------------------------------------------
     TYPOGRAPHY · FAMILIES
     ---------------------------------------------------------- */
  --pv-font-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system,
                  'Segoe UI', Helvetica, Arial, sans-serif;
  --pv-font-heading: 'DM Sans', ui-sans-serif, system-ui, -apple-system,
                  'Segoe UI', Helvetica, Arial, sans-serif;
  --pv-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular',
                  Menlo, Consolas, monospace;
  --pv-font-body: var(--pv-font-sans);

  /* TYPOGRAPHY · SIZES (px) */
  --pv-text-display:   64px;   /* marketing hero */
  --pv-text-h1:        44px;
  --pv-text-h2:        32px;
  --pv-text-h3:        24px;
  --pv-text-body:      16px;
  --pv-text-body-sm:   14px;
  --pv-text-small:     14px;
  --pv-text-xs:        12px;
  --pv-text-eyebrow:   12px;   /* mono, +0.10em tracking */

  /* Slide / projection scale (used in marketing presentations) */
  --pv-text-slide-title:    64px;
  --pv-text-slide-subtitle: 44px;
  --pv-text-slide-body:     34px;
  --pv-text-slide-small:    28px;

  /* TYPOGRAPHY · LINE HEIGHTS */
  --pv-leading-tight:   1.05;
  --pv-leading-snug:    1.2;
  --pv-leading-normal:  1.4;
  --pv-leading-relaxed: 1.55;

  /* TYPOGRAPHY · WEIGHTS */
  --pv-weight-regular:  400;
  --pv-weight-medium:   500;
  --pv-weight-semibold: 600;
  --pv-weight-bold:     700;
  --pv-weight-black:    800;

  /* TYPOGRAPHY · TRACKING */
  --pv-track-tight:   -0.025em;  /* display */
  --pv-track-snug:    -0.02em;   /* h1/h2 */
  --pv-track-normal:   0;
  --pv-track-eyebrow:  0.10em;   /* mono UPPERCASE labels */

  /* TYPOGRAPHY · NUMERIC */
  --pv-numeric-tabular: tabular-nums;

  /* ----------------------------------------------------------
     SPACING · 4px base
     ---------------------------------------------------------- */
  --pv-s-0:   0px;
  --pv-s-1:   4px;    /* hairline gap */
  --pv-s-2:   8px;    /* icon ↔ label */
  --pv-s-3:   12px;   /* field gap */
  --pv-s-4:   16px;   /* default block gap */
  --pv-s-5:   20px;
  --pv-s-6:   24px;   /* card padding */
  --pv-s-8:   32px;   /* section gap */
  --pv-s-10:  40px;
  --pv-s-12:  48px;   /* page header */
  --pv-s-16:  64px;   /* marketing module */
  --pv-s-20:  80px;
  --pv-s-24:  96px;   /* hero / dark band */
  --pv-s-32:  128px;

  /* ----------------------------------------------------------
     BORDER · RADIUS
     Rule: app = sharp 2px (locked). Marketing = 8–24px.
     ---------------------------------------------------------- */
  --pv-radius-app:        2px;          /* LOCKED — never override */
  --pv-radius-app-pill:   2px;          /* badges in app */
  --pv-radius-mktg-sm:    8px;          /* [WHITE-LABEL] */
  --pv-radius-mktg-md:    12px;         /* [WHITE-LABEL] */
  --pv-radius-mktg-lg:    16px;         /* [WHITE-LABEL] */
  --pv-radius-mktg-xl:    24px;         /* [WHITE-LABEL] */
  --pv-radius-pill:       999px;        /* marketing pills only */
  --pv-radius-circle:     50%;

  /* BORDER · WIDTHS */
  --pv-border-hairline: 1px;
  --pv-border-default:  2px;            /* the app standard */
  --pv-border-strong:   3px;

  /* BORDER · COLORS */
  --pv-border:        var(--pv-line);
  --pv-border-strong-color: var(--pv-ink);
  --pv-border-focus:  var(--pv-ink-2);

  /* ----------------------------------------------------------
     SHADOW
     App uses essentially no shadow (sharpness comes from borders).
     Marketing uses soft, ink-tinted shadows.
     ---------------------------------------------------------- */
  --pv-shadow-none:  none;
  --pv-shadow-app:   0 0 0 transparent;                                       /* app: no shadow */
  --pv-shadow-focus: 0 0 0 4px rgba(29,111,235,0.18);                          /* focus halo */
  --pv-shadow-focus-danger: 0 0 0 4px rgba(185,28,28,0.20);
  --pv-shadow-mktg-xs: 0 1px 2px -1px rgba(11,25,41,0.10);
  --pv-shadow-mktg-sm: 0 4px 12px -6px rgba(11,25,41,0.15);
  --pv-shadow-mktg-md: 0 12px 40px -20px rgba(11,25,41,0.25);
  --pv-shadow-mktg-lg: 0 24px 64px -24px rgba(11,25,41,0.30);
  --pv-shadow-modal:   0 32px 80px -24px rgba(11,25,41,0.45);

  /* ----------------------------------------------------------
     COMPONENT TOKENS
     ---------------------------------------------------------- */

  /* BUTTON */
  --pv-btn-radius:        var(--pv-radius-app);  /* app default; marketing overrides to 10px */
  --pv-btn-radius-mktg:   10px;
  --pv-btn-border:        var(--pv-border-default);
  --pv-btn-font-weight:   var(--pv-weight-semibold);
  --pv-btn-font-family:   var(--pv-font-sans);

  /* Button sizes — height / py / px / font */
  --pv-btn-sm-height:   32px;
  --pv-btn-sm-py:       6px;
  --pv-btn-sm-px:       14px;
  --pv-btn-sm-font:     13px;

  --pv-btn-md-height:   40px;
  --pv-btn-md-py:       10px;
  --pv-btn-md-px:       18px;
  --pv-btn-md-font:     14px;

  --pv-btn-lg-height:   48px;
  --pv-btn-lg-py:       14px;
  --pv-btn-lg-px:       22px;
  --pv-btn-lg-font:     15px;

  --pv-btn-xl-height:   56px;            /* mobile primary / field */
  --pv-btn-xl-py:       18px;
  --pv-btn-xl-px:       28px;
  --pv-btn-xl-font:     16px;

  /* INPUT */
  --pv-input-height:        56px;        /* mobile-first; ≥44px hit target */
  --pv-input-height-sm:     40px;
  --pv-input-py:            16px;
  --pv-input-px:            18px;
  --pv-input-radius:        var(--pv-radius-app);
  --pv-input-border:        var(--pv-border-default);
  --pv-input-border-color:  var(--pv-ink);
  --pv-input-border-focus:  var(--pv-ink-2);
  --pv-input-border-error:  var(--pv-danger);
  --pv-input-bg:            #ffffff;
  --pv-input-bg-disabled:   var(--pv-paper-2);
  --pv-input-fg:            var(--pv-ink);
  --pv-input-placeholder:   var(--pv-muted);
  --pv-input-label-gap:     8px;
  --pv-input-error-gap:     8px;
  --pv-input-focus-ring:    var(--pv-shadow-focus);
  --pv-input-font:          16px;        /* prevent iOS zoom */

  /* CARD */
  --pv-card-bg:            #ffffff;
  --pv-card-radius:        var(--pv-radius-app);     /* app */
  --pv-card-radius-mktg:   var(--pv-radius-mktg-lg); /* marketing */
  --pv-card-border:        var(--pv-border-default);
  --pv-card-border-color:  var(--pv-ink);
  --pv-card-padding:       24px;                     /* default */
  --pv-card-padding-sm:    16px;
  --pv-card-padding-lg:    32px;
  --pv-card-shadow:        var(--pv-shadow-app);     /* app: none */
  --pv-card-shadow-mktg:   var(--pv-shadow-mktg-md);
  --pv-card-gap:           20px;

  /* STAT CARD */
  --pv-stat-padding:       24px;
  --pv-stat-label-size:    12px;
  --pv-stat-value-size:    40px;
  --pv-stat-value-weight:  var(--pv-weight-semibold);
  --pv-stat-value-font:    var(--pv-font-mono);
  --pv-stat-delta-size:    13px;
  --pv-stat-gap:           8px;

  /* BADGE */
  --pv-badge-py:           4px;
  --pv-badge-px:           10px;
  --pv-badge-radius:       var(--pv-radius-app);     /* app: square */
  --pv-badge-radius-mktg:  var(--pv-radius-pill);    /* marketing: pill */
  --pv-badge-font:         12px;
  --pv-badge-font-weight:  var(--pv-weight-semibold);
  --pv-badge-tracking:     0.02em;

  /* TABLE */
  --pv-table-header-bg:        var(--pv-paper-2);
  --pv-table-header-border:    var(--pv-border-default);
  --pv-table-header-font:      12px;
  --pv-table-header-tracking:  0.08em;
  --pv-table-header-color:     var(--pv-muted);
  --pv-table-row-py:           16px;
  --pv-table-row-px:           20px;
  --pv-table-row-border:       1px solid var(--pv-line);
  --pv-table-row-hover-bg:     var(--pv-paper-2);
  --pv-table-overdue-bg:       #fef3c7;

  /* MODAL */
  --pv-modal-bg:           #ffffff;
  --pv-modal-radius:       var(--pv-radius-app);
  --pv-modal-border:       var(--pv-border-default) solid var(--pv-ink);
  --pv-modal-padding:      32px;
  --pv-modal-max-width:    560px;
  --pv-modal-shadow:       var(--pv-shadow-modal);
  --pv-modal-overlay:      rgba(11,25,41,0.45);

  /* NAV */
  --pv-nav-app-bg:         var(--pv-dark-1);
  --pv-nav-app-fg:         var(--pv-dark-fg);
  --pv-nav-app-fg-muted:   var(--pv-dark-fg-muted);
  --pv-nav-app-active:     var(--pv-accent);
  --pv-nav-app-height:     64px;
  --pv-nav-app-px:         28px;
  --pv-nav-mktg-bg:        var(--pv-paper);
  --pv-nav-mktg-fg:        var(--pv-ink);
  --pv-nav-mktg-border:    1px solid var(--pv-line);
  --pv-nav-mktg-height:    72px;

  /* EMPTY STATE */
  --pv-empty-padding:      64px;
  --pv-empty-icon-size:    48px;
  --pv-empty-icon-stroke:  1.5;
  --pv-empty-title-size:   20px;
  --pv-empty-body-size:    14px;
  --pv-empty-gap:          16px;

  /* AVATAR */
  --pv-avatar-sm:          24px;
  --pv-avatar-md:          32px;
  --pv-avatar-lg:          40px;
  --pv-avatar-xl:          56px;
  --pv-avatar-radius:      var(--pv-radius-circle);
  --pv-avatar-bg:          var(--pv-accent-soft);
  --pv-avatar-fg:          var(--pv-dark-1);

  /* ICON */
  --pv-icon-stroke:        1.75px;
  --pv-icon-linecap:       square;
  --pv-icon-linejoin:      miter;
  --pv-icon-size-sm:       16px;
  --pv-icon-size-md:       20px;
  --pv-icon-size-lg:       24px;
  --pv-icon-size-xl:       32px;

  /* HIT TARGETS · MOBILE */
  --pv-tap-min:            44px;
  --pv-tap-gap:            8px;

  /* CONTAINER WIDTHS */
  --pv-container-app:      1280px;
  --pv-container-mktg:     1200px;
  --pv-container-prose:    640px;

  /* MOTION */
  --pv-ease:               cubic-bezier(0.2, 0.7, 0.2, 1);
  --pv-ease-emphasized:    cubic-bezier(0.2, 0.0, 0, 1);
  --pv-duration-instant:   80ms;
  --pv-duration-fast:      140ms;
  --pv-duration-base:      200ms;
  --pv-duration-slow:      320ms;

  /* Z-INDEX */
  --pv-z-base:        0;
  --pv-z-dropdown:    100;
  --pv-z-sticky:      200;
  --pv-z-overlay:     800;
  --pv-z-modal:       900;
  --pv-z-toast:       1000;

  /* ----------------------------------------------------------
     WHITE-LABEL · per-tenant overrides
     Only override tokens listed here. Everything else is locked.
     ---------------------------------------------------------- */
  --pv-brand:          var(--pv-ink-2);     /* tenant primary */
  --pv-brand-fg:       var(--pv-ink-fg);
  --pv-brand-hover:    var(--pv-ink-3);
  --pv-tenant-name:    "PayVault";
  --pv-tenant-logo-url: none;               /* url(...) */
}

/* ============================================================
   Optional · base text styles
   Apply by adding the `pv` class to your root element, or copy
   the rules into your global stylesheet.
   ============================================================ */
.pv,
.pv * {
  font-feature-settings: "ss01", "cv11";
}
.pv {
  font-family: var(--pv-font-body);
  font-size: var(--pv-text-body);
  line-height: var(--pv-leading-normal);
  color: var(--pv-ink);
  background: var(--pv-bg-app);
  font-variant-numeric: var(--pv-numeric-tabular);
}
.pv .pv-mono { font-family: var(--pv-font-mono); }
.pv .pv-eyebrow {
  font-family: var(--pv-font-mono);
  font-size: var(--pv-text-eyebrow);
  letter-spacing: var(--pv-track-eyebrow);
  text-transform: uppercase;
  color: var(--pv-muted);
}
.pv h1, .pv .pv-h1 {
  font-family: var(--pv-font-heading);
  font-size: var(--pv-text-h1);
  font-weight: var(--pv-weight-bold);
  letter-spacing: var(--pv-track-snug);
  line-height: var(--pv-leading-tight);
}
.pv h2, .pv .pv-h2 {
  font-family: var(--pv-font-heading);
  font-size: var(--pv-text-h2);
  font-weight: var(--pv-weight-semibold);
  letter-spacing: var(--pv-track-snug);
  line-height: var(--pv-leading-snug);
}

/* ── Brand Kit Typography: DM Sans everywhere ── */
.page-title,
.card-title,
.drawer-title,
.modal-title,
.stat-value,
h1, h2, h3, h4 {
  font-family: var(--pv-font-heading);
}
.stat-value {
  font-family: var(--pv-font-heading);
  letter-spacing: -0.025em;
}