/* =============================================================
   Sylvia Vaquer Design System — Core Tokens
   -------------------------------------------------------------
   A monochrome, editorial system. Black and white do the heavy
   lifting; everything else is a shade of gray. Typography is
   dominant — Public Sans display for headlines, Inter for
   metric / data moments, clean and tightly tracked.
   ============================================================= */

/* ---- FONT FACES ------------------------------------------------
   Self-hosted variable fonts (upright + italic) for Inter + Public Sans.
   Drop replacement ttf/woff2 files in /fonts if the filenames change.
----------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Italic-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("fonts/PublicSans-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("fonts/PublicSans-Italic-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ========== COLOR — CORE ========== */
  --sv-black:       #000000;
  --sv-white:       #FFFFFF;

  /* Warm grays — subtle off-white backgrounds and dividers */
  --sv-warm-gray-lt: #F2F1ED;  /* lightest warm gray */
  --sv-warm-gray:    #DFDCD6;  /* mid warm gray */

  /* Gray scale — derived from Figma usage (140, 204 are canonical) */
  --sv-gray-50:     #F7F7F7;
  --sv-gray-100:    #EDEDED;
  --sv-gray-200:    #D9D9D9;
  --sv-gray-300:    #CCCCCC;   /* canonical: rgb(204,204,204) */
  --sv-gray-400:    #A8A8A8;
  --sv-gray-500:    #8C8C8C;   /* canonical: rgb(140,140,140) */
  --sv-gray-600:    #6B6B6B;
  --sv-gray-700:    #4A4A4A;
  --sv-gray-800:    #2A2A2A;
  --sv-gray-900:    #121212;

  /* Black-on-white overlays / scrim — used in hero portrait wash */
  --sv-scrim-top:    rgba(0,0,0,0);
  --sv-scrim-mid:    rgba(0,0,0,0.80);
  --sv-scrim-bottom: rgba(0,0,0,1);

  /* ========== SEMANTIC — LIGHT (canvas) ========== */
  --sv-bg:          var(--sv-white);
  --sv-bg-alt:      var(--sv-gray-50);
  --sv-fg:          var(--sv-black);
  --sv-fg-2:        var(--sv-gray-700);   /* body secondary */
  --sv-fg-3:        var(--sv-gray-500);   /* captions, eyebrows */
  --sv-fg-4:        var(--sv-gray-400);   /* ghost */
  --sv-rule:        var(--sv-gray-200);   /* hairline divider */
  --sv-rule-strong: var(--sv-black);      /* feature rule */
  --sv-link:        var(--sv-black);
  --sv-link-hover:  var(--sv-gray-600);

  /* ========== SEMANTIC — DARK (inverse surfaces) ========== */
  --sv-bg-inv:      var(--sv-black);
  --sv-bg-inv-alt:  var(--sv-gray-900);
  --sv-fg-inv:      var(--sv-white);
  --sv-fg-inv-2:    var(--sv-gray-300);
  --sv-fg-inv-3:    var(--sv-gray-500);
  --sv-rule-inv:    var(--sv-gray-800);

  /* ========== TYPOGRAPHY — FAMILIES ========== */
  /* Display: long-form expressive headlines ("¡Hola! I'm Sylvia.") */
  --sv-font-display: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  /* Body + UI */
  --sv-font-body:    "Public Sans", "Helvetica Neue", Arial, sans-serif;
  /* Data / numerals (impact metrics, tabular figures) */
  --sv-font-mono:    "Inter", "Helvetica Neue", Arial, sans-serif;
  /* Keep a real mono for codey moments */
  --sv-font-code:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ========== TYPOGRAPHY — SCALE ========== */
  /* Pulled from Figma: 90 / 100 / 110 px Inter Bold for metrics,
     48 / 24 / 20 / 18 px Public Sans for copy.
     Extended upward + downward for full system coverage.        */
  --sv-fs-metric-xl:  110px;
  --sv-fs-metric-lg:  100px;
  --sv-fs-metric-md:  90px;
  --sv-fs-metric-sm:  50px;

  --sv-fs-display-xl: 96px;
  --sv-fs-display-lg: 72px;
  --sv-fs-display-md: 56px;
  --sv-fs-display-sm: 48px;   /* canonical: "¡Hola! I'm Sylvia." */

  --sv-fs-h1:         40px;
  --sv-fs-h2:         32px;
  --sv-fs-h3:         24px;   /* canonical */
  --sv-fs-h4:         20px;
  --sv-fs-h5:         18px;
  --sv-fs-h6:         16px;

  --sv-fs-body-lg:    20px;   /* canonical: long-form intro copy */
  --sv-fs-body:       18px;   /* canonical */
  --sv-fs-body-sm:    16px;
  --sv-fs-caption:    14px;
  --sv-fs-eyebrow:    12px;

  /* Weights */
  --sv-fw-regular: 400;
  --sv-fw-medium:  500;
  --sv-fw-semi:    600;
  --sv-fw-bold:    700;
  --sv-fw-black:   800;

  /* Line heights */
  --sv-lh-tight:   1.00;   /* metric numbers, cropped */
  --sv-lh-display: 1.10;   /* canonical Public Sans Bold 48/52.8 */
  --sv-lh-heading: 1.20;
  --sv-lh-body:    1.55;
  --sv-lh-loose:   1.70;

  /* Letter-spacing — tight on display, none on body */
  --sv-tracking-display: -0.022em; /* canonical for 48/h display */
  --sv-tracking-metric:  -0.019em; /* canonical for metric numerals */
  --sv-tracking-tight:   -0.01em;
  --sv-tracking-normal:  0em;
  --sv-tracking-eyebrow: 0.14em;   /* FEATURED CASE STUDIES, all-caps */

  /* ========== SPACING ========== */
  --sv-space-0:  0;
  --sv-space-1:  4px;
  --sv-space-2:  8px;
  --sv-space-3:  12px;
  --sv-space-4:  16px;
  --sv-space-5:  24px;
  --sv-space-6:  32px;
  --sv-space-7:  48px;
  --sv-space-8:  64px;
  --sv-space-9:  96px;
  --sv-space-10: 128px;
  --sv-space-11: 160px;

  /* ========== RADII — near-zero. Brand is square. ========== */
  --sv-radius-none: 0;
  --sv-radius-xs:   2px;
  --sv-radius-sm:   4px;
  --sv-radius-pill: 999px;

  /* ========== SHADOWS — minimal ========== */
  --sv-shadow-none: none;
  --sv-shadow-soft: 0 1px 2px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
  --sv-shadow-lift: 0 12px 48px rgba(0,0,0,0.10);

  /* ========== BORDERS ========== */
  --sv-border-hair: 1px solid var(--sv-rule);
  --sv-border-bold: 1.5px solid var(--sv-black);

  /* ========== LAYOUT ========== */
  --sv-max-width:   1440px;    /* canonical hero frame */
  --sv-col-gutter:  24px;
  --sv-page-pad:    clamp(24px, 6vw, 96px);

  /* ========== MOTION ========== */
  --sv-ease:         cubic-bezier(0.2, 0.6, 0.2, 1);
  --sv-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --sv-dur-fast:     120ms;
  --sv-dur:          240ms;
  --sv-dur-slow:     480ms;
  --sv-dur-marquee:  40s;     /* client logo bar */
}

/* =============================================================
   SEMANTIC ELEMENT DEFAULTS
   Drop colors_and_type.css on a page and things are readable.
   ============================================================= */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  background: var(--sv-bg);
  color: var(--sv-fg);
  font-family: var(--sv-font-body);
  font-size: var(--sv-fs-body);
  line-height: var(--sv-lh-body);
  font-weight: var(--sv-fw-regular);
  letter-spacing: var(--sv-tracking-normal);
  text-wrap: pretty;
}

/* DISPLAY / HEADLINE */
.sv-display, .sv-h-xl {
  font-family: var(--sv-font-display);
  font-weight: var(--sv-fw-bold);
  font-size: var(--sv-fs-display-sm);
  line-height: var(--sv-lh-display);
  letter-spacing: var(--sv-tracking-display);
  text-wrap: balance;
}

h1, .sv-h1 { font-family: var(--sv-font-display); font-weight: var(--sv-fw-bold); font-size: var(--sv-fs-h1); line-height: var(--sv-lh-heading); letter-spacing: var(--sv-tracking-tight); text-wrap: balance; }
h2, .sv-h2 { font-family: var(--sv-font-display); font-weight: var(--sv-fw-bold); font-size: var(--sv-fs-h2); line-height: var(--sv-lh-heading); letter-spacing: var(--sv-tracking-tight); }
h3, .sv-h3 { font-family: var(--sv-font-display); font-weight: var(--sv-fw-bold); font-size: var(--sv-fs-h3); line-height: var(--sv-lh-heading); }
h4, .sv-h4 { font-family: var(--sv-font-display); font-weight: var(--sv-fw-bold); font-size: var(--sv-fs-h4); line-height: var(--sv-lh-heading); }
h5, .sv-h5 { font-family: var(--sv-font-display); font-weight: var(--sv-fw-bold); font-size: var(--sv-fs-h5); line-height: var(--sv-lh-heading); }

/* BODY */
.sv-lead    { font-size: var(--sv-fs-body-lg); font-weight: var(--sv-fw-regular); color: var(--sv-fg); line-height: var(--sv-lh-body); }
.sv-body    { font-size: var(--sv-fs-body); color: var(--sv-fg); }
p           { font-size: var(--sv-fs-body); line-height: var(--sv-lh-body); }
.sv-muted   { color: var(--sv-fg-2); }
.sv-meta    { color: var(--sv-fg-3); font-size: var(--sv-fs-caption); }

/* EYEBROW — the "FEATURED CASE STUDIES" label on sylviavaquer.com */
.sv-eyebrow {
  font-family: var(--sv-font-mono);
  font-size: var(--sv-fs-eyebrow);
  font-weight: var(--sv-fw-medium);
  letter-spacing: var(--sv-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sv-fg-3);
}

/* METRIC — the big %/x numbers */
.sv-metric {
  font-family: var(--sv-font-mono);
  font-weight: var(--sv-fw-bold);
  font-size: var(--sv-fs-metric-lg);
  line-height: var(--sv-lh-tight);
  letter-spacing: var(--sv-tracking-metric);
  color: var(--sv-fg);
  font-feature-settings: "tnum" 1;
}

/* LINKS — underlined, no color */
a { color: var(--sv-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--sv-link-hover); }

/* RULES */
hr { border: 0; border-top: var(--sv-border-hair); margin: var(--sv-space-7) 0; }

/* FOCUS — high-contrast, square */
*:focus-visible { outline: 2px solid var(--sv-black); outline-offset: 3px; border-radius: 0; }

/* DARK SURFACE */
.sv-on-black { background: var(--sv-bg-inv); color: var(--sv-fg-inv); }
.sv-on-black h1, .sv-on-black h2, .sv-on-black h3, .sv-on-black h4, .sv-on-black h5 { color: var(--sv-fg-inv); }
.sv-on-black .sv-muted { color: var(--sv-fg-inv-2); }
.sv-on-black .sv-meta, .sv-on-black .sv-eyebrow { color: var(--sv-fg-inv-3); }
.sv-on-black a { color: var(--sv-fg-inv); }
.sv-on-black hr { border-top-color: var(--sv-rule-inv); }