/* ============================================================
   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
     ---------------------------------------------------------- */
  --pv-ink:        oklch(0.22 0.04  255);   /* Graphite — body text */
  --pv-ink-2:      oklch(0.32 0.07  255);   /* [WHITE-LABEL] --pv-brand · primary */
  --pv-ink-3:      oklch(0.42 0.09  255);   /* hover / link */
  --pv-ink-fg:     #ffffff;                 /* [WHITE-LABEL] foreground on brand */

  /* COLOR · NEUTRAL RAMP (warm, hue ~85, chroma ~0.012) */
  --pv-neutral-50:  oklch(0.985 0.008 85);  /* parchment, app canvas */
  --pv-neutral-100: oklch(0.96  0.012 85);
  --pv-neutral-200: oklch(0.92  0.014 85);
  --pv-neutral-300: oklch(0.86  0.012 85);  /* hairline / divider */
  --pv-neutral-400: oklch(0.72  0.014 85);
  --pv-neutral-500: oklch(0.55  0.012 85);  /* muted text */
  --pv-neutral-600: oklch(0.38  0.018 85);
  --pv-neutral-700: oklch(0.28  0.025 255);
  --pv-neutral-800: oklch(0.22  0.04  255);
  --pv-neutral-900: oklch(0.18  0.03  255);

  /* 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:        oklch(0.62 0.13 155);  /* [WHITE-LABEL] mineral green — “money confirmed” */
  --pv-accent-soft:   oklch(0.92 0.05 155);
  --pv-accent-strong: oklch(0.50 0.13 155);
  --pv-accent-fg:     #ffffff;

  --pv-success:       var(--pv-accent);
  --pv-success-soft:  var(--pv-accent-soft);

  --pv-warn:          oklch(0.78 0.13 75);
  --pv-warn-soft:     oklch(0.96 0.05 75);
  --pv-warn-strong:   oklch(0.45 0.13 75);
  --pv-warn-fg:       #ffffff;

  --pv-danger:        oklch(0.58 0.18 25);
  --pv-danger-soft:   oklch(0.96 0.04 25);
  --pv-danger-strong: oklch(0.50 0.18 25);
  --pv-danger-fg:     #ffffff;

  --pv-info:          oklch(0.62 0.10 235);
  --pv-info-soft:     oklch(0.95 0.03 235);
  --pv-info-strong:   oklch(0.50 0.10 235);
  --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: oklch(0.18 0.03  255);  /* nav, login left, contact */
  --pv-dark-2: oklch(0.22 0.035 255);  /* cards on dark */
  --pv-dark-3: oklch(0.28 0.04  255);  /* dividers / hairlines on dark */
  --pv-dark-fg:        oklch(0.96 0.01 80);
  --pv-dark-fg-muted:  oklch(0.72 0.04 80);

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

  /* ----------------------------------------------------------
     TYPOGRAPHY · FAMILIES
     ---------------------------------------------------------- */
  --pv-font-sans: 'Manrope', 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 oklch(0.32 0.07 255 / 0.18);                   /* focus halo */
  --pv-shadow-focus-danger: 0 0 0 4px oklch(0.58 0.18 25 / 0.20);
  --pv-shadow-mktg-xs: 0 1px 2px -1px oklch(0.22 0.04 255 / 0.10);
  --pv-shadow-mktg-sm: 0 4px 12px -6px oklch(0.22 0.04 255 / 0.15);
  --pv-shadow-mktg-md: 0 12px 40px -20px oklch(0.32 0.07 255 / 0.25);
  --pv-shadow-mktg-lg: 0 24px 64px -24px oklch(0.32 0.07 255 / 0.30);
  --pv-shadow-modal:   0 32px 80px -24px oklch(0.18 0.03 255 / 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:       oklch(0.99 0.018 75);

  /* 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:      oklch(0.22 0.04 255 / 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-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-size: var(--pv-text-h2);
  font-weight: var(--pv-weight-semibold);
  letter-spacing: var(--pv-track-snug);
  line-height: var(--pv-leading-snug);
}