/* ============================================================
   Fonts — Meu Marketing Contábil
   NOTE: The original brand font from MANUALDAMARCA_MMC2026.pdf
   was not available in this project. These are close Google Font
   substitutes chosen to match the brand's rounded-geometric
   wordmark (display) and a clean professional B2B body face.
   --> Flagged to the user: replace if brand specifies otherwise.
   - Poppins  : geometric, rounded, echoes the logo wordmark.
   - Plus Jakarta Sans : modern, highly legible B2B/SaaS body.
   ============================================================ */

/* ============================================================
   Colors — Meu Marketing Contábil
   Brand: Magenta #DF0069 (primary)  •  Indigo #273C9A (secondary)
   Sampled directly from the brand logo + icon artwork.
   ============================================================ */
:root {
  /* ---- Brand: Magenta (primary) ---- */
  --magenta-50:  #fff0f6;
  --magenta-100: #ffe0ec;
  --magenta-200: #ffb3d0;
  --magenta-300: #fa80ae;
  --magenta-400: #ed3d86;
  --magenta-500: #df0069; /* BRAND PINK */
  --magenta-600: #c2005b;
  --magenta-700: #9e0049;
  --magenta-800: #7a0038;
  --magenta-900: #5c002b;

  /* ---- Brand: Indigo (secondary) ---- */
  --indigo-50:  #eef1fb;
  --indigo-100: #dde3f6;
  --indigo-200: #b6c1ec;
  --indigo-300: #8595de;
  --indigo-400: #4f63c0;
  --indigo-500: #273c9a; /* BRAND INDIGO */
  --indigo-600: #1f3184;
  --indigo-700: #18266b;
  --indigo-800: #131e54;
  --indigo-900: #0e153d;

  /* ---- Neutrals (cool slate, harmonized to indigo) ---- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f7f8fa;
  --neutral-100: #eef0f4;
  --neutral-200: #e0e4ea;
  --neutral-300: #c8cfd9;
  --neutral-400: #9aa3b2;
  --neutral-500: #6b7280;
  --neutral-600: #4b5563;
  --neutral-700: #374151;
  --neutral-800: #1f2733;
  --neutral-900: #0f1622;

  /* ---- Semantic palette ---- */
  --green-500:  #16a34a;
  --green-50:   #e9f7ef;
  --amber-500:  #f59e0b;
  --amber-50:   #fef4e2;
  --red-500:    #dc2626;
  --red-50:     #fdeaea;

  /* ============================================================
     Semantic aliases — prefer these in components/UI
     ============================================================ */
  --color-primary:        var(--magenta-500);
  --color-primary-hover:   var(--magenta-600);
  --color-primary-active:  var(--magenta-700);
  --color-primary-subtle:  var(--magenta-50);
  --color-on-primary:      var(--neutral-0);

  --color-secondary:        var(--indigo-500);
  --color-secondary-hover:  var(--indigo-600);
  --color-secondary-active: var(--indigo-700);
  --color-secondary-subtle: var(--indigo-50);
  --color-on-secondary:     var(--neutral-0);

  /* Text */
  --text-strong:   var(--indigo-900);
  --text-body:     var(--neutral-700);
  --text-muted:    var(--neutral-500);
  --text-subtle:   var(--neutral-400);
  --text-on-dark:  var(--neutral-0);
  --text-link:     var(--magenta-500);

  /* Surfaces */
  --surface-page:    var(--neutral-50);
  --surface-card:    var(--neutral-0);
  --surface-raised:  var(--neutral-0);
  --surface-inverse: var(--indigo-900);
  --surface-tint:    var(--indigo-50);

  /* Borders */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-focus:   var(--magenta-500);

  /* Feedback */
  --color-success: var(--green-500);
  --color-warning: var(--amber-500);
  --color-danger:  var(--red-500);
  --color-info:    var(--indigo-500);

  /* Brand gradient (use sparingly — section accents only) */
  --gradient-brand: linear-gradient(100deg, var(--magenta-500) 0%, var(--indigo-500) 100%);
}

/* ============================================================
   Typography — Meu Marketing Contábil
   Display/headings: Poppins (geometric, echoes wordmark)
   Body/UI:          Plus Jakarta Sans (clean B2B legibility)
   ============================================================ */
:root {
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;

  /* Weights */
  --fw-regular:  400; /* @kind other */
  --fw-medium:   500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold:     700; /* @kind other */
  --fw-extra:    800; /* @kind other */

  /* Type scale (rem, 16px base) — major-third-ish, tuned for B2B */
  --fs-display:  3.5rem;   /* 56px — hero */
  --fs-h1:       2.75rem;  /* 44px */
  --fs-h2:       2.125rem; /* 34px */
  --fs-h3:       1.625rem; /* 26px */
  --fs-h4:       1.25rem;  /* 20px */
  --fs-lead:     1.25rem;  /* 20px lead paragraph */
  --fs-body:     1rem;     /* 16px */
  --fs-sm:       0.875rem; /* 14px */
  --fs-xs:       0.75rem;  /* 12px — labels/eyebrows */

  /* Line heights */
  --lh-tight:   1.1; /* @kind other */
  --lh-snug:    1.25; /* @kind other */
  --lh-normal:  1.5; /* @kind other */
  --lh-relaxed: 1.65; /* @kind other */

  /* Letter spacing */
  --ls-tight:  -0.02em; /* @kind other */
  --ls-normal: 0; /* @kind other */
  --ls-wide:   0.04em; /* @kind other */
  --ls-eyebrow: 0.12em; /* @kind other */
}

/* ============================================================
   Spacing, radii & layout — Meu Marketing Contábil
   8px base grid.
   ============================================================ */
:root {
  --space-0:  0;
  --space-1:  0.25rem; /* 4 */
  --space-2:  0.5rem;  /* 8 */
  --space-3:  0.75rem; /* 12 */
  --space-4:  1rem;    /* 16 */
  --space-5:  1.5rem;  /* 24 */
  --space-6:  2rem;    /* 32 */
  --space-7:  3rem;    /* 48 */
  --space-8:  4rem;    /* 64 */
  --space-9:  6rem;    /* 96 */
  --space-10: 8rem;    /* 128 */

  /* Radii — brand favors soft, confident rounding */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 760px;
  --gutter: var(--space-5);
}

/* ============================================================
   Elevation & motion — Meu Marketing Contábil
   Soft, cool-tinted shadows (indigo-based) for a premium B2B feel.
   ============================================================ */
:root {
  --shadow-xs: 0 1px 2px rgba(15, 22, 34, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 22, 34, 0.08), 0 1px 2px rgba(15, 22, 34, 0.04);
  --shadow-md: 0 4px 12px rgba(19, 30, 84, 0.08), 0 2px 4px rgba(19, 30, 84, 0.05);
  --shadow-lg: 0 12px 28px rgba(19, 30, 84, 0.12), 0 4px 8px rgba(19, 30, 84, 0.06);
  --shadow-xl: 0 24px 48px rgba(19, 30, 84, 0.16);
  --shadow-focus: 0 0 0 3px rgba(223, 0, 105, 0.25); /* magenta focus ring */

  /* Motion — quick, professional, no bounce */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}

/* ============================================================
   Meu Marketing Contábil — Design System
   Global entry point. Consumers link THIS file only.
   Keep this file as a list of @import lines (no rules here).
   ============================================================ */