/* ==========================================================================
   Vneuron Risk & Compliance — Design Tokens
   Adapted from the Vneuron Design System bundle for the KYC Simulator.
   ========================================================================== */

@font-face {
  font-family: "Raleway";
  src: url("fonts/Raleway-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("fonts/Raleway-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* Brand core */
  --vn-navy:   #343B95;
  --vn-teal:   #0EB1AF;
  --vn-purple: #7E58A1;

  --vn-navy-50:  #EEF0FB;
  --vn-navy-100: #D6DAF3;
  --vn-navy-200: #AAB2E4;
  --vn-navy-300: #7680CE;
  --vn-navy-400: #4E59B4;
  --vn-navy-500: #343B95;
  --vn-navy-600: #2A3078;
  --vn-navy-700: #21265C;
  --vn-navy-800: #181C44;
  --vn-navy-900: #11132D;

  --vn-teal-50:  #E6F8F7;
  --vn-teal-100: #BEEDEC;
  --vn-teal-500: #0EB1AF;
  --vn-teal-600: #0B908E;
  --vn-teal-700: #086F6D;

  --vn-purple-50:  #F4EFF8;
  --vn-purple-500: #7E58A1;
  --vn-purple-600: #684684;

  /* Cool neutrals */
  --vn-gray-0:   #FFFFFF;
  --vn-gray-25:  #FBFBFD;
  --vn-gray-50:  #F5F6FA;
  --vn-gray-100: #EDEFF4;
  --vn-gray-200: #DEE1EB;
  --vn-gray-300: #C5C9D8;
  --vn-gray-400: #9AA0B4;
  --vn-gray-500: #6E7590;
  --vn-gray-600: #4E556F;
  --vn-gray-700: #363C52;
  --vn-gray-800: #23273A;
  --vn-gray-900: #141725;

  /* Semantic */
  --vn-success:    #10A66F;
  --vn-success-bg: #E6F6EF;
  --vn-success-fg: #086B47;
  --vn-warning:    #E0A43B;
  --vn-warning-bg: #FCF3E0;
  --vn-warning-fg: #7A5511;
  --vn-danger:     #D8434E;
  --vn-danger-bg:  #FBE7E9;
  --vn-danger-fg:  #7F1F27;
  --vn-info:       var(--vn-teal-500);
  --vn-info-bg:    var(--vn-teal-50);
  --vn-info-fg:    var(--vn-teal-700);

  /* Surfaces */
  --fg-1: var(--vn-gray-900);
  --fg-2: var(--vn-gray-700);
  --fg-3: var(--vn-gray-500);
  --fg-inverse: var(--vn-gray-0);

  --bg-1: var(--vn-gray-0);
  --bg-2: var(--vn-gray-50);
  --bg-3: var(--vn-gray-100);

  --border-1: var(--vn-gray-200);
  --border-2: var(--vn-gray-300);
  --border-focus: var(--vn-navy-500);

  --accent: var(--vn-navy-500);
  --accent-hover: var(--vn-navy-600);
  --accent-press: var(--vn-navy-700);
  --accent-fg: var(--vn-gray-0);

  --vn-gradient-brand:
    linear-gradient(135deg, var(--vn-navy-600) 0%, var(--vn-purple-500) 55%, var(--vn-teal-500) 100%);
  --vn-gradient-dark:
    linear-gradient(135deg, #12143A 0%, #2A1B4A 50%, #0D3A48 100%);

  /* Typography */
  --font-sans: "Raleway", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-display: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-display-1: 56px;
  --fs-display-2: 44px;
  --fs-h1: 34px;
  --fs-h2: 28px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body-lg: 17px;
  --fs-body:    15px;
  --fs-body-sm: 13px;
  --fs-caption: 12px;
  --fs-micro:   11px;

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

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

  --ls-tight: -0.02em;
  --ls-snug:  -0.01em;
  --ls-eyebrow: 0.14em;

  /* Spacing 4-pt grid */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px;--space-16: 64px;--space-20: 80px;--space-24: 96px;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Shadows — navy-tinted */
  --shadow-xs: 0 1px 2px rgba(20, 23, 37, 0.06);
  --shadow-sm: 0 1px 2px rgba(20, 23, 37, 0.05), 0 2px 4px rgba(20, 23, 37, 0.04);
  --shadow-md: 0 2px 4px rgba(20, 23, 37, 0.06), 0 8px 16px rgba(20, 23, 37, 0.08);
  --shadow-lg: 0 4px 8px rgba(20, 23, 37, 0.06), 0 16px 32px rgba(20, 23, 37, 0.10);
  --shadow-xl: 0 8px 16px rgba(20, 23, 37, 0.08), 0 32px 64px rgba(20, 23, 37, 0.14);
  --shadow-focus: 0 0 0 3px rgba(52, 59, 149, 0.25);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* Base type */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Eyebrow utility — Vneuron's signature uppercase tracking */
.eyebrow {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--vn-navy-500);
}

code, .code, .mono {
  font-family: var(--font-mono);
}