/* =================================================================
   FMN — Fotografia é o Meu Negócio
   Tokens: colors + typography
   ================================================================= */

/* ---- Fonte unica: Montserrat (padrao FeM, via Google Fonts) ---- */
:root {
  /* ============ BRAND PALETTE ============ */
  --fmn-gold:        #eaaa41;   /* Dourado — primary */
  --fmn-gold-deep:   #c88a2e;   /* Âmbar escuro — hover / pressed */
  --fmn-gold-soft:   #f2c878;   /* tinted swatch in the icon */
  --fmn-orange:      #e8600a;   /* Laranja acento — urgência */
  --fmn-cream:       #f5f0e8;   /* Creme — light bg */
  --fmn-white:       #ffffff;
  --fmn-charcoal:    #3f3f3f;   /* Carvão — body text on light */
  --fmn-black:       #1a1a1a;   /* Preto — dark bg */
  --fmn-navy:        #1a1f2e;   /* Navy escuro — dark editorial */
  --fmn-tech-green:  #00ff41;   /* tema "tecnologia/IA" */

  /* neutrals */
  --fmn-ink-0: #0d0d0d;
  --fmn-ink-1: #1a1a1a;
  --fmn-ink-2: #2a2a2a;
  --fmn-ink-3: #3f3f3f;
  --fmn-ink-4: #6b6b6b;
  --fmn-ink-5: #9a9a9a;
  --fmn-ink-6: #cfcfcf;
  --fmn-ink-7: #e5e1d8;
  --fmn-ink-8: #f5f0e8;
  --fmn-ink-9: #ffffff;

  /* ============ SEMANTIC ============ */
  --bg:              var(--fmn-white);
  --bg-elev:         var(--fmn-cream);
  --bg-inverse:      var(--fmn-black);
  --bg-editorial:    var(--fmn-navy);

  --fg:              var(--fmn-charcoal);
  --fg-strong:       var(--fmn-black);
  --fg-muted:        var(--fmn-ink-4);
  --fg-inverse:      var(--fmn-white);

  --accent:          var(--fmn-gold);
  --accent-deep:     var(--fmn-gold-deep);
  --accent-urgency:  var(--fmn-orange);

  --border:          rgba(26, 26, 26, 0.10);
  --border-strong:   rgba(26, 26, 26, 0.25);
  --border-on-dark:  rgba(255, 255, 255, 0.14);

  --focus-ring:      rgba(234, 170, 65, 0.55);

  /* ============ TYPE FAMILIES ============ */
  --font-display:    "Montserrat", sans-serif;
  --font-body:       "Montserrat", sans-serif;
  --font-mono:       "Courier Prime", ui-monospace, "SF Mono", Menlo, monospace;

  /* ============ TYPE SCALE ============ */
  --fs-display: 96px;  /* hero number / pull quote */
  --fs-h1:      64px;
  --fs-h2:      40px;
  --fs-h3:      28px;
  --fs-h4:      20px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-caption: 13px;
  --fs-overline: 12px;

  --lh-tight:   0.95;
  --lh-snug:    1.08;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-overline:0.18em;

  /* ============ SPACING (8pt-ish grid) ============ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ============ RADII ============ */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ============ SHADOWS / ELEVATION ============ */
  --shadow-card:    0 1px 2px rgba(26,26,26,.04), 0 8px 24px rgba(26,26,26,.06);
  --shadow-lifted:  0 2px 4px rgba(26,26,26,.06), 0 18px 40px rgba(26,26,26,.12);
  --shadow-gold:    0 10px 30px rgba(234,170,65,.35);
  --shadow-on-dark: 0 12px 40px rgba(0,0,0,.45);

  /* ============ MOTION ============ */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.5,.05,.2,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ============ BASE ELEMENT STYLES ============ */
html { color: var(--fg); background: var(--bg); }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  color: var(--fg-strong);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0;
}

.display { font-size: var(--fs-display); font-weight: 900; }
h1, .h1 { font-size: var(--fs-h1); font-weight: 900; }
h2, .h2 { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-snug); }
h3, .h3 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); }
h4, .h4 { font-size: var(--fs-h4); font-weight: 500; letter-spacing: 0; }

p, .body { font-size: var(--fs-body); line-height: var(--lh-relaxed); text-wrap: pretty; }
.small   { font-size: var(--fs-small); }
.caption { font-family: var(--font-body); font-weight: 300; font-size: var(--fs-caption); color: var(--fg-muted); }
.overline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-overline);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--accent);
}

/* gold highlight inside long copy */
.hl, mark.gold { background: transparent; color: var(--accent); font-weight: inherit; }

/* dark surface helper */
.on-dark, .surface-dark {
  background: var(--fmn-black);
  color: var(--fg-inverse);
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4,
.surface-dark h1, .surface-dark h2, .surface-dark h3, .surface-dark h4 {
  color: var(--fg-inverse);
}