/* ----------------------------------------------------------------------------
 * Vishu Aggarwal — Design Tokens
 * Corporate training brand for L&D and HR teams.
 * Voice: Direct · Proven · Practical · Calm.
 * ---------------------------------------------------------------------------- */

/* Webfonts — Jost variable (300/400/500 used) */
@font-face {
  font-family: 'Jost';
  src: url('fonts/Jost-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Jost-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('fonts/Jost-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Jost-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Color — raw palette ---------- */
  --va-slate-black:  #1A1A2E;   /* Primary — backgrounds, text, authority */
  --va-amber-gold:   #C47A1E;   /* Accent 1 — CTAs, highlights, hover */
  --va-slate-teal:   #2A7F8F;   /* Accent 2 — links, tags */
  --va-warm-white:   #FAFAF8;   /* Base — page background */
  --va-light-slate:  #E8E8E4;   /* Neutral — dividers, cards */

  /* Tints / shades — used sparingly */
  --va-slate-black-90: #2B2B40;
  --va-slate-black-70: #4B4B5E;
  --va-slate-black-50: #7D7D8B;
  --va-slate-black-30: #B5B5BC;
  --va-amber-gold-dark:  #A8651A;   /* Hover state for amber CTAs */
  --va-amber-gold-light: #E6A85A;
  --va-amber-tint-10:    #F7EDDD;   /* Highlight wash */
  --va-slate-teal-dark:  #1F6271;
  --va-paper-shadow:     rgba(26, 26, 46, 0.06);
  --va-paper-shadow-md:  rgba(26, 26, 46, 0.10);

  /* ---------- Semantic colors ---------- */
  --bg-page:        var(--va-warm-white);
  --bg-surface:     #FFFFFF;
  --bg-elevated:    var(--va-light-slate);
  --bg-inverse:     var(--va-slate-black);
  --bg-accent:      var(--va-amber-gold);
  --bg-accent-soft: var(--va-amber-tint-10);

  --fg-default:    var(--va-slate-black);
  --fg-muted:      var(--va-slate-black-70);
  --fg-subtle:     var(--va-slate-black-50);
  --fg-inverse:    var(--va-warm-white);
  --fg-accent:     var(--va-amber-gold);
  --fg-link:       var(--va-slate-teal);
  --fg-link-hover: var(--va-slate-teal-dark);

  --border-default: var(--va-light-slate);
  --border-strong:  var(--va-slate-black);
  --border-accent:  var(--va-amber-gold);

  /* ---------- Typography ---------- */
  --font-sans: 'Jost', 'DM Sans', 'Gill Sans MT', Calibri, sans-serif;
  --font-display: 'Jost', 'DM Sans', 'Gill Sans MT', Calibri, sans-serif;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;

  /* Type scale — modest, generous line-height; favors readability over drama */
  --fs-display: clamp(2.75rem, 5.2vw, 4.5rem);   /* hero H1 */
  --fs-h1:      clamp(2.25rem, 4vw, 3.25rem);
  --fs-h2:      clamp(1.75rem, 3vw, 2.25rem);
  --fs-h3:      1.5rem;
  --fs-h4:      1.25rem;
  --fs-body-lg: 1.125rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-caption: 0.75rem;

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

  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.16em;   /* small uppercase labels */

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

  /* ---------- Radii ---------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;     /* default for buttons, inputs, cards */
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-none: none;
  --shadow-xs:   0 1px 2px var(--va-paper-shadow);
  --shadow-sm:   0 2px 6px var(--va-paper-shadow);
  --shadow-md:   0 8px 24px var(--va-paper-shadow-md);
  --shadow-lg:   0 16px 48px var(--va-paper-shadow-md);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);   /* calm, no overshoot */
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:   140ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* ---------- Layout ---------- */
  --maxw-prose:    62ch;
  --maxw-content:  1120px;
  --maxw-wide:     1320px;
  --rule-thin:     1px solid var(--border-default);
  --rule-strong:   1px solid var(--border-strong);
}

/* ---------- Semantic element styles ---------- */

html { font-family: var(--font-sans); color: var(--fg-default); background: var(--bg-page); }
body { font-size: var(--fs-body); font-weight: var(--fw-light); line-height: var(--lh-relaxed); }

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-default);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-default);
  margin: 0;
}
h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  margin: 0;
}
h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  margin: 0;
}
p, .body {
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--fg-default);
  margin: 0;
}
.body-lg {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
}
.caption, small {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
.eyebrow {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

a {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--fg-link-hover); }

hr { border: 0; border-top: var(--rule-thin); margin: var(--space-6) 0; }

::selection { background: var(--va-amber-gold); color: var(--va-warm-white); }