/* ============================================================
   Madame Marí / Mariela Grossi — Colors + Type Foundation
   ============================================================
   Brand: Mariela Grossi (Meta Ads / publicidad digital)
   Source: Brandbook-Madame.docx (v1.0, 28/05/2026) + marielagrossi.com
   ============================================================ */

/* ---------- Font faces ---------- */

/* Kanit — display / títulos / impacto. ALWAYS UPPERCASE for headings. */
@font-face { font-family: 'Kanit'; font-weight: 100; font-style: normal;
  src: url('fonts/Kanit-Thin.woff2') format('woff2'), url('fonts/Kanit-Thin.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Kanit'; font-weight: 100; font-style: italic;
  src: url('fonts/Kanit-ThinItalic.woff2') format('woff2'), url('fonts/Kanit-ThinItalic.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Kanit'; font-weight: 200; font-style: normal;
  src: url('fonts/Kanit-ExtraLight.woff2') format('woff2'), url('fonts/Kanit-ExtraLight.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Kanit'; font-weight: 200; font-style: italic;
  src: url('fonts/Kanit-ExtraLightItalic.woff2') format('woff2'), url('fonts/Kanit-ExtraLightItalic.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Kanit'; font-weight: 300; font-style: normal;
  src: url('fonts/Kanit-Light.woff2') format('woff2'), url('fonts/Kanit-Light.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Kanit'; font-weight: 300; font-style: italic;
  src: url('fonts/Kanit-LightItalic.woff2') format('woff2'), url('fonts/Kanit-LightItalic.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Kanit'; font-weight: 400; font-style: normal;
  src: url('fonts/Kanit-Regular.woff2') format('woff2'), url('fonts/Kanit-Regular.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Kanit'; font-weight: 400; font-style: italic;
  src: url('fonts/Kanit-Italic.woff2') format('woff2'), url('fonts/Kanit-Italic.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Kanit'; font-weight: 500; font-style: normal;
  src: url('fonts/Kanit-Medium.woff2') format('woff2'), url('fonts/Kanit-Medium.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Kanit'; font-weight: 500; font-style: italic;
  src: url('fonts/Kanit-MediumItalic.woff2') format('woff2'), url('fonts/Kanit-MediumItalic.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Kanit'; font-weight: 600; font-style: normal;
  src: url('fonts/Kanit-SemiBold.woff2') format('woff2'), url('fonts/Kanit-SemiBold.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Kanit'; font-weight: 600; font-style: italic;
  src: url('fonts/Kanit-SemiBoldItalic.woff2') format('woff2'), url('fonts/Kanit-SemiBoldItalic.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Kanit'; font-weight: 700; font-style: normal;
  src: url('fonts/Kanit-Bold.woff2') format('woff2'), url('fonts/Kanit-Bold.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Kanit'; font-weight: 700; font-style: italic;
  src: url('fonts/Kanit-BoldItalic.woff2') format('woff2'), url('fonts/Kanit-BoldItalic.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Kanit'; font-weight: 800; font-style: normal;
  src: url('fonts/Kanit-ExtraBold.woff2') format('woff2'), url('fonts/Kanit-ExtraBold.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Kanit'; font-weight: 800; font-style: italic;
  src: url('fonts/Kanit-ExtraBoldItalic.woff2') format('woff2'), url('fonts/Kanit-ExtraBoldItalic.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Kanit'; font-weight: 900; font-style: normal;
  src: url('fonts/Kanit-Black.woff2') format('woff2'), url('fonts/Kanit-Black.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Kanit'; font-weight: 900; font-style: italic;
  src: url('fonts/Kanit-BlackItalic.woff2') format('woff2'), url('fonts/Kanit-BlackItalic.woff') format('woff'); font-display: swap; }

/* Roboto Mono — body / captions / data. Sentence case. */
@font-face { font-family: 'Roboto Mono'; font-weight: 200; font-style: normal;
  src: url('fonts/RobotoMono-ExtraLight.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Roboto Mono'; font-weight: 200; font-style: italic;
  src: url('fonts/RobotoMono-ExtraLightItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Roboto Mono'; font-weight: 300; font-style: normal;
  src: url('fonts/RobotoMono-Light.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Roboto Mono'; font-weight: 300; font-style: italic;
  src: url('fonts/RobotoMono-LightItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Roboto Mono'; font-weight: 400; font-style: normal;
  src: url('fonts/RobotoMono-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Roboto Mono'; font-weight: 400; font-style: italic;
  src: url('fonts/RobotoMono-Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Roboto Mono'; font-weight: 500; font-style: normal;
  src: url('fonts/RobotoMono-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Roboto Mono'; font-weight: 500; font-style: italic;
  src: url('fonts/RobotoMono-MediumItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Roboto Mono'; font-weight: 600; font-style: normal;
  src: url('fonts/RobotoMono-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Roboto Mono'; font-weight: 600; font-style: italic;
  src: url('fonts/RobotoMono-SemiBoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Roboto Mono'; font-weight: 700; font-style: normal;
  src: url('fonts/RobotoMono-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Roboto Mono'; font-weight: 700; font-style: italic;
  src: url('fonts/RobotoMono-BoldItalic.ttf') format('truetype'); font-display: swap; }

/* Plus Jakarta Sans — secondary web body. Loaded from Google Fonts at usage sites:
   <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"> */

/* Italiana — SUBSTITUTE for "Chic Avenue" (brand-script for "Mariela Grossi" wordmark).
   Brandbook specifies Chic Avenue — font file not supplied. Italiana is the nearest
   public match (single-weight, elegant high-contrast didone-ish serif).
   Loaded from Google Fonts at usage sites:
   <link href="https://fonts.googleapis.com/css2?family=Italiana&display=swap" rel="stylesheet"> */

:root {
  /* ---------- COLOR — Brand core ---------- */
  --mm-pink:        #c9839a;  /* Rosa Madame Marí — títulos, highlights, CTAs */
  --mm-pink-soft:   #c9839a40; /* 25% — highlight detrás de palabras */
  --mm-pink-glow:   #c9839a26; /* 15% — outer glow / hover wash */
  --mm-black:       #0d0b11;  /* Negro fondo principal */
  --mm-black-deep:  #07060a;  /* Casi negro — para vignettes */
  --mm-white:       #ffffff;  /* Texto cuerpo principal */
  --mm-teal:        #5dcaa5;  /* Verde teal — acento secundario (raro) */

  /* ---------- COLOR — Neutrals (derived) ---------- */
  --mm-ink-1:       #ffffff;            /* fg primary */
  --mm-ink-2:       rgba(255,255,255,.70); /* fg secondary (body 70%) */
  --mm-ink-3:       rgba(255,255,255,.50); /* fg tertiary (captions) */
  --mm-ink-4:       rgba(255,255,255,.32); /* fg quaternary (disabled) */
  --mm-ink-5:       rgba(255,255,255,.14); /* hairlines */
  --mm-ink-6:       rgba(255,255,255,.06); /* faint dividers / card fills */

  --mm-bg-1:        #0d0b11;  /* page */
  --mm-bg-2:        #14111a;  /* card */
  --mm-bg-3:        #1c1823;  /* raised */
  --mm-bg-4:        #26212e;  /* hover / input */

  /* ---------- COLOR — Semantic ---------- */
  --mm-fg:          var(--mm-ink-1);
  --mm-fg-muted:    var(--mm-ink-2);
  --mm-fg-faint:    var(--mm-ink-3);
  --mm-accent:      var(--mm-pink);
  --mm-accent-2:    var(--mm-teal);
  --mm-bg:          var(--mm-bg-1);
  --mm-card:        var(--mm-bg-2);
  --mm-hairline:    var(--mm-ink-5);
  --mm-success:     var(--mm-teal);
  --mm-warn:        #e8c267;
  --mm-error:       #e26d6d;

  /* ---------- TYPE — Families ---------- */
  --mm-font-display: 'Kanit', 'Arial Narrow', sans-serif;
  --mm-font-body:    'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --mm-font-web:     'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mm-font-script:  'Italiana', 'Playfair Display', Georgia, serif;  /* substitute for Chic Avenue */

  /* ---------- TYPE — Weights ---------- */
  --mm-w-thin: 100; --mm-w-extralight: 200; --mm-w-light: 300; --mm-w-regular: 400;
  --mm-w-medium: 500; --mm-w-semibold: 600; --mm-w-bold: 700; --mm-w-extrabold: 800; --mm-w-black: 900;

  /* ---------- TYPE — Scale (web) ---------- */
  --mm-fs-hero:     clamp(48px, 7vw, 96px);   /* H1 hero / hook */
  --mm-fs-display:  clamp(40px, 5vw, 64px);   /* big section opener */
  --mm-fs-h1:       clamp(36px, 4vw, 56px);
  --mm-fs-h2:       clamp(28px, 3vw, 42px);
  --mm-fs-h3:       clamp(22px, 2vw, 28px);
  --mm-fs-h4:       18px;
  --mm-fs-eyebrow:  13px;                     /* small UPPERCASE label */
  --mm-fs-body:     15px;                     /* web desktop body */
  --mm-fs-body-sm:  13px;
  --mm-fs-caption:  12px;

  /* ---------- TYPE — Tracking + leading ---------- */
  --mm-tracking-display: -0.02em;  /* -1 to -2% on Kanit */
  --mm-tracking-tight:   -0.01em;
  --mm-tracking-normal:  0;
  --mm-tracking-wide:    0.06em;   /* eyebrows / labels */
  --mm-tracking-extra:   0.12em;
  --mm-leading-display:  1.05;
  --mm-leading-tight:    1.2;
  --mm-leading-snug:     1.35;
  --mm-leading-body:     1.65;     /* 1.6–1.7 cuerpo */

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

  /* Margen no negociable: 8% del lienzo (mínimo) */
  --mm-canvas-margin: 8%;

  /* ---------- RADII ---------- */
  --mm-radius-0:    0px;          /* hard edges — preferred for ads/social */
  --mm-radius-1:    6px;          /* inputs, tags */
  --mm-radius-2:    12px;         /* cards (web) */
  --mm-radius-3:    20px;         /* large cards */
  --mm-radius-pill: 999px;        /* CTA buttons */

  /* ---------- BORDERS ---------- */
  --mm-border:      1px solid var(--mm-ink-5);
  --mm-border-soft: 1px solid var(--mm-ink-6);
  --mm-border-pink: 1px solid var(--mm-pink);

  /* ---------- SHADOWS ---------- */
  /* Brand rule: NO text-shadow, NO drop-shadows on text. Card shadows OK on web. */
  --mm-shadow-0: none;
  --mm-shadow-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.4);
  --mm-shadow-2: 0 8px 24px rgba(0,0,0,.55);
  --mm-shadow-3: 0 24px 60px rgba(0,0,0,.65);
  --mm-glow-pink: 0 0 40px rgba(201,131,154,.35);

  /* ---------- SCREENSHOT / MOCKUP (tutorial carousels — brandbook v2) ----------
     EXCEPTION to the hard-edge / no-shadow social rule. Interface captures
     (Meta Ads Manager, Business Suite) overlaid on tutorial/educational slides
     get a subtle shadow + rounded corners, integrated on the dark background.
     Reference style: @nuriagutval. */
  --mm-shot-radius:  18px;   /* rounded corners on the capture */
  --mm-shot-radius-sm: 10px; /* inner controls inside a capture */
  --mm-shot-border:  1px solid rgba(255,255,255,.10);
  --mm-shot-shadow:  0 30px 70px rgba(0,0,0,.55), 0 8px 20px rgba(0,0,0,.4);
  --mm-shot-glow:    0 0 0 1px rgba(255,255,255,.04), 0 24px 60px rgba(7,6,10,.6);

  /* ---------- MOTION ---------- */
  --mm-ease:        cubic-bezier(.2, .7, .2, 1);   /* gentle ease-out */
  --mm-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --mm-dur-1: 120ms;
  --mm-dur-2: 220ms;
  --mm-dur-3: 360ms;

  /* ---------- LAYOUT ---------- */
  --mm-container:   1200px;
  --mm-gutter:      24px;

  /* ---------- TEXTURE TOKENS (paths) ---------- */
  --mm-texture-paper:  url('assets/texture-paper.svg');
  --mm-texture-vinyl:  url('assets/texture-vinyl.svg');
  --mm-texture-noise:  url('assets/texture-noise.svg');
}

/* ============================================================
   SEMANTIC type classes — call these from designs
   ============================================================ */

.mm-display, .mm-hero {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-w-extrabold);
  font-size: var(--mm-fs-hero);
  line-height: var(--mm-leading-display);
  letter-spacing: var(--mm-tracking-display);
  text-transform: uppercase;
  color: var(--mm-fg);
}

.mm-h1 { font-family: var(--mm-font-display); font-weight: var(--mm-w-bold);
  font-size: var(--mm-fs-h1); line-height: var(--mm-leading-tight);
  letter-spacing: var(--mm-tracking-display); text-transform: uppercase; }

.mm-h2 { font-family: var(--mm-font-display); font-weight: var(--mm-w-bold);
  font-size: var(--mm-fs-h2); line-height: var(--mm-leading-tight);
  letter-spacing: var(--mm-tracking-display); text-transform: uppercase; }

.mm-h3 { font-family: var(--mm-font-display); font-weight: var(--mm-w-semibold);
  font-size: var(--mm-fs-h3); line-height: var(--mm-leading-snug);
  letter-spacing: var(--mm-tracking-tight); text-transform: uppercase; }

.mm-h4 { font-family: var(--mm-font-display); font-weight: var(--mm-w-semibold);
  font-size: var(--mm-fs-h4); line-height: var(--mm-leading-snug);
  letter-spacing: var(--mm-tracking-tight); text-transform: uppercase; }

.mm-eyebrow {
  font-family: var(--mm-font-body);
  font-weight: var(--mm-w-medium);
  font-size: var(--mm-fs-eyebrow);
  letter-spacing: var(--mm-tracking-extra);
  text-transform: uppercase;
  color: var(--mm-pink);
}

.mm-body {
  font-family: var(--mm-font-body);
  font-weight: var(--mm-w-regular);
  font-size: var(--mm-fs-body);
  line-height: var(--mm-leading-body);
  color: var(--mm-fg-muted);
}

.mm-body-sm { font-family: var(--mm-font-body); font-weight: var(--mm-w-regular);
  font-size: var(--mm-fs-body-sm); line-height: var(--mm-leading-body); color: var(--mm-fg-muted); }

.mm-caption { font-family: var(--mm-font-body); font-weight: var(--mm-w-regular);
  font-size: var(--mm-fs-caption); line-height: 1.5; letter-spacing: var(--mm-tracking-wide);
  color: var(--mm-fg-faint); text-transform: uppercase; }

.mm-quote { font-family: var(--mm-font-script); font-weight: 400;
  font-size: clamp(28px, 3.5vw, 44px); line-height: 1.25; letter-spacing: 0;
  color: var(--mm-fg); font-style: italic; }

.mm-script {  /* Mariela Grossi wordmark */
  font-family: var(--mm-font-script); font-weight: 400; letter-spacing: .02em;
}

.mm-mark {
  background: var(--mm-pink-soft);
  color: var(--mm-fg);
  padding: 0 .12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ============================================================
   Base
   ============================================================ */

.mm-canvas {
  background: var(--mm-bg);
  color: var(--mm-fg);
  font-family: var(--mm-font-body);
}