/* ============================================================
   vpprd · Design System Core
   Colors + Type + Spacing + Shadows + Radii + Motion tokens.
   All upload HTML cards reference this stylesheet at ../colors_and_type.css.
   ============================================================ */

/* ---------- Fonts (Google Fonts substitutes — see README) ---------- */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ---- Brand primaries ---- */
  --vp-yellow: #F5C400;
  --vp-yellow-bright: #FFD400;   /* hover */
  --vp-yellow-press: #C99E00;    /* active / accent text on light */
  --vp-yellow-tint:  #FFF6CC;    /* subtle bg wash */

  --vp-black: #000000;
  --vp-ink:   #000000;
  --vp-white: #FFFFFF;

  /* ---- Neutrals — grayscale ramp ---- */
  --vp-gray-50:  #F9F9F9;
  --vp-gray-100: #F2F2F2;
  --vp-gray-200: #E5E5E5;
  --vp-gray-300: #C9C9C9;
  --vp-gray-400: #A0A0A0;
  --vp-gray-500: #808080;
  --vp-gray-700: #4A4A4A;
  --vp-gray-900: #1F1F1F;

  /* ---- Status ---- */
  --vp-success:        #2E7D32;
  --vp-success-tint:   #E8F5E9;
  --vp-success-ink:    #1B5E20;
  --vp-info:           #1565C0;
  --vp-info-tint:      #E3F2FD;
  --vp-warning:        #ED8C00;
  --vp-warning-tint:   #FFF4E0;
  --vp-warning-ink:    #9A5A00;
  --vp-danger:         #C62828;
  --vp-danger-tint:    #FDECEA;
  --vp-danger-ink:     #8C1414;

  /* ---- Semantic ---- */
  --bg:           #FFFFFF;
  --bg-muted:     var(--vp-gray-50);
  --bg-inverse:   var(--vp-black);

  --fg1:          var(--vp-black);       /* primary text */
  --fg2:          var(--vp-gray-700);    /* secondary */
  --fg3:          var(--vp-gray-500);    /* meta / hint */
  --fg-on-dark:   var(--vp-white);
  --fg-accent:    var(--vp-yellow-press);/* yellow when used as text on light */

  --border:        var(--vp-gray-200);
  --border-strong: var(--vp-gray-300);
  --border-ink:    var(--vp-black);
  --accent:        var(--vp-yellow);
  --accent-press:  var(--vp-yellow-press);

  /* ---- Type families ---- */
  --font-sans:    "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display: "Barlow Condensed", "Inter", "Impact", sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* ---- Type scale (px) — industrial, bold, uppercase-friendly ---- */
  --fs-display:   56px;
  --fs-h1:        44px;
  --fs-h2:        32px;
  --fs-h3:        24px;
  --fs-h4:        18px;
  --fs-body:      16px;
  --fs-small:     14px;
  --fs-meta:      12px;
  --fs-eyebrow:   11px;

  /* ---- Spacing (4px base) ---- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;

  /* ---- Radii — mostly sharp; soft used sparingly ---- */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 0 rgba(0,0,0,.04);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --shadow-md: 0 4px 10px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 24px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);
  --shadow-xl: 0 22px 48px rgba(0,0,0,.14), 0 8px 16px rgba(0,0,0,.08);
  --shadow-yellow: 0 8px 0 0 rgba(0,0,0,.92);  /* solid offset block under yellow CTAs */

  /* ---- Motion ---- */
  --ease-out:  cubic-bezier(.22,.61,.36,1);
  --ease-in:   cubic-bezier(.55,.06,.68,.19);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;
}

/* ============================================================
   Semantic / utility classes — every spec uses class="vp" body
   ============================================================ */

.vp { font-family: var(--font-sans); color: var(--fg1); }

/* ---- Headings ---- */
.vp-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg1);
}
.vp-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg1);
}
.vp-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--fg1);
}
.vp-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--fg1);
}
.vp-h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--fg1);
}

/* ---- Body / micro ---- */
.vp-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--fg2);
}
.vp-small {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--fg2);
}
.vp-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--fg3);
  letter-spacing: 0;
}
.vp-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-press);
}

/* ---- Wordmark fallback (used when PNG logo isn't loaded) ---- */
.vp-wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 24px;
  color: #6E6E6E;            /* match real logo: gray "VERTICAL" */
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  line-height: 1;
}
.vp-wordmark .vp-parts { color: var(--vp-yellow); }
.vp-wordmark.on-dark { color: var(--vp-white); }

/* ---- Yellow accent rule — used as a divider under section labels ---- */
.vp-rule {
  display: inline-block;
  width: 32px;
  height: 3px;
  background: var(--vp-yellow);
}

/* ---- Selection ---- */
.vp ::selection { background: var(--vp-yellow); color: var(--vp-black); }