/* ============================================================
   VDI Australia — Design Tokens
   Source of truth: VDI Basic Brand Styleguide (2026) + Moodboards
   ============================================================ */

/* --------- Typography stacks --------- */
/* Bahnschrift is a Microsoft-shipped family. On the web we fall back
   to DIN Alternate / Roboto Condensed with similar condensed metrics.
   Fira Sans is the secondary/editorial family. */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,500;0,700;0,800;0,900;1,700;1,900&family=Roboto+Condensed:wght@300;400;500;600;700&display=swap');

:root {
  /* --------- Brand color tokens --------- */

  /* Primary — dominant brand colors */
  --vdi-blue:           #1250A3;   /* Pantone 2133 C — primary brand */
  --vdi-deep-navy:      #062341;   /* Pantone 2768 C — headings, dark surfaces */
  --vdi-yellow:         #FFB914;   /* Highlights, CTAs, emphasis */

  /* Secondary — supporting palette */
  --vdi-secondary-blue: #3B6CB4;   /* Yutong/product contexts */
  --vdi-dulux-blue:     #194983;   /* True Blue (Dulux S40H9) — built environments */
  --vdi-pale-yellow:    #FDEDC5;   /* Soft yellow surfaces */
  --vdi-pale-blue:      #D5E5F6;   /* Soft blue surfaces */

  /* EV / Zero-emission palette */
  --vdi-green:          #17936F;   /* Electric Green */
  --vdi-green-mid:      #56BF9B;   /* Mid tint for charts / highlights */
  --vdi-green-blue:     #4987C7;   /* EV accent blue */
  --vdi-pale-green:     #D6ECE0;   /* EV soft surface */

  /* Neutrals */
  --vdi-ink:            #030303;   /* Near-black body color */
  --vdi-charcoal:       #353635;   /* Dark UI chrome */
  --vdi-gray-700:       #747474;   /* Secondary text */
  --vdi-gray-400:       #CDCCCC;   /* Dividers / disabled */
  --vdi-cool-gray:      #D0D0CF;   /* Pantone Cool Gray 2 C — muted surfaces */
  --vdi-snow:           #CBCECC;   /* Dulux Snow Season — built environments */
  --vdi-white:          #FFFFFF;

  /* Semantic aliases */
  --color-bg:           var(--vdi-white);
  --color-surface:      #F7F8FA;
  --color-surface-alt:  #EEF2F7;
  --color-border:       #E2E6EC;
  --color-text:         var(--vdi-ink);
  --color-text-muted:   var(--vdi-gray-700);
  --color-text-inverse: var(--vdi-white);
  --color-primary:      var(--vdi-blue);
  --color-primary-dark: var(--vdi-deep-navy);
  --color-accent:       var(--vdi-yellow);
  --color-success:      var(--vdi-green);

  /* --------- Typography --------- */
  --font-primary:   'Bahnschrift', 'DIN Alternate', 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --font-secondary: 'Fira Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Type scale (1920 / print-safe; 16px base) */
  --fs-caption:    12px;
  --fs-body-sm:    14px;
  --fs-body:       16px;
  --fs-body-lg:    18px;
  --fs-subhead-2:  20px;
  --fs-subhead-1:  24px;
  --fs-h4:         28px;
  --fs-h3:         36px;
  --fs-h2:         48px;
  --fs-h1:         64px;
  --fs-display:    88px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.4;
  --lh-relaxed: 1.6;

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

  /* --------- Spacing (8pt-based with a 4pt nudge) --------- */
  --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 --------- */
  /* VDI feels engineered — restrained corner radii, not pill-shaped */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* --------- Elevation --------- */
  --shadow-xs: 0 1px 2px rgba(6, 35, 65, 0.06);
  --shadow-sm: 0 2px 6px rgba(6, 35, 65, 0.08);
  --shadow-md: 0 8px 20px rgba(6, 35, 65, 0.10);
  --shadow-lg: 0 20px 40px rgba(6, 35, 65, 0.14);

  /* --------- Motion --------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;

  /* --------- Layout --------- */
  --container: 1280px;
  --container-wide: 1440px;
}

/* Base resets used by system preview pages */
*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  font-family: var(--font-secondary);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-primary);
  color: var(--vdi-deep-navy);
  font-weight: 700;
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-4);
  letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--sp-4); }

.eyebrow {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--vdi-blue);
}

/* Utility classes */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5); }
.stack > * + * { margin-top: var(--sp-4); }
.row { display: flex; gap: var(--sp-4); align-items: center; }

/* ============================================================
   Buttons — VDI system
   Square-ish corners, sharp caps-option eyebrow available on
   primary CTA. Yellow is a highlight CTA, not a general button.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 14px 28px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--vdi-blue);
  color: var(--vdi-white);
}
.btn-primary:hover { background: var(--vdi-deep-navy); }

.btn-secondary {
  background: transparent;
  color: var(--vdi-deep-navy);
  border-color: var(--vdi-deep-navy);
}
.btn-secondary:hover { background: var(--vdi-deep-navy); color: var(--vdi-white); }

.btn-accent {
  background: var(--vdi-yellow);
  color: var(--vdi-deep-navy);
}
.btn-accent:hover { background: #F0A800; }

.btn-ghost {
  background: transparent;
  color: var(--vdi-blue);
  border-color: transparent;
  padding-inline: 12px;
}
.btn-ghost:hover { color: var(--vdi-deep-navy); }

.btn-inverse {
  background: var(--vdi-white);
  color: var(--vdi-deep-navy);
}
.btn-inverse:hover { background: var(--vdi-yellow); }

/* ============================================================
   Form controls
   ============================================================ */
.input, .textarea, .select {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-secondary);
  font-size: 16px;
  color: var(--vdi-ink);
  background: var(--vdi-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--vdi-blue);
  box-shadow: 0 0 0 3px rgba(18, 80, 163, 0.15);
}
.label {
  display: block;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--vdi-deep-navy);
  margin-bottom: 6px;
}

/* ============================================================
   Badges / Chips
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  background: var(--vdi-pale-blue);
  color: var(--vdi-deep-navy);
}
.badge.badge-solid { background: var(--vdi-blue); color: var(--vdi-white); }
.badge.badge-yellow { background: var(--vdi-pale-yellow); color: var(--vdi-deep-navy); }
.badge.badge-ev { background: var(--vdi-pale-green); color: var(--vdi-green); }
.badge.badge-dark { background: var(--vdi-deep-navy); color: var(--vdi-yellow); }

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--vdi-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.card-body { padding: var(--sp-5); }
.card-media { aspect-ratio: 16 / 9; background: var(--vdi-snow); }
.card-title { font-family: var(--font-primary); font-size: 22px; color: var(--vdi-deep-navy); font-weight: 700; margin: 0 0 var(--sp-2); }
.card-kicker { font-family: var(--font-primary); font-size: 12px; font-weight: 600; color: var(--vdi-blue); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--sp-2); }