/* ============================================================
   CANDE VACCARI — Design Tokens
   Colors + Typography variables for HTML artifacts
   ============================================================ */

/* ---------- Fonts (DM Sans = primary, Aldrich = secondary) ---- */

/* DM Sans — load full weight range from Google Fonts (variable). */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800;9..40,900&display=swap");

/* Aldrich — secondary tech/mono accent (Google Fonts). */
@import url("https://fonts.googleapis.com/css2?family=Aldrich&display=swap");

/* Local italics (uploaded TTFs). Roman cuts come from Google. */
@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 300;
  src: url("./fonts/DMSans-LightItalic.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 400;
  src: url("./fonts/DMSans-Italic.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 500;
  src: url("./fonts/DMSans-MediumItalic.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 600;
  src: url("./fonts/DMSans-SemiBoldItalic.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 700;
  src: url("./fonts/DMSans-BoldItalic.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 800;
  src: url("./fonts/DMSans-ExtraBoldItalic.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 900;
  src: url("./fonts/DMSans-BlackItalic.ttf") format("truetype");
  font-display: swap;
}

/* ---------- Tokens ------------------------------------------- */

:root {
  /* === BRAND COLORS ===
     The identity is built on the Growth Gradient (mint → indigo).
     Focus Black gives structure; white + deep space hold the canvas.
  */

  /* Identity / accent */
  --cv-mint:        #0BFF91;     /* rgb(11,255,145) — Growth start */
  --cv-mint-soft:   #0EFB94;     /* slight warm variant in Figma */
  --cv-indigo:      #566EE6;     /* rgb(86,110,230) — Growth end */
  --cv-gradient:    linear-gradient(135deg, #0BFF91 0%, #566EE6 100%);
  --cv-gradient-v:  linear-gradient(180deg, #0BFF91 0%, #566EE6 100%);

  /* Neutrals — Focus Black scale */
  --cv-black:       #111216;     /* deep space (rgb 17,18,22) */
  --cv-ink:         #111111;     /* primary text on light */
  --cv-graphite:    #3A3A3A;     /* Focus Black surface (rgb 58,58,58) */
  --cv-charcoal:    #373737;     /* card alt */
  --cv-slate:       #202020;     /* near-black surface */
  --cv-grey-700:    #4D4D4D;
  --cv-grey-500:    #969696;     /* mid grey */
  --cv-grey-400:    #A2A2A2;     /* hairline / subtle stroke */
  --cv-grey-300:    #CCCCCC;
  --cv-grey-200:    #D2D2D2;
  --cv-grey-100:    #D9D9D9;
  --cv-canvas:      #FAFAFA;     /* base neutra */
  --cv-white:       #FFFFFF;

  /* Semantic */
  --cv-danger:      #DA0000;     /* used in safe-zone / error markers */
  --cv-fg-1:        var(--cv-ink);
  --cv-fg-2:        #3A3A3A;
  --cv-fg-3:        #969696;
  --cv-fg-on-dark:  var(--cv-white);
  --cv-fg-muted-on-dark: rgba(255,255,255,0.65);
  --cv-bg-1:        var(--cv-canvas);
  --cv-bg-2:        var(--cv-white);
  --cv-bg-dark-1:   var(--cv-black);
  --cv-bg-dark-2:   var(--cv-graphite);
  --cv-stroke:      var(--cv-grey-300);
  --cv-stroke-soft: rgba(255,255,255,0.10);

  /* Glass / accent surfaces */
  --cv-glass-light: rgba(255,255,255,0.10);
  --cv-glass-dark:  rgba(17,18,22,0.10);

  /* === TYPOGRAPHY === */
  --cv-font-sans:   "DM Sans", "Inter", system-ui, -apple-system, sans-serif;
  --cv-font-mono:   "Aldrich", "JetBrains Mono", ui-monospace, monospace;

  /* Tracking — DM Sans display runs slightly tight */
  --cv-track-tight: -0.02em;
  --cv-track-wide:  0.08em;     /* used on Aldrich micro-labels */

  /* === RADII === */
  --cv-r-sm: 6px;
  --cv-r-md: 12px;
  --cv-r-lg: 20px;
  --cv-r-xl: 32px;
  --cv-r-pill: 999px;

  /* === SHADOWS === */
  --cv-shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --cv-shadow-md: 0 8px 24px rgba(0,0,0,0.08);
  --cv-shadow-lg: 0 24px 60px rgba(0,0,0,0.18);
  --cv-shadow-glow: 0 12px 40px rgba(11,255,145,0.25);

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

/* ---------- Base + Semantic typographic styles --------------- */

html, body {
  font-family: var(--cv-font-sans);
  color: var(--cv-fg-1);
  background: var(--cv-bg-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.cv-display {
  font-family: var(--cv-font-sans);
  font-weight: 700;
  font-size: clamp(64px, 9vw, 160px);
  line-height: 0.97;
  letter-spacing: var(--cv-track-tight);
}

.cv-h1 {
  font-family: var(--cv-font-sans);
  font-weight: 700;
  font-size: 96px;
  line-height: 0.97;
  letter-spacing: var(--cv-track-tight);
}

.cv-h2 {
  font-family: var(--cv-font-sans);
  font-weight: 700;
  font-size: 56px;
  line-height: 1.02;
  letter-spacing: var(--cv-track-tight);
}

.cv-h3 {
  font-family: var(--cv-font-sans);
  font-weight: 600;
  font-size: 35px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.cv-h4 {
  font-family: var(--cv-font-sans);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.cv-lead {
  font-family: var(--cv-font-sans);
  font-weight: 300;
  font-size: 24px;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--cv-fg-2);
}

.cv-body {
  font-family: var(--cv-font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.625;
  color: var(--cv-fg-1);
}

.cv-body-sm {
  font-family: var(--cv-font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  color: var(--cv-fg-2);
}

.cv-caption {
  font-family: var(--cv-font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--cv-fg-3);
}

/* Aldrich micro-tags & numerals — wide tracking, uppercase */
.cv-tag {
  font-family: var(--cv-font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  letter-spacing: var(--cv-track-wide);
  text-transform: uppercase;
}

.cv-num {
  font-family: var(--cv-font-mono);
  font-weight: 400;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* Gradient text — used for keywords */
.cv-gradient-text {
  background: var(--cv-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Glass pill — frequent surface motif */
.cv-glass {
  background: var(--cv-glass-light);
  border-radius: var(--cv-r-pill);
  backdrop-filter: blur(12px);
}