/* Exide Web — webfonts.
   Archivo (display) + Manrope (UI/body), served from Google Fonts.
   NOTE: the source Exide Cards system also loads these from Google Fonts;
   no licensed binaries were provided. See readme.md "Font substitution". */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
/* Exide Web — color tokens.
   Brand values lifted verbatim from the Exide Cards system (tokens/colors.css).
   Web-app additions: hover/active surface steps, table row tints, focus ring,
   warning + info semantics, chart series. */

:root {
  /* ---- Brand ---- */
  --red:       #E11B22;  /* primary brand red — CTAs, active nav, key accents */
  --red-dark:  #A6121A;  /* pressed / deep red, gradient base */
  --red-wash:  #FCE9EA;  /* soft red tint — icon chips, selected rows */
  --navy:      #1A4FA0;  /* secondary — headers, links, data viz anchor */
  --navy-dark: #0E2A5E;  /* navy gradient base, app sidebar */
  --navy-wash: #EAF0F9;  /* soft navy tint */
  --dark:      #15171C;  /* near-black — tooltips, toasts */

  /* ---- Surfaces ---- */
  --surface:        #F4F5F8;  /* app background */
  --surface-sunken: #EBEDF2;  /* wells, table headers, inset panels */
  --surface-hover:  #F7F8FA;  /* row / list hover */
  --surface-active: #EEF0F3;  /* row pressed */
  --card-bg:        #FFFFFF;  /* cards, panels, modals */
  --border:         #EEF0F3;  /* hairline dividers inside cards */
  --border-strong:  #DDE1E8;  /* control borders, table outlines */
  --overlay:        rgba(15,23,42,0.44); /* modal scrim */

  /* ---- Ink / text ---- */
  --text-value:     #22262E;  /* strongest — headings, table values */
  --text-body:      #3C424C;  /* body copy */
  --text-secondary: #717784;  /* secondary, column meta */
  --muted:          #9AA0AB;  /* labels, captions, placeholders */
  --text-inverse:   #FFFFFF;

  /* ---- Semantic ---- */
  --success:    #1A8A4E;
  --success-bg: #E6F4ED;
  --error:      #C0392B;
  --error-bg:   #F7E4E1;
  --warning:    #B26A00;  /* web addition — pending / SLA at risk */
  --warning-bg: #FCF1DE;
  --info:       #1A4FA0;
  --info-bg:    #EAF0F9;

  /* ---- Focus ---- */
  --focus-ring: 0 0 0 3px rgba(225,27,34,0.22);
  --focus-ring-navy: 0 0 0 3px rgba(26,79,160,0.22);

  /* ---- Gradients ---- */
  --grad-brand:    linear-gradient(118deg, #E11B22, #B4131A); /* @kind color */
  --grad-navy:     linear-gradient(118deg, #1A4FA0, #0E2A5E); /* @kind color */
  /* The app rail and login panel are RED — navy is a structural accent only. */
  --grad-sidebar:  linear-gradient(180deg, #E11B22, #A6121A); /* @kind color */
  --grad-sidebar-navy: linear-gradient(180deg, #15387B, #0E2A5E); /* @kind color */
  --grad-orb:      linear-gradient(140deg, #E11B22, #A6121A); /* @kind color */

  /* ---- Avatar gradients (from the Cards system) ---- */
  --grad-av-navy:   linear-gradient(150deg, #23579E, #16387A); /* @kind color */
  --grad-av-violet: linear-gradient(150deg, #6D4AC9, #4E2F9E); /* @kind color */
  --grad-av-red:    linear-gradient(150deg, #C0392B, #96271C); /* @kind color */
  --grad-av-orange: linear-gradient(150deg, #E07A2B, #C25A12); /* @kind color */
  --grad-av-green:  linear-gradient(150deg, #2BA66B, #16834E); /* @kind color */
  --grad-av-teal:   linear-gradient(150deg, #0F8A7E, #0A6157); /* @kind color */

  /* ---- Chart series (web addition — brand-first ordering) ---- */
  --chart-1: #E11B22;
  --chart-2: #E07A2B;
  --chart-3: #1A4FA0;
  --chart-4: #0F8A7E;
  --chart-5: #6D4AC9;
  --chart-6: #9AA0AB;

  /* ---- Semantic aliases ---- */
  --color-primary:       var(--red);
  --color-primary-press: var(--red-dark);
  --color-secondary:     var(--navy);
  --text-on-primary:     #FFFFFF;
  --bg-app:              var(--surface);
  --link:                var(--navy);
  --link-hover:          var(--red);
}
/* Exide Web — typography tokens.
   Archivo = display (page titles, KPI values, wordmark).
   Manrope = all UI, body, tables, forms.
   IBM Plex Mono = IDs, codes, part numbers (web addition).
   Sizes are a desktop ramp; the Cards system's mobile sizes are kept as
   --fs-body / --fs-sm / --fs-label so shared values stay identical. */

:root {
  /* ---- Families ---- */
  --f-archivo: 'Archivo', system-ui, sans-serif;      /* @kind font */
  --f-manrope: 'Manrope', system-ui, sans-serif;      /* @kind font */
  --f-mono:    'IBM Plex Mono', ui-monospace, monospace; /* @kind font */
  --f-display: var(--f-archivo);
  --f-ui:      var(--f-manrope);

  /* ---- Weights ---- */
  --w-regular:   400; /* @kind font */
  --w-medium:    500; /* @kind font */
  --w-semibold:  600; /* @kind font */
  --w-bold:      700; /* @kind font */
  --w-extrabold: 800; /* @kind font */
  --w-black:     900; /* @kind font */

  /* ---- Size scale ---- */
  --fs-hero:    34px; /* dashboard hero / login title (Archivo 900) */
  --fs-display: 26px; /* page title (Archivo 900) */
  --fs-h2:      19px; /* panel / section heading (Archivo 800) */
  --fs-h3:      16px; /* card heading (Manrope 700) */
  --fs-body:    14px; /* body, table cells, inputs */
  --fs-sm:      12.5px; /* secondary meta, helper text */
  --fs-label:   11px; /* uppercase field + column labels */
  --fs-micro:   9.5px; /* chips, eyebrows */
  --fs-kpi:     32px; /* KPI value (Archivo 900) */

  /* ---- Line heights ---- */
  --lh-tight:  1.1;  /* @kind font */
  --lh-snug:   1.3;  /* @kind font */
  --lh-normal: 1.5;  /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-company: 1.6px;  /* @kind font */
  --ls-eyebrow: 0.8px;  /* @kind font */
  --ls-label:   0.4px;  /* @kind font */
  --ls-tight:  -0.4px;  /* @kind font */
}
/* Exide Web — spacing, radius, elevation, layout.
   4px base scale, carried over from the Cards system and extended for
   desktop layout (sidebar width, header height, row height, content max). */

:root {
  /* ---- Spacing (4px base) ---- */
  --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;
  --space-16: 64px;

  /* ---- Radius ---- */
  --radius-sm:   6px;   /* chips, badges, tags */
  --radius-md:   9px;   /* inputs, selects, buttons-square, icon chips */
  --radius-lg:   14px;  /* list rows, nav items */
  --radius-xl:   16px;  /* cards, panels, modals */
  --radius-2xl:  24px;  /* hero / feature surfaces */
  --radius-pill: 999px; /* pill buttons, avatars, status dots */

  /* ---- Elevation ---- */
  --shadow-row:    0 2px 8px rgba(0,0,0,0.05);
  --shadow-card:   0 4px 20px rgba(0,0,0,0.08);
  --shadow-hero:   0 18px 40px rgba(22,30,55,0.12);
  --shadow-modal:  0 24px 64px rgba(15,23,42,0.24);
  --shadow-popover:0 12px 28px rgba(15,23,42,0.14);
  --shadow-cta:    0 16px 32px rgba(225,27,34,0.30);
  --shadow-inset:  inset 0 1px 2px rgba(15,23,42,0.06);

  /* ---- Layout (web addition) ---- */
  --sidebar-w:        248px;
  --sidebar-w-collapsed: 68px;
  --topbar-h:         64px;
  --row-h:            48px;   /* table row */
  --row-h-compact:    40px;
  --control-h:        38px;   /* input / button / select height */
  --control-h-sm:     30px;
  --content-max:      1240px;
  --content-max-wide: 1560px; /* dashboards / tables when the nav rail is hidden */
  --gutter:           var(--space-6);
}

/* Respect reduced-motion everywhere the tokens drive animation. Carried forward
   from the previous system: the imported motion.css has no such guard, and
   dropping it would be an accessibility regression. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0.001s; /* @kind other */ --dur-normal: 0.001s; /* @kind other */ --dur-slow: 0.001s; /* @kind other */ }
}
/* Exide Web — motion tokens.
   Restrained: fades, small lifts, no bounce on UI chrome.
   --ease-pop is reserved for success confirmations only. */

:root {
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);    /* @kind other */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);  /* @kind other */
  --ease-pop:      cubic-bezier(0.22, 1.4, 0.4, 1); /* @kind other */
  --dur-fast:   0.15s; /* @kind other */
  --dur-normal: 0.25s; /* @kind other */
  --dur-slow:   0.32s; /* @kind other */
}
/* Exide Web — base layer: reset, document defaults, link colors,
   keyframes shared across components. No component classes live here;
   components style themselves inline from tokens. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--f-manrope);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--f-archivo); color: var(--text-value); line-height: var(--lh-tight); }
p { margin: 0; }
a { color: var(--link); text-decoration: none; font-weight: var(--w-semibold); }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; }
a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 3px; }

::selection { background: var(--red-wash); color: var(--text-value); }
::placeholder { color: var(--muted); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); }

code, kbd, .mono { font-family: var(--f-mono); font-size: 0.92em; }

/* Scrollbars — thin, neutral */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---- Keyframes ---- */
@keyframes exFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes exRise { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes exToast { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes exPop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes exSpin { to { transform: rotate(360deg); } }
@keyframes exShimmer { 0% { background-position: -320px 0; } 100% { background-position: 320px 0; } }
@keyframes exRing { 0% { transform: scale(.5); opacity: .6; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes exBars { from { transform: scaleY(.28); } to { transform: scaleY(1); } }
@keyframes exBlink { 0%, 100% { opacity: .28; } 50% { opacity: 1; } }
/* Exide Web Design System — canonical entry point.
   Consumers link this single file. Imports only.

   Imported from claude.ai Design project 041b0ca4-f1da-4115-a8ee-d38f8dbce441
   ("Exide Design System-Arnob"), namespace window.DesignSystem_041b0c.
   The previous dealer-RAG-specific system (0df8981b) is archived under
   docs/design-system-archive/ — its project is no longer reachable. */
@import url('tokens/fonts.css');
@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');
@import url('tokens/motion.css');
@import url('base/base.css');