/* ============================================================
   Carplus — Design Tokens
   Built on the mcf Automobile system (Muli, 8px baseline,
   minimal radii, no gradients) but with Carplus' own brand
   colour: green from the gauge logo, used sparingly (~20% of
   surface; primary CTA, status, key highlights only).
   ============================================================ */

/* Muli — corporate font, identical wiring to mcf system. */
@font-face { font-family:'Muli'; font-style:normal; font-weight:200; font-display:swap; src:url('../fonts/Muli-ExtraLight.ttf') format('truetype'); }
@font-face { font-family:'Muli'; font-style:normal; font-weight:300; font-display:swap; src:url('../fonts/Muli-Light.ttf') format('truetype'); }
@font-face { font-family:'Muli'; font-style:italic; font-weight:300; font-display:swap; src:url('../fonts/Muli-LightItalic.ttf') format('truetype'); }
@font-face { font-family:'Muli'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/Muli-Regular.ttf') format('truetype'); }
@font-face { font-family:'Muli'; font-style:italic; font-weight:400; font-display:swap; src:url('../fonts/Muli-Italic.ttf') format('truetype'); }
@font-face { font-family:'Muli'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/Muli-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Muli'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/Muli-Bold.ttf') format('truetype'); }
@font-face { font-family:'Muli'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/Muli-ExtraBold.ttf') format('truetype'); }
@font-face { font-family:'Muli'; font-style:normal; font-weight:900; font-display:swap; src:url('../fonts/Muli-Black.ttf') format('truetype'); }

:root {
  /* Carplus brand greens (from the gauge logo) ----------------------------- */
  --cp-green:          #84BD3F;   /* primary, the strong segment */
  --cp-green-hover:    #6FA32F;
  --cp-green-pressed:  #5B8826;
  --cp-green-soft:     #EEF6DF;   /* subtle backgrounds, badges */
  --cp-green-tint:     #F7FBED;   /* very faint */
  --cp-green-light:    #C2DA8C;   /* the light arc segment — decorative */
  --cp-green-pale:     #DDEBB8;

  /* Carplus warm grays (the logo wordmark "car" + needle) ------------------ */
  --cp-warm-gray:      #898989;
  --cp-warm-gray-2:    #B3B3B3;

  /* Neutrals — inherit mcf system feel ------------------------------------- */
  --ink:               #1F2328;
  --ink-2:             #4B5563;
  --ink-3:             #6B7280;
  --ink-4:             #9CA3AF;
  --line:              #E5E8EB;
  --line-2:            #EFF1F4;
  --surface:           #FFFFFF;
  --surface-2:         #F5F7F8;
  --surface-3:         #FAFBFC;
  --on-dark:           #FFFFFF;
  --black:             #000000;

  /* Dark surfaces (used in Konzept C) -------------------------------------- */
  --dark-1:            #15181C;
  --dark-2:            #1F2328;
  --dark-3:            #2A2F36;
  --dark-line:         #353B44;
  --dark-fg:           #E6E8EB;
  --dark-fg-2:         #A8AEB8;

  /* Semantic --------------------------------------------------------------- */
  --success:           #2A9B4E;
  --success-soft:      #E5F4EA;
  --warning:           #E0A418;
  --warning-soft:      #FBEFD3;
  --danger:            #D32F2F;
  --danger-soft:       #FBE3E3;
  --info:              #0092C7;       /* mcf-blue — used very rarely */
  --info-soft:         #E6F4FA;

  /* Aliases ---------------------------------------------------------------- */
  --fg-1: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --bg-1: var(--surface);
  --bg-2: var(--surface-2);
  --bg-3: var(--surface-3);
  --accent:    var(--cp-green);
  --accent-fg: #FFFFFF;

  /* Type -------------------------------------------------------------------- */
  --font-sans: 'Muli', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  --fs-display:  56px;
  --fs-h1:       40px;
  --fs-h2:       28px;
  --fs-h3:       22px;
  --fs-h4:       18px;
  --fs-lead:     17px;
  --fs-body:     15px;
  --fs-small:    13px;
  --fs-caption:  11px;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-normal:1.5;
  --lh-relaxed:1.65;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.1em;

  /* Spacing — 8px baseline ------------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* Radii ------------------------------------------------------------------ */
  --radius-0: 0;
  --radius-sm: 2px;   /* buttons */
  --radius-md: 4px;   /* inputs, badges */
  --radius-lg: 6px;   /* cards */
  --radius-xl: 10px;  /* large surfaces */
  --radius-pill: 999px;

  /* Shadows ---------------------------------------------------------------- */
  --shadow-0: none;
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md: 0 1px 2px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.06);
  --shadow-lg: 0 2px 4px rgba(15,23,42,0.05), 0 12px 32px rgba(15,23,42,0.10);
  --shadow-focus: 0 0 0 2px rgba(132,189,63,0.32);

  /* Motion ----------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.2, 0, 0, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 240ms;

  /* Layout ----------------------------------------------------------------- */
  --header-h:  64px;
  --sidebar-w: 248px;
  --sidebar-w-compact: 64px;
}

/* ============================================================
   Konzept-Themes — only what differs between A / B / C
   ============================================================ */
[data-concept="A"] {
  --app-bg:       var(--surface-2);
  --panel-bg:     var(--surface);
  --panel-border: var(--line);
  --sidebar-bg:   var(--surface);
  --sidebar-fg:   var(--ink);
  --sidebar-fg-muted: var(--ink-3);
  --sidebar-hover-bg: var(--surface-2);
  --sidebar-active-bg: var(--cp-green-soft);
  --sidebar-active-fg: var(--ink);
  --sidebar-active-bar: var(--cp-green);
  --sidebar-border: var(--line);
  --topbar-bg: var(--surface);
  --topbar-border: var(--line);
  --row-hover: var(--surface-2);
  --density-padding-y: 12px;
  --density-padding-x: 16px;
  --density-row-h: 56px;
  --density-card-padding: 20px;
  --sidebar-current-w: var(--sidebar-w);
  --sidebar-show-labels: 1;
}
[data-concept="B"] {
  --app-bg:       var(--surface);
  --panel-bg:     var(--surface);
  --panel-border: var(--line);
  --sidebar-bg:   var(--surface);
  --sidebar-fg:   var(--ink-2);
  --sidebar-fg-muted: var(--ink-3);
  --sidebar-hover-bg: var(--surface-2);
  --sidebar-active-bg: transparent;
  --sidebar-active-fg: var(--ink);
  --sidebar-active-bar: var(--cp-green);
  --sidebar-border: var(--line);
  --topbar-bg: var(--surface);
  --topbar-border: var(--line);
  --row-hover: var(--surface-3);
  --density-padding-y: 8px;
  --density-padding-x: 12px;
  --density-row-h: 40px;
  --density-card-padding: 16px;
  --sidebar-current-w: var(--sidebar-w-compact);
  --sidebar-show-labels: 0;
}
[data-concept="C"] {
  --app-bg:       var(--surface-2);
  --panel-bg:     var(--surface);
  --panel-border: var(--line);
  --sidebar-bg:   var(--dark-1);
  --sidebar-fg:   var(--dark-fg-2);
  --sidebar-fg-muted: #6B7280;
  --sidebar-hover-bg: var(--dark-2);
  --sidebar-active-bg: var(--dark-2);
  --sidebar-active-fg: #FFFFFF;
  --sidebar-active-bar: var(--cp-green);
  --sidebar-border: transparent;
  --topbar-bg: var(--surface);
  --topbar-border: var(--line);
  --row-hover: var(--surface-2);
  --density-padding-y: 12px;
  --density-padding-x: 16px;
  --density-row-h: 56px;
  --density-card-padding: 20px;
  --sidebar-current-w: var(--sidebar-w);
  --sidebar-show-labels: 1;
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--app-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; }

::selection { background: var(--cp-green); color: #fff; }