/* ─────────────────────────────────────────────────────────────────
   Medzee — Colors & Type
   "Conexão que organiza. Cuidado que transforma."
   Warm, contemplative, premium. Never sterile. Never pure white.
   ───────────────────────────────────────────────────────────────── */

/* ── Fonts ──────────────────────────────────────────────────────── */
/* Primary face is Red Hat Display (Google Fonts). The uploaded
   Hybi11 Amigo family is kept available in /fonts/ for use as a
   display / brand alternate if a campaign calls for it. */
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,700&display=swap');

@font-face {
  font-family: 'Hybi11 Amigo';
  src: url('./fonts/Hybi11AmigoRegular.woff2') format('woff2'),
       url('./fonts/Hybi11AmigoRegular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hybi11 Amigo';
  src: url('./fonts/Hybi11AmigoLight.woff2') format('woff2'),
       url('./fonts/Hybi11AmigoLight.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hybi11 Amigo';
  src: url('./fonts/Hybi11AmigoSemiBold.woff2') format('woff2'),
       url('./fonts/Hybi11AmigoSemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hybi11 Amigo';
  src: url('./fonts/Hybi11AmigoBold.woff2') format('woff2'),
       url('./fonts/Hybi11AmigoBold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hybi11 Amigo';
  src: url('./fonts/Hybi11AmigoExtraBold.woff2') format('woff2'),
       url('./fonts/Hybi11AmigoExtraBold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hybi11 Amigo';
  src: url('./fonts/Hybi11AmigoItalic.woff2') format('woff2'),
       url('./fonts/Hybi11AmigoItalic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* ── Color: brand ─────────────────────────────────────────────── */
  --mz-orange:        #FF7A1A;   /* rgb(255,122,26) — primary */
  --mz-orange-600:    #E86A0E;   /* hover / pressed */
  --mz-orange-400:    #FF9448;   /* accent / decorative */
  --mz-orange-200:    #FFC69D;   /* peach surface */
  --mz-orange-100:    #FFEBDD;   /* lightest peach */
  --mz-orange-050:    #FFF7E8;   /* cream / lightest brand */

  --mz-wine:          #630A36;   /* rgb(99,10,54) — dark accent */
  --mz-wine-700:      #4B0727;

  --mz-cream:         #FFF7E8;   /* warm surface */
  --mz-paper:         #FEFBF9;   /* off-white surface 1 */
  --mz-paper-2:       #FFFEFC;   /* off-white surface 2 (cards) */

  /* ── Color: ink (text) ────────────────────────────────────────── */
  --mz-ink-900:       #090909;   /* h1 ink */
  --mz-ink-800:       #1A1614;   /* primary text */
  --mz-ink-700:       #343434;   /* body */
  --mz-ink-600:       #5D5D5D;   /* meta / muted body */
  --mz-ink-500:       #7C736A;   /* warm gray */
  --mz-ink-400:       #999488;   /* warmer gray */
  --mz-ink-300:       #999999;   /* labels on bright bg */
  --mz-ink-200:       #DADADA;   /* hairline ink (rare) */

  /* ── Color: semantic ──────────────────────────────────────────── */
  --mz-positive:      #3B7A57;   /* finance / success */
  --mz-positive-bg:   #ECF5EF;
  --mz-warning:       #D28800;   /* amber */
  --mz-warning-bg:    #FFF1D2;
  --mz-danger:        #FF0004;   /* notification dot */
  --mz-danger-bg:     #FFE5E6;
  --mz-info:          #14376A;   /* deep navy — rare */

  /* ── Color: glow / decorative ─────────────────────────────────── */
  --mz-glow-yellow:   rgba(232, 234, 157, 0.26); /* yellow inner glow */
  --mz-glow-orange:   rgba(255, 122, 26, 0.26);  /* corner halo */

  /* ── Surfaces & overlays ──────────────────────────────────────── */
  --mz-bg-app:        linear-gradient(180deg, #FEFBF9 0%, #FFF7E8 100%);
  --mz-bg-card-warm:  linear-gradient(180deg, #FFFFFF 0%, #FFEBDD 100%);

  --mz-glass-05:      rgba(255, 255, 255, 0.05);
  --mz-glass-10:      rgba(255, 255, 255, 0.10);
  --mz-glass-30:      rgba(255, 255, 255, 0.30);
  --mz-glass-70:      rgba(255, 255, 255, 0.70);

  --mz-tint-onsurface: rgba(255, 122, 26, 0.06); /* hover tint */

  /* ── Hairlines & borders ──────────────────────────────────────── */
  --mz-line:          rgba(0, 0, 0, 0.05);   /* hairline (default) */
  --mz-line-strong:   rgba(0, 0, 0, 0.10);   /* card outline */
  --mz-line-orange:   rgba(255, 122, 26, 0.30);

  /* ── Radii ─────────────────────────────────────────────────────── */
  --mz-r-xs:    4px;
  --mz-r-sm:    10px;
  --mz-r-md:    16px;     /* tile / card medium */
  --mz-r-lg:    23px;     /* glass strip */
  --mz-r-xl:    30px;     /* large card */
  --mz-r-2xl:   32px;     /* mobile sheet */
  --mz-r-pill:  9999px;

  /* ── Shadows / elevation ──────────────────────────────────────── */
  /* No hard shadows. Always warm, always soft, always low-alpha. */
  --mz-shadow-hairline: 0 1px 0 0 rgba(0,0,0,0.04);
  --mz-shadow-card:     0 4px 50px 5px rgba(255,122,26,0.05);
  --mz-shadow-glow:     0 4px 50px 5px rgba(255,122,26,0.30);
  --mz-shadow-tile:     0 1px 2px 0 rgba(0,0,0,0.06);
  --mz-shadow-inner-white: inset 1px 2px 2px 0 rgba(255,255,255,0.5);

  /* ── Spacing ──────────────────────────────────────────────────── */
  /* 4-step warm rhythm. Generous gaps. */
  --mz-s-1:  4px;
  --mz-s-2:  8px;
  --mz-s-3:  12px;
  --mz-s-4:  16px;
  --mz-s-5:  20px;
  --mz-s-6:  24px;
  --mz-s-7:  28px;
  --mz-s-8:  32px;
  --mz-s-10: 40px;
  --mz-s-12: 48px;
  --mz-s-16: 64px;
  --mz-s-20: 80px;

  /* ── Motion ───────────────────────────────────────────────────── */
  /* Slow, contemplative. Like a deep breath. */
  --mz-ease-soft:   cubic-bezier(0.22, 0.61, 0.36, 1.00); /* @kind other */
  --mz-ease-out:    cubic-bezier(0.16, 1, 0.30, 1); /* @kind other */
  --mz-dur-fast:    220ms; /* @kind other */
  --mz-dur-base:    360ms; /* @kind other */
  --mz-dur-slow:    560ms; /* @kind other */

  /* ── Typography base ──────────────────────────────────────────── */
  --mz-font-sans:    "Red Hat Display", ui-sans-serif, system-ui,
                     -apple-system, "Segoe UI", Roboto, sans-serif;
  --mz-font-display: "Red Hat Display", ui-sans-serif, system-ui, sans-serif;
  --mz-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --mz-font-brand:   "Hybi11 Amigo", "Red Hat Display", sans-serif;

  /* Letter-spacing recurring values (from Figma) */
  --mz-tracking-tight:  -0.005em;
  --mz-tracking-normal:  0.020em;
  --mz-tracking-loose:   0.030em;

  /* ── Semantic type scale ──────────────────────────────────────── */
  --mz-fs-display:   58px;   /* hero numerals (R$ 897,90 etc) */
  --mz-fs-h1:        45px;   /* page hero — extra bold */
  --mz-fs-h2:        36px;   /* mobile hero */
  --mz-fs-h3:        30px;   /* page title */
  --mz-fs-h4:        20px;   /* card title */
  --mz-fs-h5:        18px;   /* row title */
  --mz-fs-body:      16px;
  --mz-fs-meta:      14px;
  --mz-fs-small:     12px;
  --mz-fs-tiny:      10px;

  --mz-lh-tight:     1.0; /* @kind font */
  --mz-lh-snug:      1.18; /* @kind font */
  --mz-lh-normal:    1.35; /* @kind font */
  --mz-lh-loose:     1.6; /* @kind font */
}

/* ── Semantic typography classes ───────────────────────────────── */

html, body {
  font-family: var(--mz-font-sans);
  color: var(--mz-ink-800);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mz-display {
  font-family: var(--mz-font-display);
  font-weight: 700;
  font-size: var(--mz-fs-display);
  line-height: var(--mz-lh-tight);
  letter-spacing: var(--mz-tracking-normal);
  color: var(--mz-ink-900);
}

.mz-h1 {
  font-family: var(--mz-font-display);
  font-weight: 800;
  font-size: var(--mz-fs-h1);
  line-height: var(--mz-lh-tight);
  letter-spacing: var(--mz-tracking-tight);
  color: var(--mz-ink-900);
}

.mz-h2 {
  font-family: var(--mz-font-display);
  font-weight: 700;
  font-size: var(--mz-fs-h2);
  line-height: 1.22;
  letter-spacing: var(--mz-tracking-tight);
  color: var(--mz-ink-900);
}

.mz-h3 {
  font-family: var(--mz-font-display);
  font-weight: 700;
  font-size: var(--mz-fs-h3);
  line-height: 1.22;
  letter-spacing: var(--mz-tracking-normal);
  color: var(--mz-ink-900);
}

.mz-h4 {
  font-family: var(--mz-font-display);
  font-weight: 700;
  font-size: var(--mz-fs-h4);
  line-height: 1.30;
  letter-spacing: var(--mz-tracking-normal);
  color: var(--mz-ink-900);
}

.mz-h5 {
  font-family: var(--mz-font-display);
  font-weight: 700;
  font-size: var(--mz-fs-h5);
  line-height: 1.22;
  letter-spacing: var(--mz-tracking-normal);
  color: var(--mz-ink-800);
}

.mz-body {
  font-family: var(--mz-font-sans);
  font-weight: 500;
  font-size: var(--mz-fs-body);
  line-height: var(--mz-lh-normal);
  letter-spacing: var(--mz-tracking-normal);
  color: var(--mz-ink-700);
}

.mz-meta {
  font-family: var(--mz-font-sans);
  font-weight: 500;
  font-size: var(--mz-fs-meta);
  line-height: var(--mz-lh-snug);
  letter-spacing: var(--mz-tracking-normal);
  color: var(--mz-ink-600);
}

.mz-small {
  font-family: var(--mz-font-sans);
  font-weight: 500;
  font-size: var(--mz-fs-small);
  line-height: 1.10;
  letter-spacing: var(--mz-tracking-normal);
  color: var(--mz-ink-600);
}

.mz-label {
  font-family: var(--mz-font-sans);
  font-weight: 700;
  font-size: var(--mz-fs-small);
  line-height: 1.10;
  letter-spacing: var(--mz-tracking-normal);
  color: var(--mz-orange);
  text-transform: none;
}

.mz-eyebrow {
  font-family: var(--mz-font-sans);
  font-weight: 500;
  font-size: var(--mz-fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mz-ink-500);
}