/* ==========================================================================
   tokens.css — shared design tokens for antoineviso.com
   Single source of truth, mapped 1:1 from Figma (Website Antoine viso).
   Used by: index.html, case-studies/*.html
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Colors */
  --ivory:         #FFFFF0;
  --ivory-dark:    #F2F2E4;
  --black:         #1A1A1A;
  --strong-grey:   #555555;
  --light-grey:    #F2F2F2;
  --grey-over-black: #8C8C8C;
  --coral:         #FF4866;
  --lavender:      #6B71E5;
  --lavender-light:#8186E9;
  --muted-on-dark: #BFBFB4;

  /* Spacing */
  --space-100: 4px;
  --space-200: 8px;
  --space-300: 12px;
  --space-400: 16px;
  --space-600: 24px;
  --space-800: 32px;
  --space-1000: 40px;
  --space-1200: 48px;
  --space-1600: 64px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 20px;

  /* Effects */
  --screencap-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  /* Font families */
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-accent: "Fraunces", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* ------------------------------------------------------------------
     Textstyles — Figma "Mobile/*" values (desktop overrides below).
     Display        Barlow Condensed Bold, uppercase
     Display accent Fraunces Regular (SOFT 0, WONK 1)
     Headline       Barlow Condensed Bold, uppercase
     Headline accent Fraunces Regular (SOFT 0, WONK 1)
     text-md        Inter 16/24
     text-xs        Inter 12/16
     ------------------------------------------------------------------ */

  --text-display-size: 40px;
  --text-display-leading: 40px;
  --text-display-tracking: -0.02em;

  --text-display-accent-size: 28px;
  --text-display-accent-leading: 24px;
  --text-display-accent-tracking: -0.015em;

  --text-headline-size: 32px;
  --text-headline-leading: 32px;
  --text-headline-tracking: -0.021em;

  --text-headline-accent-size: 24px;
  --text-headline-accent-leading: 24px;
  --text-headline-accent-tracking: -0.015em;

  --text-md-size: 16px;
  --text-md-leading: 24px;
  --text-md-tracking: -0.011em;

  --text-xs-size: 12px;
  --text-xs-leading: 16px;
  --text-xs-tracking: 0;
}

/* Figma "Desktop/*" values */
@media (min-width: 768px) {
  :root {
    --text-display-size: 72px;
    --text-display-leading: 72px;

    --text-display-accent-size: 44px;
    --text-display-accent-leading: 48px;

    --text-headline-size: 48px;
    --text-headline-leading: 48px;

    --text-headline-accent-size: 36px;
    --text-headline-accent-leading: 48px;
  }
}

/* Semantic type classes ---------------------------------------------------
   .display / .accent set family + weight only (size comes from the slot);
   .text-* classes are the full textstyles. */

.display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--black);
}

.accent {
  font-family: var(--font-accent);
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  color: var(--strong-grey);
}

.text-display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-display-size);
  line-height: var(--text-display-leading);
  letter-spacing: var(--text-display-tracking);
}

.text-display-accent {
  font-family: var(--font-accent);
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: var(--text-display-accent-size);
  line-height: var(--text-display-accent-leading);
  letter-spacing: var(--text-display-accent-tracking);
}

.text-headline {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-headline-size);
  line-height: var(--text-headline-leading);
  letter-spacing: var(--text-headline-tracking);
}

.text-headline-accent {
  font-family: var(--font-accent);
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: var(--text-headline-accent-size);
  line-height: var(--text-headline-accent-leading);
  letter-spacing: var(--text-headline-accent-tracking);
}

.text-md-regular {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-md-size);
  line-height: var(--text-md-leading);
  letter-spacing: var(--text-md-tracking);
}

.text-md-strong {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-md-size);
  line-height: var(--text-md-leading);
  letter-spacing: var(--text-md-tracking);
}

.text-xs {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-leading);
  letter-spacing: var(--text-xs-tracking);
}