/* ============================================================
   SEYMON MARKOV — Design Tokens
   Source of truth for color, type, space, motion.
   Brand palette extracted from "Paleta de Cores.pdf" (CMYK→sRGB).
   Aesthetic: light / editorial luxury. Typeface: Mona Sans.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Mona Sans";
  src: url("../assets/fonts/MonaSans-Variable.ttf") format("truetype-variations");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mona Sans";
  src: url("../assets/fonts/MonaSans-Italic-Variable.ttf") format("truetype-variations");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Brand palette (raw) — official RGB values, taken from the vector logo ---------- */
  --smkv-petrol:        #0c4242; /* official petrol/teal — structure, dark bands, CTA */
  --smkv-emerald:       #12624B; /* signature brand green — accent / hover */
  --smkv-green-deep:    #0F4033; /* alt dark green — deep sections */
  --smkv-taupe:         #c1bc9e; /* official taupe/nude — rules, accents, section index */
  --smkv-sage:          #BFCC99; /* soft secondary */
  --smkv-ivory:         #f7f4f0; /* official cream — canvas */

  /* ---------- Derived tints / shades ---------- */
  --smkv-emerald-700:   #0E4F3C;
  --smkv-emerald-300:   #5E9B86;
  --smkv-taupe-200:     #D8CFBF;
  --smkv-sage-100:      #E6EBD6;
  --smkv-ivory-200:     #F2F1E9;
  --smkv-ink-70:        #3A4A47; /* muted body ink on light */
  --smkv-ink-50:        #5C6A67;
  --smkv-line:          #E2E1D6; /* hairline on ivory */
  --smkv-line-dark:     rgba(255,255,255,.14); /* hairline on dark */

  /* ---------- Semantic (light surfaces) ---------- */
  --bg:                 var(--smkv-ivory);
  --surface:            #FFFFFF;
  --surface-alt:        var(--smkv-ivory-200);
  --text:               var(--smkv-petrol);
  --text-muted:         var(--smkv-ink-70);
  --text-subtle:        var(--smkv-ink-50);
  --primary:            var(--smkv-emerald);
  --primary-hover:      var(--smkv-emerald-700);
  --accent:             var(--smkv-taupe);   /* decorative only (rules, chips) — NOT text on light */
  --accent-ink:         #6E6450;             /* taupe darkened for TEXT on light — ~5:1 AA */
  --accent-soft:        var(--smkv-sage);
  --border:            var(--smkv-line);

  /* ---------- Semantic (dark / proof blocks) ---------- */
  --bg-dark:            var(--smkv-petrol);
  --bg-dark-2:          var(--smkv-green-deep);
  --text-on-dark:       #F4F6F2;
  --text-on-dark-muted: #B9C6C0;
  --border-on-dark:     var(--smkv-line-dark);

  /* ---------- CTA ---------- */
  --cta-bg:             var(--smkv-emerald);
  --cta-bg-hover:       var(--smkv-emerald-700);
  --cta-text:           var(--smkv-ivory);
  --cta-bg-on-dark:     var(--smkv-sage);
  --cta-text-on-dark:   var(--smkv-petrol);

  /* ---------- Typography ---------- */
  --font-sans: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);

  /* Fluid type scale (min 360px → max 1280px) — enlarged; display stays light (not bold) */
  --fs-overline: clamp(.8rem, .76rem + .16vw, .86rem);
  --fs-body-sm:  clamp(.95rem, .9rem + .22vw, 1.03rem);
  --fs-body:     clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --fs-lead:     clamp(1.2rem, 1.06rem + .6vw, 1.6rem);
  --fs-h4:       clamp(1.45rem, 1.15rem + .9vw, 1.85rem);
  --fs-h3:       clamp(1.6rem, 1.28rem + 1.5vw, 2.4rem);
  --fs-h2:       clamp(2.05rem, 1.55rem + 2.2vw, 3.15rem);
  --fs-h1:       clamp(2.9rem, 2rem + 3.6vw, 4.6rem);
  --fs-display:  clamp(3.1rem, 2.1rem + 4vw, 5.2rem);

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-body:  1.62;
  --tracking-tight: -0.02em;
  --tracking-overline: 0.16em;

  --w-display: 300; /* light display — presence comes from SIZE, never bold */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* ---------- Spacing (8pt) ---------- */
  --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 2.5rem; --sp-8: 3rem;   --sp-10: 4rem;
  --sp-12: 6rem;   --sp-16: 8rem;  --sp-20: 10rem;
  --section-y: clamp(3.5rem, 2rem + 7vw, 8rem);

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, .5rem + 3vw, 3rem);

  /* ---------- Radius / shadow / motion ---------- */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(12,41,41,.06), 0 2px 8px rgba(12,41,41,.05);
  --shadow: 0 12px 30px -12px rgba(12,41,41,.18);
  --shadow-lg: 0 30px 60px -24px rgba(12,41,41,.28);
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .28s;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}