/* Volga-Dnepr Design System — Colors & Type tokens
   Brand distilled from public corporate identity:
   deep navy plate + runway stripes + serif wordmark + VD medallion.
*/

/* ---------------------------- FONTS ---------------------------- */
/* NOTE: Official wordmark is set in a classic serif. Using PT Serif
   (open Cyrillic-ready near-match) for display, and Inter for UI.
   Fonts are loaded from Google Fonts in colors_and_type.css consumers;
   keep this file portable — @import is in the HTML, not here. */

:root {
  /* =========================================================
     COLOR — PRIMITIVES (raw palette)
     ========================================================= */

  /* Signature navy (plate) + runway white */
  --vd-navy-900: #06255C;        /* darkest plate, headers on white */
  --vd-navy-800: #0B3D91;        /* PRIMARY brand navy (plate bg)  */
  --vd-navy-700: #1A4FA8;        /* hover / raised surfaces        */
  --vd-navy-600: #2E66C2;        /* accent link, focus ring        */
  --vd-navy-500: #4F83D6;        /* pressed / selected background  */
  --vd-navy-100: #E3ECFA;        /* selected-row tint, soft fill   */
  --vd-navy-050: #F2F6FC;        /* page tint                      */

  /* Warning / Priority — amber-orange for caution states */
  --vd-amber-600: #B26A00;
  --vd-amber-500: #DE8A1A;
  --vd-amber-100: #FBEBCC;

  /* Neutrals — warm cool-grey, slightly tinted toward navy */
  --vd-ink-900:  #0E1320;
  --vd-ink-800:  #1C2333;
  --vd-ink-700:  #2E3648;
  --vd-ink-600:  #4A5266;
  --vd-ink-500:  #6B7386;
  --vd-ink-400:  #9099AC;
  --vd-ink-300:  #BEC5D3;
  --vd-ink-200:  #DDE2EB;
  --vd-ink-100:  #EEF1F6;
  --vd-ink-050:  #F6F8FB;
  --vd-white:    #FFFFFF;

  /* Semantic signal (status/ops/DLP) */
  --vd-ok-600:     #1E7A46;
  --vd-ok-500:     #2EA05C;
  --vd-ok-100:     #DCF1E4;
  --vd-warn-600:   #B26A00;
  --vd-warn-500:   #DE8A1A;
  --vd-warn-100:   #FBEBCC;
  --vd-danger-600: #B3261E;
  --vd-danger-500: #D43B34;
  --vd-danger-100: #FADCDA;
  --vd-info-600:   #0B6FA8;
  --vd-info-500:   #1F90CC;
  --vd-info-100:   #D7ECF7;

  /* DLP-specific chip colors (classification levels) */
  --vd-cls-public:       #2EA05C;   /* green  */
  --vd-cls-internal:     #2E66C2;   /* blue   */
  --vd-cls-confidential: #DE8A1A;   /* amber / orange */
  --vd-cls-secret:       #B3261E;   /* red    */

  /* =========================================================
     COLOR — SEMANTIC (use these in components)
     ========================================================= */
  --bg:            var(--vd-white);
  --bg-subtle:     var(--vd-ink-050);
  --bg-muted:      var(--vd-ink-100);
  --bg-inverse:    var(--vd-navy-800);
  --bg-selected:   var(--vd-navy-100);
  --bg-overlay:    rgba(14, 19, 32, 0.48);

  --fg:            var(--vd-ink-900);
  --fg-muted:      var(--vd-ink-600);
  --fg-subtle:     var(--vd-ink-500);
  --fg-inverse:    var(--vd-white);
  --fg-brand:      var(--vd-navy-800);
  --fg-link:       var(--vd-navy-700);

  --border:        var(--vd-ink-200);
  --border-strong: var(--vd-ink-300);
  --border-brand:  var(--vd-navy-800);

  --accent:        var(--vd-navy-800);
  --accent-hover:  var(--vd-navy-700);
  --accent-active: var(--vd-navy-900);

  --focus-ring:    var(--vd-navy-600);

  /* =========================================================
     TYPE
     ========================================================= */
  --font-serif:  "PT Serif", Georgia, "Times New Roman", serif;
  --font-sans:   "Helvetica Neue", "HelveticaNeue", Helvetica, "Segoe UI", Arial, sans-serif;
  --font-mono:   "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;

  /* Scale (1.200 minor third, tuned for dense product UI) */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-56: 56px;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;     /* small-caps / eyebrow    */
  --tracking-wider:  0.14em;     /* wordmark, runway labels */

  /* =========================================================
     SPACING / RADIUS / SHADOW / MOTION
     ========================================================= */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  --radius-sm:  4px;
  --radius-md:  6px;     /* default card / button */
  --radius-lg:  10px;
  --radius-xl:  14px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(6, 37, 92, 0.06), 0 1px 1px rgba(6, 37, 92, 0.04);
  --shadow-2: 0 2px 6px rgba(6, 37, 92, 0.08), 0 1px 2px rgba(6, 37, 92, 0.06);
  --shadow-3: 0 8px 24px rgba(6, 37, 92, 0.12), 0 2px 6px rgba(6, 37, 92, 0.06);
  --shadow-inset: inset 0 0 0 1px var(--border);

  --motion-fast:   120ms;
  --motion-normal: 180ms;
  --motion-slow:   260ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
}

/* =========================================================
   SEMANTIC TYPE CLASSES / ELEMENT DEFAULTS
   ========================================================= */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.vd-display {
  font-family: var(--font-serif);
  font-size: var(--fs-56);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-brand);
}

.vd-h1, h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-40);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.vd-h2, h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-28);
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
  color: var(--fg);
}

.vd-h3, h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg);
}

.vd-h4, h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg);
}

.vd-body, p {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg);
}

.vd-body-lg { font-size: var(--fs-16); line-height: var(--lh-normal); }
.vd-body-sm { font-size: var(--fs-13); line-height: var(--lh-normal); color: var(--fg-muted); }

.vd-caption {
  font-size: var(--fs-12);
  line-height: var(--lh-snug);
  color: var(--fg-subtle);
}

.vd-eyebrow {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.vd-wordmark {
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-inverse);
}

.vd-mono, code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

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

*:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}