/*
 * DealerPro — Design Tokens
 * ==========================
 *
 * Pixel-perfect token extraction from the DealerPro Redesign mockup
 * (see src/css/design-tokens.reference.json for the Playwright-extracted
 * computed styles this file is built from).
 *
 * STRATEGY
 *   - Load this file AFTER assets/main.css so the :root overrides win the
 *     cascade against main.css's original teal palette.
 *   - Redefining variables that main.css already uses (--color-primary,
 *     --color-bg, --color-text, etc.) propagates the new palette through
 *     every module that consumes them — no per-module edits needed.
 *   - New-namespace tokens (--dp-*) are added alongside for components
 *     migrated to the new design language.
 *
 * SCOPE (token-only cosmetic refresh — REQ-007)
 *   - Color palette: stone neutrals + emerald brand (was teal).
 *   - Typography: Geist sans + Geist Mono (was Segoe UI).
 *   - Base font-size and line-height match the mockup's dense dashboard scale.
 *   - Radii, shadows, and spacing tokens added for components to consume.
 *
 * OUT OF SCOPE (deliberately not in this file)
 *   - Per-module CSS rewrites.
 *   - Inline-style cleanup.
 *   - Structural layout changes.
 *
 * Token source: "DealerPro Redesign _standalone_ (1) (2).html"
 * Generated manually from the extracted reference; do not regenerate by hand.
 */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* -------------------------------------------------------------------------
   * OVERRIDE main.css variables (emerald palette)
   * These names already exist in assets/main.css and are consumed across
   * 60+ modules. Redefining them here (loaded after main.css) propagates
   * the new values through the whole app.
   * ------------------------------------------------------------------------- */

  /* Brand (was teal #27b9cd → emerald) */
  --color-primary:        var(--brand-color, var(--brand-color)); /* aliased to tenant brand */
  --color-primary-dark:   var(--brand-color-hover, var(--brand-color-hover));
  --color-primary-light:  var(--brand-color-light, #a7f3d0);
  --color-primary-bg:     var(--brand-color-bg, #ecfdf5);

  /* Text (warm near-black + stone muted) */
  --color-text:           #0a0a0a; /* neutral-950 */
  --color-text-dark:      #000000;
  --color-text-light:     #78716c; /* stone-500 */
  --color-placeholder:    #a8a29c; /* stone-400 */

  /* Secondary (emerald-soft) */
  --color-secondary:      #a7f3d0; /* emerald-200 */

  /* Borders (stone) */
  --color-border:         #e7e5e4; /* stone-200 */
  --color-border-dark:    #d6d3d1; /* stone-300 */

  /* Backgrounds (warm stone) */
  --color-bg:             #fafaf9; /* stone-50  — app background */
  --color-bg-light:       #f5f5f4; /* stone-100 */
  --color-bg-alt:         #f5f5f4; /* stone-100 */
  --color-selected:       #ecfdf5; /* emerald-50 */
  --color-selected-dark:  #a7f3d0; /* emerald-200 */
  --color-hover:          rgb(0 0 0 / 3%);
  --color-shadow:         rgb(0 0 0 / 4%);

  /* Success — already emerald in main.css; keep aligned */
  --color-success:        var(--brand-color);
  --color-success-dark:   var(--brand-color-hover);
  --color-success-bg:     #ecfdf5;
  --color-success-text:   var(--brand-color);

  /* Danger — crisp red */
  --color-danger:         #dc2626; /* red-600 */
  --color-danger-dark:    #991b1b; /* red-800 */
  --color-danger-bg:      #fef2f2; /* red-50  */
  --color-danger-text:    #dc2626;

  /* Warning — amber (deeper than the old #f59e0b) */
  --color-warning:        #d97706; /* amber-600 */
  --color-warning-dark:   #92400e; /* amber-800 */
  --color-warning-bg:     #fffbeb; /* amber-50  */
  --color-warning-text:   #d97706;

  /* Info — neutral-tinted blue-gray to stay in the muted palette */
  --color-info-bg:        #f5f5f4;
  --color-info-text:      #44403c;

  /* Chips — retuned to mockup's muted palette */
  --chip-blue-bg:         #eff6ff;
  --chip-blue-text:       #1e40af;
  --chip-purple-bg:       #f5f3ff;
  --chip-purple-text:     #5b21b6;
  --chip-gray-bg:         #f5f5f4;
  --chip-gray-text:       #44403c;
  --chip-green-bg:        #ecfdf5;
  --chip-green-text:      var(--brand-color-hover);
  --chip-orange-bg:       #fff7ed;
  --chip-orange-text:     #9a3412;
  --chip-red-bg:          #fef2f2;
  --chip-red-text:        #991b1b;
  --chip-yellow-bg:       #fffbeb;
  --chip-yellow-text:     #92400e;
  --chip-light-orange-bg: #fff7ed;
  --chip-light-orange-text: #d97706;
  --chip-teal-bg:         #ecfdf5;
  --chip-teal-text:       var(--brand-color-hover);

  /* Payment / delinquency status — emerald/amber/red progression */
  --payment-status-current:     var(--brand-color);
  --payment-status-overdue-30:  #d97706;
  --payment-status-overdue-60:  #c2410c;
  --payment-status-overdue-90:  #dc2626;
  --payment-status-defaulted:   #78716c;

  /* Alerts (soft tints) */
  --alert-success-bg:  #ecfdf5;
  --alert-success:     var(--brand-color);
  --alert-error-bg:    #fef2f2;
  --alert-error:       #dc2626;
  --alert-warning-bg:  #fffbeb;
  --alert-warning:     #d97706;
  --alert-info-bg:     #f5f5f4;
  --alert-info:        #44403c;

  /* -------------------------------------------------------------------------
   * NEW tokens (--dp-*) — for components migrated to the new language.
   * Pixel-exact values from the mockup's Playwright-computed styles.
   * ------------------------------------------------------------------------- */

  /* Surface elevation scale */
  --dp-surface:          #ffffff;
  --dp-surface-muted:    #f0f0ee; /* page background — warm stone, ~94% lightness so white cards/modals visibly stand out */
  --dp-surface-sunken:   #f5f5f4;
  --dp-surface-inverse:  #0a0a0a;

  /* Text scale (semantic) */
  --dp-text:         #0a0a0a;
  --dp-text-strong:  #000000;
  --dp-text-body:    #44403c; /* stone-700 — used for button labels */
  --dp-text-muted:   #78716c; /* stone-500 — secondary text           */
  --dp-text-subtle:  #a8a29c; /* stone-400 — tertiary / placeholder  */
  --dp-text-inverse: #ffffff;

  /* Border scale */
  --dp-border:        #e7e5e4;
  --dp-border-strong: #d6d3d1;
  --dp-border-inverse:#0a0a0a;

  /* Brand scale */
  --dp-brand:          var(--brand-color, var(--brand-color));
  --dp-brand-strong:   var(--brand-color-hover, var(--brand-color-hover));
  --dp-brand-soft:     var(--brand-color-bg, #ecfdf5);
  --dp-brand-border:   var(--brand-color-light, #a7f3d0);

  /* Focus ring (accessible, brand-tinted) */
  --dp-focus-ring: 0 0 0 3px rgb(5 150 105 / 25%);

  /* Typography — families */
  --dp-font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --dp-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Typography — weights */
  --dp-weight-regular:  400;
  --dp-weight-medium:   500;
  --dp-weight-semibold: 600;
  --dp-weight-bold:     700;

  /* Typography — size scale (mockup-exact; dense dashboard scale) */
  --dp-text-2xs:  10.5px; /* table headers, tiny labels    */
  --dp-text-xs:   11.5px; /* micro captions                */
  --dp-text-sm:   12.5px; /* small meta                    */
  --dp-text-base: 13px;   /* body default (mockup default) */
  --dp-text-md:   13.5px; /* button / nav label           */
  --dp-text-lg:   14px;   /* h3 / input                    */
  --dp-text-xl:   16px;   /* emphasized body               */
  --dp-text-2xl:  18px;   /* section title                 */
  --dp-text-3xl:  26px;   /* large numeric KPI             */
  --dp-text-4xl:  28px;   /* page title (h1)               */

  /* Typography — line-heights (mockup-exact) */
  --dp-leading-tight:   1.1;
  --dp-leading-snug:    1.15;
  --dp-leading-normal:  1.45; /* body default */
  --dp-leading-relaxed: 1.6;

  /* Typography — letter-spacing */
  --dp-tracking-tight:    -0.02em; /* large headings */
  --dp-tracking-normal:   0;
  --dp-tracking-wide:     0.12em;  /* uppercase labels (table headers) */

  /* Radii (mockup-observed: 4, 6, 7, 8, 12, 999) */
  --dp-radius-xs:   4px;
  --dp-radius-sm:   6px;
  --dp-radius-md:   7px;
  --dp-radius-lg:   8px;
  --dp-radius-xl:   12px;
  --dp-radius-full: 999px;

  /* Shadows (mockup uses a single, very subtle shadow) */
  --dp-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 4%);
  --dp-shadow-md: 0 2px 4px 0 rgb(0 0 0 / 5%), 0 1px 2px 0 rgb(0 0 0 / 4%);
  --dp-shadow-lg: 0 8px 24px -4px rgb(0 0 0 / 8%), 0 2px 6px 0 rgb(0 0 0 / 4%);

  /* Spacing scale (4px base; mockup-observed values) */
  --dp-space-0:   0;
  --dp-space-px:  1px;
  --dp-space-0-5: 2px;
  --dp-space-1:   4px;
  --dp-space-1-5: 6px;
  --dp-space-2:   8px;
  --dp-space-2-5: 10px;
  --dp-space-3:   12px;
  --dp-space-3-5: 14px;
  --dp-space-4:   16px;
  --dp-space-5:   20px;
  --dp-space-6:   24px;
  --dp-space-7:   28px;
  --dp-space-8:   32px;
}

/* =============================================================================
 * Base element application
 * -----------------------------------------------------------------------------
 * Loaded AFTER assets/main.css so these values win equal-specificity cascades
 * (body, h1-h6, a). More specific rules in per-module CSS still override, so
 * module-specific components keep working until they migrate intentionally.
 * ========================================================================== */

/* Base element rules below intentionally use `html <tag>` selector (specificity
   0,0,2) instead of just `<tag>` so they win against plain `body { ... }` /
   `h1 { ... }` rules declared in module CSS files that are loaded *after* this
   file (lead_management.css, polestarapp.css, contractmanagement.css, etc. all
   set their own body font-family). This is the canonical "defeat later-loaded
   module overrides without resorting to !important" pattern for a globally
   applied token layer. */

html {
  font-family: var(--dp-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html body {
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-base);       /* 13px — mockup body */
  line-height: var(--dp-leading-normal);
  background-color: var(--dp-surface-muted); /* #f0f0ee */
  color: var(--dp-text);                /* #0a0a0a */
}

/* Headings — main.css resets heading sizes to inherit. We restore tighter,
   mockup-true sizes for raw h1-h6 without touching per-module .page-title /
   .module-header classes (which use higher-specificity selectors and still
   win). */

html h1 {
  font-size: var(--dp-text-4xl);        /* 28px */
  font-weight: var(--dp-weight-semibold);
  line-height: 1.1;
  letter-spacing: var(--dp-tracking-tight);
  color: var(--dp-text);
}

html h2 {
  font-size: 22px;
  font-weight: var(--dp-weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--dp-tracking-tight);
  color: var(--dp-text);
}

html h3 {
  font-size: var(--dp-text-lg);         /* 14px */
  font-weight: var(--dp-weight-semibold);
  line-height: 1.45;
  color: var(--dp-text);
}

html h4 {
  font-size: var(--dp-text-md);         /* 13.5px */
  font-weight: var(--dp-weight-semibold);
  line-height: 1.45;
  color: var(--dp-text);
}

html h5, html h6 {
  font-size: var(--dp-text-base);
  font-weight: var(--dp-weight-semibold);
  line-height: 1.45;
  color: var(--dp-text);
}

/* Links — default to the emerald brand. `main.css` sets `a { color: inherit; }`
   at specificity (0,0,1); `html a` at (0,0,2) wins, but parent-scoped rules
   (.sidebar a, .nav a, etc.) still override because classes bump specificity. */
html a {
  color: var(--dp-brand);
}
html a:hover {
  color: var(--dp-brand-strong);
}

/* Selection color */
::selection {
  background: var(--dp-brand-soft);
  color: var(--dp-brand-strong);
}

/* Focus ring — accessible, brand-tinted; applies to keyboard focus only */
:focus-visible {
  outline: 2px solid var(--dp-brand);
  outline-offset: 2px;
}

/* Monospace helper for contract IDs, amounts, timestamps — matches mockup td style */
.dp-mono {
  font-family: var(--dp-font-mono);
}

/* Subtle scrollbar styling to match the minimal aesthetic (WebKit only) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--dp-border);
  border-radius: var(--dp-radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--dp-border-strong);
}