/* =========================================================================
   FormaVerse Design System — Colors & Type tokens
   ========================================================================= */

/* --- Fonts -------------------------------------------------------------- */
/* Brand font: Roboto (variable, uploaded by the brand team). Roboto is used
   for both display and body — the logo's letterforms, while tighter, fit
   cleanly into Roboto's geometric family. Mono stays on Google Fonts. */
@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-VariableFont_wdth_wght.ttf") format("truetype-variations"),
       url("fonts/Roboto-VariableFont_wdth_wght.ttf") format("truetype");
  /* path is relative to this CSS file → styles/fonts/... */
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Italic-VariableFont_wdth_wght.ttf") format("truetype-variations"),
       url("fonts/Roboto-Italic-VariableFont_wdth_wght.ttf") format("truetype");
  /* path is relative to this CSS file → styles/fonts/... */
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ===== Brand core ===== */
  --fv-violet:        #8B5CF6;   /* logo gradient — start */
  --fv-violet-deep:   #6D3FE0;
  --fv-violet-soft:   #C4B5FD;
  --fv-violet-wash:   #F3EEFF;

  --fv-blue:          #3B82F6;   /* logo gradient — end */
  --fv-blue-deep:     #1D4ED8;
  --fv-blue-soft:     #93C5FD;
  --fv-blue-wash:     #EFF5FF;

  /* Signature gradient — always violet → blue, left to right */
  --fv-gradient:       linear-gradient(90deg, #8B5CF6 0%, #3B82F6 100%);
  --fv-gradient-soft:  linear-gradient(90deg, #C4B5FD 0%, #93C5FD 100%);
  --fv-gradient-diag:  linear-gradient(135deg, #8B5CF6 0%, #3B82F6 100%);

  /* ===== Neutrals (ink scale) ===== */
  --fv-ink-0:  #FFFFFF;
  --fv-ink-50: #F7F8FA;
  --fv-ink-100:#EEF0F4;
  --fv-ink-200:#DDE1E9;
  --fv-ink-300:#C4CAD6;
  --fv-ink-400:#9AA1B2;
  --fv-ink-500:#6B7280;
  --fv-ink-600:#4B5360;
  --fv-ink-700:#2F3642;
  --fv-ink-800:#1A1F2A;
  --fv-ink-900:#0B0E14;   /* near-black used in logo */
  --fv-ink-950:#05070B;

  /* ===== Semantic colors ===== */
  --fv-success: #16A34A;
  --fv-success-wash:#E7F7ED;
  --fv-warning: #F59E0B;
  --fv-warning-wash:#FFF4DB;
  --fv-danger:  #DC2626;
  --fv-danger-wash: #FDECEC;
  --fv-info:    var(--fv-blue);
  --fv-info-wash:var(--fv-blue-wash);

  /* ===== Surface roles ===== */
  --fv-bg:           var(--fv-ink-0);
  --fv-bg-subtle:    var(--fv-ink-50);
  --fv-bg-muted:     var(--fv-ink-100);
  --fv-bg-inverse:   var(--fv-ink-900);

  --fv-fg:           var(--fv-ink-900);  /* primary text */
  --fv-fg-muted:     var(--fv-ink-600);  /* secondary text */
  --fv-fg-subtle:    var(--fv-ink-500);  /* tertiary / meta */
  --fv-fg-inverse:   var(--fv-ink-0);
  --fv-fg-on-accent: #FFFFFF;

  --fv-border:       var(--fv-ink-200);
  --fv-border-strong:var(--fv-ink-300);
  --fv-border-accent:var(--fv-violet);

  --fv-accent:       var(--fv-violet);
  --fv-accent-hover: var(--fv-violet-deep);
  --fv-accent-wash:  var(--fv-violet-wash);

  --fv-focus-ring:   0 0 0 3px rgba(139, 92, 246, 0.35);

  /* ===== Type families ===== */
  --fv-font-display: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fv-font-body:    "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fv-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ===== Type scale (px, fluid-friendly via clamp at use-site) ===== */
  --fv-fs-display:   72px;
  --fv-fs-h1:        52px;
  --fv-fs-h2:        40px;
  --fv-fs-h3:        30px;
  --fv-fs-h4:        22px;
  --fv-fs-h5:        18px;
  --fv-fs-body:      16px;
  --fv-fs-body-lg:   18px;
  --fv-fs-small:     14px;
  --fv-fs-micro:     12px;

  --fv-lh-tight:     1.05;
  --fv-lh-snug:      1.2;
  --fv-lh-normal:    1.5;
  --fv-lh-relaxed:   1.65;

  --fv-tracking-tight:  -0.02em;
  --fv-tracking-normal: 0;
  --fv-tracking-wide:   0.06em;   /* for eyebrow / micro uppercase */
  --fv-tracking-mega:   0.12em;

  /* ===== Radii ===== */
  --fv-radius-xs: 4px;
  --fv-radius-sm: 8px;
  --fv-radius-md: 12px;
  --fv-radius-lg: 18px;
  --fv-radius-xl: 28px;
  --fv-radius-pill: 999px;

  /* ===== Spacing (8pt grid with 4px half-step) ===== */
  --fv-space-1: 4px;
  --fv-space-2: 8px;
  --fv-space-3: 12px;
  --fv-space-4: 16px;
  --fv-space-5: 24px;
  --fv-space-6: 32px;
  --fv-space-7: 48px;
  --fv-space-8: 64px;
  --fv-space-9: 96px;

  /* ===== Shadows (elevation) ===== */
  --fv-shadow-xs: 0 1px 2px rgba(11, 14, 20, 0.06);
  --fv-shadow-sm: 0 2px 4px rgba(11, 14, 20, 0.06), 0 1px 2px rgba(11,14,20,0.04);
  --fv-shadow-md: 0 6px 16px rgba(11, 14, 20, 0.08), 0 2px 4px rgba(11,14,20,0.04);
  --fv-shadow-lg: 0 16px 40px rgba(11, 14, 20, 0.12), 0 4px 8px rgba(11,14,20,0.04);
  --fv-shadow-xl: 0 32px 80px rgba(11, 14, 20, 0.18);

  /* Signature glow — violet halo under elevated brand elements */
  --fv-glow-violet: 0 18px 48px -12px rgba(139, 92, 246, 0.45);
  --fv-glow-blue:   0 18px 48px -12px rgba(59, 130, 246, 0.45);

  /* ===== Motion ===== */
  --fv-ease-standard: cubic-bezier(.2, .7, .2, 1);
  --fv-ease-emphatic: cubic-bezier(.2, .9, .1, 1.1);
  --fv-dur-fast:   120ms;
  --fv-dur-base:   200ms;
  --fv-dur-slow:   320ms;
}

/* =========================================================================
   Semantic element styles — apply directly or mix into components
   ========================================================================= */

html, body { background: var(--fv-bg); color: var(--fv-fg); }

body {
  font-family: var(--fv-font-body);
  font-size: var(--fv-fs-body);
  line-height: var(--fv-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fv-display,
h1.fv-display {
  font-family: var(--fv-font-display);
  font-weight: 700;
  font-size: var(--fv-fs-display);
  line-height: var(--fv-lh-tight);
  letter-spacing: var(--fv-tracking-tight);
  text-transform: uppercase;
}

h1, .fv-h1 {
  font-family: var(--fv-font-display);
  font-weight: 700;
  font-size: var(--fv-fs-h1);
  line-height: var(--fv-lh-tight);
  letter-spacing: var(--fv-tracking-tight);
}
h2, .fv-h2 {
  font-family: var(--fv-font-display);
  font-weight: 600;
  font-size: var(--fv-fs-h2);
  line-height: var(--fv-lh-snug);
  letter-spacing: var(--fv-tracking-tight);
}
h3, .fv-h3 {
  font-family: var(--fv-font-display);
  font-weight: 600;
  font-size: var(--fv-fs-h3);
  line-height: var(--fv-lh-snug);
}
h4, .fv-h4 {
  font-family: var(--fv-font-display);
  font-weight: 600;
  font-size: var(--fv-fs-h4);
  line-height: var(--fv-lh-snug);
}
h5, .fv-h5 {
  font-family: var(--fv-font-body);
  font-weight: 600;
  font-size: var(--fv-fs-h5);
  line-height: var(--fv-lh-snug);
}

p, .fv-p {
  font-family: var(--fv-font-body);
  font-size: var(--fv-fs-body);
  line-height: var(--fv-lh-relaxed);
  color: var(--fv-fg);
}
.fv-lead {
  font-size: var(--fv-fs-body-lg);
  line-height: var(--fv-lh-relaxed);
  color: var(--fv-fg-muted);
}

.fv-eyebrow {
  font-family: var(--fv-font-display);
  font-size: var(--fv-fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--fv-tracking-wide);
  color: var(--fv-accent);
}

.fv-meta {
  font-size: var(--fv-fs-small);
  color: var(--fv-fg-subtle);
}

code, .fv-code {
  font-family: var(--fv-font-mono);
  font-size: 0.92em;
  background: var(--fv-bg-muted);
  padding: 0.12em 0.4em;
  border-radius: var(--fv-radius-xs);
}

/* Signature gradient text — use on keywords, never full paragraphs */
.fv-gradient-text {
  background: var(--fv-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* Signature gradient highlight — the logo's "VERSE" treatment */
.fv-gradient-chip {
  display: inline-block;
  background: var(--fv-gradient);
  color: #fff;
  padding: 0.08em 0.35em;
  font-family: var(--fv-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--fv-tracking-tight);
}