/* ============================================================
   Dr. Bruno Maia — Design Tokens
   colors_and_type.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400&display=swap');

/* ── BASE COLOR TOKENS ───────────────────────────────────── */
:root {
  /* Teal scale — #0D323D fixo em 700 / 600 = cor primária UI */
  --blue-50:  #edf7f8;
  --blue-100: #cce9ee;
  --blue-200: #97d0da;
  --blue-300: #58b2c4;
  --blue-400: #2891a8;
  --blue-500: #177080;
  --blue-600: #0f4e5e;   /* ← Brand Primary UI */
  --blue-700: #0D323D;   /* ← Brand Dark (logo / backgrounds) */
  --blue-800: #08222a;
  --blue-900: #030e12;

  /* Neutral scale */
  --neutral-0:   #ffffff;
  --neutral-50:  #f8f6f2;   /* warm white */
  --neutral-100: #f0ece6;
  --neutral-200: #e2ddd5;
  --neutral-300: #c8c2b8;
  --neutral-400: #a69e93;
  --neutral-500: #8597ae;
  --neutral-600: #4a5b75;
  --neutral-700: #2e3d54;
  --neutral-800: #1a2236;
  --neutral-900: #0d1420;

  /* Cream / champagne scale — the brand's logo colour (#E8E8C1) */
  --cream-50:  #fbfbf4;
  --cream-100: #f5f4e4;
  --cream-200: #eeedd0;
  --cream-300: #E8E8C1;   /* ← Logo cream (confirmed) */
  --cream-400: #d9d8a3;
  --cream-500: #c4c281;

  /* Accent colors */
  --green-whatsapp: #1e7a49;       /* harmonised — deep green */
  --green-whatsapp-dark: #165c37;
  --gold-500: #b5882a;
  --gold-100: #f7edda;
  --red-500: #d93025;
  --red-100: #fce8e6;

  /* ── SEMANTIC COLOR TOKENS ─────────────────────────────── */
  --color-brand:         var(--blue-600);   /* #0f4e5e — primary UI */
  --color-brand-dark:    var(--blue-700);   /* #0D323D — logo backdrop */
  --color-brand-mid:     var(--blue-500);
  --color-brand-light:   var(--blue-100);
  --color-brand-pale:    var(--blue-50);
  --color-brand-cream:   var(--cream-300); /* logo on dark teal */

  --color-bg:            var(--neutral-50);
  --color-surface:       var(--neutral-0);
  --color-surface-alt:   var(--blue-50);
  --color-border:        var(--neutral-200);
  --color-border-focus:  var(--blue-500);

  --color-text:          var(--neutral-800);
  --color-text-secondary:var(--neutral-600);
  --color-text-placeholder: var(--neutral-500);
  --color-text-inverse:  var(--neutral-0);
  --color-text-brand:    var(--blue-600);
  --color-text-link:     var(--blue-500);

  --color-cta-whatsapp:  var(--green-whatsapp);
  --color-cta-primary:   var(--blue-600);
  --color-badge-cred:    var(--gold-500);
  --color-badge-cred-bg: var(--gold-100);

  --color-success:       #1e6e42;
  --color-success-bg:    #e8f4ee;
  --color-error:         #b83030;
  --color-error-bg:      #f5e8e8;

  /* ── TYPOGRAPHY BASE ───────────────────────────────────── */
  --font-sans:      'Ubuntu', system-ui, sans-serif;
  /* Single typeface brand — Ubuntu only. No script font. */

  --fw-light:   300;  /* @kind font */
  --fw-regular: 400;  /* @kind font */
  --fw-medium:  500;  /* @kind font */
  --fw-bold:    700;  /* @kind font */

  /* Type scale (fluid-ish, desktop base) */
  --text-xs:    0.75rem;    /*  12px */
  --text-sm:    0.875rem;   /*  14px */
  --text-base:  1rem;       /*  16px */
  --text-lg:    1.125rem;   /*  18px */
  --text-xl:    1.25rem;    /*  20px */
  --text-2xl:   1.5rem;     /*  24px */
  --text-3xl:   1.875rem;   /*  30px */
  --text-4xl:   2.25rem;    /*  36px */
  --text-5xl:   3rem;       /*  48px */
  --text-6xl:   3.75rem;    /*  60px */

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-loose:  1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-wider: 0.08em;

  /* ── SPACING TOKENS ────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ── RADIUS TOKENS ─────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── SHADOW TOKENS ─────────────────────────────────────── */
  --shadow-1: 0 2px 8px rgba(13,50,61,0.08);
  --shadow-2: 0 6px 20px rgba(13,50,61,0.14);
  --shadow-3: 0 16px 48px rgba(8,34,42,0.18);
  --shadow-inset: inset 0 1px 3px rgba(13,50,61,0.10);

  /* ── TRANSITIONS ───────────────────────────────────────── */
  --ease-brand: cubic-bezier(0.25, 0.46, 0.45, 0.94);  /* @kind other */
  --duration-fast:   150ms;  /* @kind other */
  --duration-base:   200ms;  /* @kind other */
  --duration-slow:   350ms;  /* @kind other */

  /* ── LAYOUT ────────────────────────────────────────────── */
  --max-width:       1140px;
  --section-py:      var(--space-20);
  --card-padding:    var(--space-6);
  --nav-height:      72px;
}

/* ── SEMANTIC ELEMENT STYLES ─────────────────────────────── */

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl);  }
h6 { font-size: var(--text-lg);  }

p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

.lead {
  font-size: var(--text-xl);
  font-weight: var(--fw-light);
  line-height: var(--leading-snug);
  color: var(--color-text-secondary);
}

.caption {
  font-size: var(--text-sm);
  color: var(--color-text-placeholder);
  letter-spacing: var(--tracking-wide);
}

.label {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-brand);
}

.signature {
  font-family: var(--font-sans);
  font-weight: 300;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-snug);
  color: var(--color-brand);
}

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-brand);
}
a:hover { color: var(--color-brand-dark); text-decoration: underline; }

/* ── BUTTON SYSTEM ───────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: 1;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-brand),
    box-shadow var(--duration-base) var(--ease-brand),
    transform var(--duration-fast) var(--ease-brand);
  text-decoration: none;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--color-cta-primary);
  color: var(--color-text-inverse);
}
.btn-primary:hover {
  background: var(--blue-700);
  box-shadow: var(--shadow-2);
  text-decoration: none;
  color: var(--color-text-inverse);
}

.btn-outline {
  background: transparent;
  color: var(--color-brand);
  border-color: var(--color-brand);
}
.btn-outline:hover {
  background: var(--color-brand-light);
  text-decoration: none;
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
}
.btn-ghost:hover {
  background: var(--neutral-100);
  color: var(--color-text);
  text-decoration: none;
}

.btn-whatsapp {
  background: var(--color-cta-whatsapp);
  color: #fff;
  font-weight: var(--fw-bold);
}
.btn-whatsapp:hover {
  background: var(--green-whatsapp-dark);
  box-shadow: var(--shadow-2);
  text-decoration: none;
  color: #fff;
}

.btn-lg {
  padding: 16px 32px;
  font-size: var(--text-lg);
  border-radius: var(--radius-lg);
}

.btn-sm {
  padding: 8px 16px;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}