/**
 * Gunvor design tokens — single source of truth for color, type, radius.
 * Load after amerce.css, before gunvor.css. Do not hardcode these values in components.
 */

:root {
  /* ── Color: surfaces ── */
  --gv-bg-light: #fafaf9;
  --gv-bg-dark: #0f1215;
  --gv-surface: #ffffff;
  --gv-surface-dark: #161a1d;

  /* ── Color: text ── */
  --gv-text-primary: #171a1c;
  --gv-text-primary-on-dark: #f2f3f3;
  --gv-text-muted: #5c6569;
  --gv-text-muted-on-dark: #9aa3a7;

  /* ── Color: accents ── */
  --gv-accent-primary: #0fb8a0;
  --gv-accent-primary-hover: #0da38e;
  --gv-accent-primary-soft: rgba(15, 184, 160, 0.12);
  --gv-accent-warning: #f5a623;
  --gv-accent-warning-hover: #e09412;
  --gv-accent-warning-soft: rgba(245, 166, 35, 0.14);

  /* ── Color: borders / neutrals ── */
  --gv-border: #e3e6e7;
  --gv-border-strong: #cfd4d6;
  --gv-border-dark: #262b2e;
  --gv-neutral: #e3e6e7;
  --gv-neutral-dark: #262b2e;

  /* ── Color: status (semantic) ── */
  --gv-success: var(--gv-accent-primary);
  --gv-warning: var(--gv-accent-warning);
  --gv-danger: #e23b3b;

  /* ── Typography: families ── */
  --gv-font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --gv-font-body: "Inter", system-ui, sans-serif;
  --gv-font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* ── Typography: scale (px only — 12 / 14 / 16 / 20 / 28 / 40 / 56) ── */
  --gv-text-xs: 12px;
  --gv-text-sm: 14px;
  --gv-text-md: 16px;
  --gv-text-lg: 20px;
  --gv-text-xl: 28px;
  --gv-text-2xl: 40px;
  --gv-text-3xl: 56px;

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

  /* ── Typography: tracking (negative from 28px+) ── */
  --gv-tracking-tight: -0.02em;
  --gv-tracking-tighter: -0.03em;

  /* ── Radius (max 8px — premium / corporate) ── */
  --gv-radius-none: 0;
  --gv-radius-sm: 4px;
  --gv-radius-md: 6px;
  --gv-radius-lg: 8px;
  --gv-radius: var(--gv-radius-lg);
  --gv-radius-full: 8px; /* never pill / circle chrome beyond 8px */

  /* ── Layout: homepage section rhythm ── */
  --gv-section-gap: 64px;
  --gv-section-gap-footer: calc(var(--gv-section-gap) * 1.5);

  /* ── Aliases used by Gunvor / Amerce layers ── */
  --background-light: var(--gv-bg-light);
  --background-dark: var(--gv-bg-dark);
  --text-primary: var(--gv-text-primary);
  --accent-primary: var(--gv-accent-primary);
  --accent-warning: var(--gv-accent-warning);
  --border-neutral: var(--gv-border);

  --color-primary: var(--gv-accent-primary);
  --color-accent: var(--gv-accent-warning);
  --color-accent-dark: var(--gv-accent-warning-hover);
  --color-bg: var(--gv-bg-light);
  --color-surface: var(--gv-surface);
  --color-text: var(--gv-text-primary);
  --color-muted: var(--gv-text-muted);
  --color-border: var(--gv-border);

  --primary: var(--gv-accent-primary);
  --secondary: var(--gv-text-muted);
  --third: var(--gv-accent-warning);
  --text: var(--gv-text-primary);
  --text-2: var(--gv-text-muted);
  --text-3: #9aa3a7;
  --bg: var(--gv-bg-light);
  --bg-2: var(--gv-bg-light);
  --bg-3: var(--gv-bg-dark);
  --bg-4: var(--gv-accent-warning-soft);
  --bg-5: var(--gv-accent-warning-soft);
  --bg-6: var(--gv-bg-dark);
  --bg-7: var(--gv-bg-light);
  --line: var(--gv-border);
  --yellow: var(--gv-accent-warning);
  --pink: var(--gv-accent-warning-hover);
  --critical: var(--gv-danger);
  --success: var(--gv-success);
  --on-surface: var(--gv-text-primary);
  --surface: var(--gv-surface);
  --cl-1: var(--gv-accent-primary);
  --cl-2: var(--gv-accent-warning);
}

/* Dark surface context (opt-in) */
[data-theme="dark"],
.gv-theme-dark {
  --gv-text-primary: var(--gv-text-primary-on-dark);
  --gv-text-muted: var(--gv-text-muted-on-dark);
  --gv-border: var(--gv-border-dark);
  --gv-neutral: var(--gv-neutral-dark);
  --gv-surface: var(--gv-surface-dark);
  --color-bg: var(--gv-bg-dark);
  --color-surface: var(--gv-surface-dark);
  --color-text: var(--gv-text-primary-on-dark);
  --color-muted: var(--gv-text-muted-on-dark);
  --color-border: var(--gv-border-dark);
  --text: var(--gv-text-primary-on-dark);
  --text-2: var(--gv-text-muted-on-dark);
  --bg: var(--gv-bg-dark);
  --line: var(--gv-border-dark);
  --surface: var(--gv-surface-dark);
  --on-surface: var(--gv-text-primary-on-dark);
}

/* ── Base type ── */
html {
  font-size: 16px;
}

body {
  font-family: var(--gv-font-body);
  font-weight: var(--gv-weight-regular);
  font-size: var(--gv-text-md);
  line-height: 1.5;
  color: var(--gv-text-primary);
  background: var(--gv-bg-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.s-title,
.font-2,
.font-outfit,
.font-kumbh,
.font-red_hat,
.font-plus_jakarta,
.font-main {
  font-family: var(--gv-font-display);
  font-weight: var(--gv-weight-semibold);
  color: var(--gv-text-primary);
}

h1, .h1 { font-weight: var(--gv-weight-bold); letter-spacing: var(--gv-tracking-tighter); }
h2, .h2 { font-weight: var(--gv-weight-bold); letter-spacing: var(--gv-tracking-tighter); }
h3, .h3 { letter-spacing: var(--gv-tracking-tight); }
h4, .h4 { letter-spacing: var(--gv-tracking-tight); }

/* Type scale utilities — only these sizes */
.gv-text-xs  { font-size: var(--gv-text-xs);  line-height: 1.4; }
.gv-text-sm  { font-size: var(--gv-text-sm);  line-height: 1.45; }
.gv-text-md  { font-size: var(--gv-text-md);  line-height: 1.5; }
.gv-text-lg  { font-size: var(--gv-text-lg);  line-height: 1.35; letter-spacing: var(--gv-tracking-tight); }
.gv-text-xl  {
  font-family: var(--gv-font-display);
  font-size: var(--gv-text-xl);
  font-weight: var(--gv-weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--gv-tracking-tight);
}
.gv-text-2xl {
  font-family: var(--gv-font-display);
  font-size: var(--gv-text-2xl);
  font-weight: var(--gv-weight-bold);
  line-height: 1.15;
  letter-spacing: var(--gv-tracking-tighter);
}
.gv-text-3xl {
  font-family: var(--gv-font-display);
  font-size: var(--gv-text-3xl);
  font-weight: var(--gv-weight-bold);
  line-height: 1.1;
  letter-spacing: var(--gv-tracking-tighter);
}

.text-body-1,
.text-body-2,
.text-body-3 {
  font-family: var(--gv-font-body);
  font-weight: var(--gv-weight-regular);
}

.text-body-1 { font-size: var(--gv-text-md); }
.text-body-2 { font-size: var(--gv-text-sm); }
.text-body-3 { font-size: var(--gv-text-xs); }

/* Technical data only: VA / W / V / A, SKU, prices, numeric specs */
.gv-mono,
.pd-info__sku,
.pd-spec-group__val,
.pd-price-block__price,
.gv-pcard__power-val,
.gv-pcard__price-new,
.gv-pcard__price-old,
.gv-ups-demo__metric-value {
  font-family: var(--gv-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Utility: accent roles */
.gv-accent { color: var(--gv-accent-primary); }
.gv-accent-bg { background-color: var(--gv-accent-primary); color: #fff; }
.gv-warning { color: var(--gv-accent-warning); }
.gv-warning-bg { background-color: var(--gv-accent-warning); color: var(--gv-text-primary); }
.gv-stock-in { color: var(--gv-accent-primary); }
.gv-stock-out { color: var(--gv-danger); }