/* ============================================================
   VIOLTECH — Design Foundations
   Colors + Typography tokens (base + semantic)
   Dark-first system. Light theme is an optional export.
   ============================================================ */

/* ---- Fonts ----
   Display: Syne (700, 800) — self-hosted from fonts/ (user-supplied)
   Body:    IBM Plex Sans (400, 600) — self-hosted variable font (user-supplied)
   Mono:    IBM Plex Mono (400) — Google Fonts CDN */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 100 700; font-stretch: 75% 100%; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Syne';
  src: url('fonts/Syne-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('fonts/Syne-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('fonts/Syne-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('fonts/Syne-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('fonts/Syne-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  /* ---------- BRAND PALETTE ---------- */
  --vt-ink:        #0A0A0F;  /* primary 60% — deep dark background        */
  --vt-violet:     #5E4892;  /* secondary 30% — brand violet, containers  */
  --vt-blue:       #4589C7;  /* accent-1 10% — CTAs, links, interactive   */
  --vt-cyan:       #29B6F6;  /* accent-2 — gradient end, highlights, viz  */
  --vt-magenta:    #E8195B;  /* danger/alert — errors, critical only      */
  --vt-warmgray:   #63585C;  /* neutral — secondary text, dividers        */

  /* ---------- TEXT ---------- */
  --vt-text-1:        #F4F4F6;  /* primary text on dark                  */
  --vt-text-2:        #9A9AA8;  /* secondary text, labels, metadata      */
  --vt-text-on-light: #0A0A0F;  /* primary text on light surfaces        */

  /* ---------- SURFACES (dark-first) ---------- */
  --vt-surface-0: #0A0A0F;  /* page background                          */
  --vt-surface-1: #121219;  /* raised surface / card                    */
  --vt-surface-2: #1A1A24;  /* nested surface / input / hover row       */
  --vt-surface-3: #232330;  /* highest surface / menu / popover         */
  --vt-violet-tint: #1C1630; /* violet-washed container surface         */

  /* ---------- BORDERS & DIVIDERS ---------- */
  --vt-border:        rgba(255, 255, 255, 0.08);  /* 1px hairline       */
  --vt-border-strong: rgba(255, 255, 255, 0.14);  /* emphasized hairline*/
  --vt-border-violet: rgba(94, 72, 146, 0.55);    /* violet container   */

  /* ---------- BRAND GRADIENT (signal, not decoration) ---------- */
  --vt-gradient:      linear-gradient(90deg, #5E4892 0%, #29B6F6 100%);
  --vt-gradient-135:  linear-gradient(135deg, #5E4892 0%, #29B6F6 100%);
  --vt-gradient-text: linear-gradient(90deg, #5E4892 0%, #29B6F6 100%);

  /* ---------- SEMANTIC STATE ---------- */
  --vt-success: #2FBF87;
  --vt-warning: #E9A23B;
  --vt-danger:  #E8195B;
  --vt-info:    #29B6F6;

  /* ---------- FOCUS ---------- */
  --vt-focus: #29B6F6;            /* 2px outline, cyan */
  --vt-focus-ring: 0 0 0 2px #0A0A0F, 0 0 0 4px #29B6F6;

  /* ---------- TYPE FAMILIES ---------- */
  --vt-font-display: 'Syne', system-ui, sans-serif;
  --vt-font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --vt-font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* ---------- TYPE SCALE ---------- */
  --vt-text-xs:   12px;
  --vt-text-sm:   14px;
  --vt-text-base: 16px;
  --vt-text-lg:   18px;
  --vt-text-xl:   20px;
  --vt-display-sm: 24px;   /* display floor — never use Syne below this */
  --vt-display-md: 32px;
  --vt-display-lg: 44px;
  --vt-display-xl: 60px;
  --vt-display-2xl: 80px;

  /* ---------- LINE HEIGHT ---------- */
  --vt-lh-display: 1.1;
  --vt-lh-ui:      1.4;
  --vt-lh-body:    1.6;

  /* ---------- TRACKING ---------- */
  --vt-track-display: -0.02em;  /* display 700+        */
  --vt-track-body:    0;        /* body                */
  --vt-track-label:   0.05em;   /* uppercase labels    */

  /* ---------- SPACING (8pt base) ---------- */
  --vt-space-1: 4px;
  --vt-space-2: 8px;
  --vt-space-3: 16px;
  --vt-space-4: 24px;
  --vt-space-5: 32px;
  --vt-space-6: 48px;
  --vt-space-7: 64px;
  --vt-space-8: 96px;
  --vt-space-9: 128px;

  /* ---------- RADIUS ---------- */
  --vt-radius-button: 3px;   /* buttons                            */
  --vt-radius-card:   6px;   /* cards, inputs                      */
  --vt-radius-pill:   999px; /* badges, tags ONLY                  */
  --vt-radius-flush:  0px;   /* full-width containers, image blocks */

  /* ---------- LAYOUT ---------- */
  --vt-maxw: 1280px;
  --vt-gutter: 24px;
  --vt-pad-desktop: 64px;
  --vt-columns: 12;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply by importing this file and using the classes / elements.
   ============================================================ */

.vt-display-2xl,
.vt-display-xl,
.vt-display-lg,
.vt-display-md,
.vt-display-sm,
h1, h2, h3 {
  font-family: var(--vt-font-display);
  font-weight: 800;
  line-height: var(--vt-lh-display);
  letter-spacing: var(--vt-track-display);
  color: var(--vt-text-1);
}

.vt-display-2xl { font-size: var(--vt-display-2xl); }
.vt-display-xl  { font-size: var(--vt-display-xl); }
.vt-display-lg  { font-size: var(--vt-display-lg); }
.vt-display-md  { font-size: var(--vt-display-md); }
.vt-display-sm  { font-size: var(--vt-display-sm); font-weight: 700; }

h1 { font-size: var(--vt-display-xl); }
h2 { font-size: var(--vt-display-lg); }
h3 { font-size: var(--vt-display-md); font-weight: 700; }

/* Body copy */
body, p, .vt-body {
  font-family: var(--vt-font-body);
  font-weight: 400;
  font-size: var(--vt-text-base);
  line-height: var(--vt-lh-body);
  letter-spacing: var(--vt-track-body);
  color: var(--vt-text-1);
}

.vt-body-secondary { color: var(--vt-text-2); }

.vt-lead {
  font-size: var(--vt-text-xl);
  line-height: 1.5;
  color: var(--vt-text-2);
}

/* UI text — denser line height */
.vt-ui {
  font-family: var(--vt-font-body);
  font-size: var(--vt-text-sm);
  line-height: var(--vt-lh-ui);
}

.vt-ui-strong { font-weight: 600; }

/* Uppercase label */
.vt-label {
  font-family: var(--vt-font-body);
  font-weight: 600;
  font-size: var(--vt-text-xs);
  line-height: var(--vt-lh-ui);
  letter-spacing: var(--vt-track-label);
  text-transform: uppercase;
  color: var(--vt-text-2);
}

/* Mono — code, invoice numbers, API refs */
code, pre, .vt-mono {
  font-family: var(--vt-font-mono);
  font-weight: 400;
  font-size: var(--vt-text-sm);
  letter-spacing: 0;
}

/* Gradient text — for product names / hero moments only */
.vt-gradient-text {
  background: var(--vt-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Links */
a, .vt-link {
  color: var(--vt-blue);
  text-decoration: none;
}
a:hover, .vt-link:hover { color: var(--vt-cyan); }

/* Focus — visible cyan ring, never removed */
:focus-visible {
  outline: 2px solid var(--vt-focus);
  outline-offset: 2px;
}