/* ==========================================================================
   MDDM, Meu Departamento de Marketing
   Colors & Type Foundation
   ==========================================================================
   Brutalist-editorial. Black and bone, red accents, bold all-caps,
   mono micro-labels. Brazilian attitude.
   ========================================================================== */

/* ---- Webfonts (Google Fonts substitutes, see README FONT SUBSTITUTIONS) ---- */
/* @import do Google Fonts removido em 2026-05-28 — fontes são self-hosted
   (assets/fonts) e o @import era bloqueado pelo CSP, gerando erro de console. */

:root {
  /* ================================================================ COLORS  */

  /* --- Core neutrals (brutalist high-contrast) --- */
  --mddm-black:      #0A0A0A;   /* near-black, slightly softer than pure */
  --mddm-ink:        #111111;   /* headline ink on light bg */
  --mddm-bone:       #F2EEE5;   /* warm cream/bone, Tiger-style body bg */
  --mddm-paper:      #F7F5EF;   /* lighter paper */
  --mddm-white:      #FFFFFF;

  /* --- Atelier yellow (editorial / poster accent surface) --- */
  --mddm-yellow:        #F2E63A;   /* primary yellow surface, Atelier Triay style */
  --mddm-yellow-deep:   #D9CC1F;   /* shadow / pressed state */
  --mddm-yellow-soft:   #F8EE7A;   /* highlight / wash */
  --mddm-on-yellow:     #2A1505;   /* deep oxblood ink for type on yellow (matches reference) */

  /* Grays (on black and on bone) */
  --mddm-gray-900:   #1A1A1A;
  --mddm-gray-800:   #2A2A2A;
  --mddm-gray-700:   #3D3D3D;
  --mddm-gray-500:   #6B6B6B;
  --mddm-gray-400:   #9A9690;
  --mddm-gray-300:   #C9C4BA;
  --mddm-gray-200:   #DED9CE;
  --mddm-gray-100:   #EAE6DB;

  /* --- Signature accent: MDDM Red --- */
  --mddm-red:        #E8261C;   /* primary accent, Tiger red */
  --mddm-red-deep:   #B41A12;   /* pressed/hover deep */
  --mddm-red-glow:   #FF3A2E;   /* glow/highlight */
  --mddm-blood:      #7A0F0A;   /* oxblood, used on dark backgrounds */

  /* --- Semantic / supporting --- */
  --mddm-success:    #2A6B3E;
  --mddm-warning:    #C98A12;
  --mddm-danger:     var(--mddm-red);

  /* --- Foregrounds / backgrounds (semantic) --- */
  --mddm-bg:         var(--mddm-bone);
  --mddm-bg-inverse: var(--mddm-black);
  --mddm-fg-1:       var(--mddm-ink);          /* primary text on bone */
  --mddm-fg-2:       var(--mddm-gray-700);     /* secondary text */
  --mddm-fg-3:       var(--mddm-gray-700);     /* tertiary / micro (WCAG AA on bone) */
  --mddm-fg-1-inv:   var(--mddm-bone);         /* primary text on black */
  --mddm-fg-2-inv:   var(--mddm-gray-300);
  --mddm-fg-3-inv:   var(--mddm-gray-500);
  --mddm-accent:     var(--mddm-red);
  --mddm-border:     var(--mddm-ink);
  --mddm-border-soft:var(--mddm-gray-200);
  --mddm-border-inv: var(--mddm-bone);

  /* Focus ring */
  --mddm-focus:      0 0 0 2px var(--mddm-bone), 0 0 0 4px var(--mddm-red);

  /* ==================================================================== TYPE */

  /* Families */
  --mddm-font-display: 'Archivo Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;        /* logo / H1, heavy neogrotesque */
  --mddm-font-grotesk: 'Familjen Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;     /* Atelier Triay style grotesque, editorial poster type */
  --mddm-font-sans:    'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;              /* body sans */
  --mddm-font-narrow:  'Archivo Narrow', 'Helvetica Neue Condensed', 'Archivo', sans-serif;    /* condensed display */
  --mddm-font-serif:   'Instrument Serif', 'Times New Roman', Georgia, serif;                   /* editorial accents */
  --mddm-font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;                 /* micro-labels, captions */

  /* Type scale (fluid-ish, tuned for 1440+ but scales down) */
  --mddm-t-mega:   clamp(72px, 12vw, 220px);    /* hero display, "MARKETING" posters */
  --mddm-t-xxxl:   clamp(56px, 8vw, 140px);     /* section banners */
  --mddm-t-xxl:    clamp(40px, 5vw, 80px);      /* H1 */
  --mddm-t-xl:     clamp(32px, 3.6vw, 56px);    /* H2 */
  --mddm-t-lg:     clamp(24px, 2.4vw, 36px);    /* H3 */
  --mddm-t-md:     20px;                         /* H4 / lead */
  --mddm-t-base:   16px;                         /* body */
  --mddm-t-sm:     14px;                         /* small body */
  --mddm-t-xs:     12px;                         /* micro */
  --mddm-t-2xs:    10px;                         /* tag / caption */

  /* Line heights */
  --mddm-lh-tight:  0.92;   /* stacked display */
  --mddm-lh-snug:   1.05;
  --mddm-lh-normal: 1.35;
  --mddm-lh-relaxed:1.6;

  /* Letter spacing */
  --mddm-tr-tight:   -0.02em;   /* big display */
  --mddm-tr-normal:  0;
  --mddm-tr-wide:    0.06em;    /* all-caps eyebrows */
  --mddm-tr-wider:   0.14em;    /* monospace micro */
  --mddm-tr-widest:  0.22em;    /* tracked footer labels */

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

  /* Radii, mostly sharp. Pills only for stamps & a few chips. */
  --mddm-r-0: 0px;          /* default, everything is square */
  --mddm-r-1: 2px;          /* tiny softening */
  --mddm-r-2: 4px;
  --mddm-r-pill: 999px;     /* stamps, chips */

  /* Borders */
  --mddm-bw-hair: 1px;
  --mddm-bw-1:    1.5px;
  --mddm-bw-2:    2px;
  --mddm-bw-3:    4px;     /* brutalist outlines */

  /* Shadows, used sparingly. Prefer hard offset over soft blur. */
  --mddm-shadow-hard:  6px 6px 0 var(--mddm-black);
  --mddm-shadow-hard-red: 6px 6px 0 var(--mddm-red);
  --mddm-shadow-soft:  0 10px 30px rgba(0,0,0,0.18);
  --mddm-shadow-inner: inset 0 0 0 2px var(--mddm-black);

  /* Grid / layout */
  --mddm-gutter:  24px;
  --mddm-margin:  48px;
  --mddm-max-w:   1440px;

  /* Motion */
  --mddm-ease-brut:  cubic-bezier(0.2, 0.9, 0.1, 1);
  --mddm-ease-snap:  cubic-bezier(0.7, 0, 0.2, 1);
  --mddm-dur-1: 120ms;
  --mddm-dur-2: 200ms;
  --mddm-dur-3: 360ms;
}

/* ========================================================================
   Semantic typography primitives
   ======================================================================== */

html { font-family: var(--mddm-font-sans); color: var(--mddm-fg-1); background: var(--mddm-bg); }
body { font-size: var(--mddm-t-base); line-height: var(--mddm-lh-normal); }

.mddm-hero {
  font-family: var(--mddm-font-display);
  font-size: var(--mddm-t-mega);
  line-height: var(--mddm-lh-tight);
  letter-spacing: var(--mddm-tr-tight);
  text-transform: uppercase;
  margin: 0;
}

.mddm-h1 {
  font-family: var(--mddm-font-display);
  font-size: var(--mddm-t-xxl);
  line-height: var(--mddm-lh-tight);
  letter-spacing: var(--mddm-tr-tight);
  text-transform: uppercase;
  margin: 0;
}

.mddm-h2 {
  font-family: var(--mddm-font-narrow);
  font-weight: 700;
  font-size: var(--mddm-t-xl);
  line-height: var(--mddm-lh-snug);
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0;
}

.mddm-h3 {
  font-family: var(--mddm-font-sans);
  font-weight: 800;
  font-size: var(--mddm-t-lg);
  line-height: var(--mddm-lh-snug);
  text-transform: uppercase;
  letter-spacing: var(--mddm-tr-wide);
  margin: 0;
}

.mddm-editorial {
  font-family: var(--mddm-font-serif);
  font-style: italic;
  font-size: var(--mddm-t-xl);
  line-height: var(--mddm-lh-snug);
  letter-spacing: -0.01em;
  margin: 0;
}

.mddm-lead {
  font-family: var(--mddm-font-sans);
  font-weight: 500;
  font-size: var(--mddm-t-md);
  line-height: var(--mddm-lh-relaxed);
}

.mddm-body {
  font-family: var(--mddm-font-sans);
  font-weight: 400;
  font-size: var(--mddm-t-base);
  line-height: var(--mddm-lh-relaxed);
  color: var(--mddm-fg-1);
}

.mddm-eyebrow {
  font-family: var(--mddm-font-mono);
  font-weight: 500;
  font-size: var(--mddm-t-xs);
  text-transform: uppercase;
  letter-spacing: var(--mddm-tr-wider);
  color: var(--mddm-fg-2);
}

.mddm-micro {
  font-family: var(--mddm-font-mono);
  font-weight: 400;
  font-size: var(--mddm-t-2xs);
  text-transform: uppercase;
  letter-spacing: var(--mddm-tr-widest);
  color: var(--mddm-fg-3);
}

.mddm-index {                 /* ".01" .02" oblique section markers */
  font-family: var(--mddm-font-sans);
  font-weight: 500;
  font-size: 0.45em;
  letter-spacing: 0;
  vertical-align: super;
  opacity: 0.9;
}

/* Inverse (on black) */
.mddm-on-dark { color: var(--mddm-fg-1-inv); background: var(--mddm-bg-inverse); }
.mddm-on-dark .mddm-eyebrow { color: var(--mddm-fg-2-inv); }
.mddm-on-dark .mddm-micro   { color: var(--mddm-fg-3-inv); }
.mddm-on-dark .mddm-body    { color: var(--mddm-fg-1-inv); }

/* Red accent text */
.mddm-red-text { color: var(--mddm-red); }

/* Utility rule line */
.mddm-rule { border: 0; border-top: var(--mddm-bw-1) solid currentColor; margin: var(--mddm-space-5) 0; opacity: 0.7; }