/* =============================================================
   ELIANE KÄFER — PERÍCIA CONTÁBIL
   Colors & Type foundations
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');

:root {
  /* -----------------------------------------------------------
     BRAND — GOLD (dourado)
     Sampled directly from LOGO COLORIDO. The logo reads as a
     metallic gradient; these tokens capture highlight → core →
     shadow so we can recreate that gradient feel in UI.
     ----------------------------------------------------------- */
  --gold-50:  #FBF6EA;   /* wash / page tint */
  --gold-100: #F4E8C8;   /* hover backgrounds on neutrals */
  --gold-200: #E8C888;   /* logo highlight */
  --gold-300: #D8B878;
  --gold-400: #C8A868;   /* PRIMARY gold — logo core */
  --gold-500: #B89858;
  --gold-600: #A87838;   /* darker antique gold */
  --gold-700: #8B6020;   /* deep gold for text on light bg (AA) */
  --gold-800: #5A3E14;   /* espresso gold — rich accent */

  /* Primary brand gold alias */
  --gold: var(--gold-400);
  --gold-deep: var(--gold-700);

  /* -----------------------------------------------------------
     BRAND — BLUE (azul)
     Judicial / serious / trustworthy navy, paired with the gold.
     Not royal blue, not corporate teal — a deep ink navy that
     reads as "direito" without being generic.
     ----------------------------------------------------------- */
  --navy-50:  #F1F3F7;
  --navy-100: #DCE1EB;
  --navy-200: #B3BDD1;
  --navy-300: #7E8BAA;
  --navy-400: #4C5B80;
  --navy-500: #2D3B5E;
  --navy-600: #1E2A47;   /* PRIMARY navy */
  --navy-700: #162038;
  --navy-800: #0F1628;
  --navy-900: #080C18;

  --navy: var(--navy-600);
  --navy-ink: var(--navy-800);

  /* -----------------------------------------------------------
     NEUTRALS
     Warm-leaning greys so they don't fight the gold.
     ----------------------------------------------------------- */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FAF8F4;   /* page cream — very faint gold tint */
  --neutral-50:  #F5F2EB;
  --neutral-100: #ECE8DF;
  --neutral-200: #D9D4C7;
  --neutral-300: #B8B1A0;
  --neutral-400: #8F8877;
  --neutral-500: #6B6557;
  --neutral-600: #4E4A3F;
  --neutral-700: #34322B;
  --neutral-800: #201E1A;
  --neutral-900: #12110F;

  /* -----------------------------------------------------------
     SEMANTIC
     ----------------------------------------------------------- */
  --success: #2F7D4F;
  --warning: #B07A1A;
  --danger:  #9B2C2C;
  --info:    var(--navy-500);

  /* -----------------------------------------------------------
     SURFACES & TEXT (light mode — primary)
     ----------------------------------------------------------- */
  --bg:           var(--neutral-0);
  --bg-cream:     var(--neutral-25);
  --bg-raised:    var(--neutral-0);
  --bg-sunken:    var(--neutral-50);
  --bg-ink:       var(--navy-800);      /* dark sections */
  --bg-ink-deep:  var(--navy-900);

  --fg1:          var(--navy-800);      /* primary text */
  --fg2:          var(--neutral-700);   /* body text */
  --fg3:          var(--neutral-500);   /* muted / meta */
  --fg4:          var(--neutral-400);   /* captions / placeholder */
  --fg-on-ink:    var(--neutral-25);    /* text on navy */
  --fg-on-gold:   var(--navy-800);      /* text on gold button */

  --border:       var(--neutral-200);
  --border-soft:  var(--neutral-100);
  --border-gold:  var(--gold-400);

  /* -----------------------------------------------------------
     GRADIENTS — the logo's signature metallic sweep
     ----------------------------------------------------------- */
  --gradient-gold:
    linear-gradient(135deg,
      var(--gold-200) 0%,
      var(--gold-400) 35%,
      var(--gold-600) 75%,
      var(--gold-400) 100%);
  --gradient-gold-soft:
    linear-gradient(135deg, var(--gold-100), var(--gold-50));
  --gradient-ink:
    linear-gradient(180deg, var(--navy-700) 0%, var(--navy-900) 100%);
  --gradient-hairline-gold:
    linear-gradient(90deg,
      transparent 0%,
      var(--gold-400) 20%,
      var(--gold-400) 80%,
      transparent 100%);

  /* -----------------------------------------------------------
     TYPE — families
     Cormorant Garamond → high-contrast display serif echoing
       the thin strokes of the logo wordmark.
     Source Sans 3 → readable humanist sans for body, handles
       Portuguese accents cleanly. Legal-appropriate, understated.
     ----------------------------------------------------------- */
  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-sans:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'SF Mono', Menlo, Consolas, monospace;

  /* TYPE — scale
     Display uses a larger, more dramatic scale to lean on the
     Cormorant thin/italic. Body is steady 16–18. */
  --text-eyebrow: 0.75rem;     /* 12px — uppercase, tracked */
  --text-xs:   0.8125rem;      /* 13px */
  --text-sm:   0.9375rem;      /* 15px */
  --text-base: 1.0625rem;      /* 17px — body default, slightly larger */
  --text-lg:   1.1875rem;      /* 19px — lead paragraphs */
  --text-xl:   1.375rem;       /* 22px */
  --text-2xl:  1.75rem;        /* 28px */
  --text-3xl:  2.25rem;        /* 36px — h3 */
  --text-4xl:  3rem;           /* 48px — h2 */
  --text-5xl:  4rem;           /* 64px — h1 default */
  --text-6xl:  5.25rem;        /* 84px — hero display */

  /* Line heights */
  --lh-tight: 1.04;   /* display */
  --lh-snug:  1.22;   /* large headings */
  --lh-base:  1.55;   /* body */
  --lh-loose: 1.72;   /* long-form reading */

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-display: -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.18em;   /* uppercase eyebrow kicker */

  /* -----------------------------------------------------------
     SPACING (4px base, with a few custom steps for editorial feel)
     ----------------------------------------------------------- */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10: 128px;
  --sp-11: 160px;

  /* Section rhythm */
  --section-y: clamp(64px, 10vw, 128px);
  --container: 1200px;
  --container-narrow: 880px;

  /* -----------------------------------------------------------
     RADII
     Editorial / legal feel → restrained radii. No pill buttons.
     ----------------------------------------------------------- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;
  --r-5: 16px;
  --r-full: 999px;   /* only for chips/avatars */

  /* -----------------------------------------------------------
     SHADOWS
     Shadows are neutral-warm and SOFT. No heavy drop shadows —
     this isn't SaaS. Plus a signature gold-glow for hover.
     ----------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(32, 30, 26, 0.06);
  --shadow-sm: 0 2px 6px rgba(32, 30, 26, 0.06), 0 1px 2px rgba(32, 30, 26, 0.04);
  --shadow-md: 0 6px 18px rgba(32, 30, 26, 0.08), 0 2px 6px rgba(32, 30, 26, 0.04);
  --shadow-lg: 0 14px 40px rgba(22, 32, 56, 0.12), 0 4px 12px rgba(22, 32, 56, 0.06);
  --shadow-ink: 0 20px 60px rgba(8, 12, 24, 0.35);
  --shadow-gold-glow: 0 8px 24px rgba(200, 168, 104, 0.35);

  /* -----------------------------------------------------------
     BORDERS
     Hairline gold rules are signature — used as dividers under
     section headers, between columns in the footer, and as the
     line under the "Perícia Contábil" tagline in the logo.
     ----------------------------------------------------------- */
  --hairline-gold: 1px solid var(--gold-400);
  --hairline-ink:  1px solid var(--navy-600);
  --rule: 1px solid var(--border);

  /* -----------------------------------------------------------
     MOTION
     Restrained. Ease-out, short durations. No bounces.
     ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;

  /* -----------------------------------------------------------
     Z-INDEX
     ----------------------------------------------------------- */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-header:   300;
  --z-modal:    400;
  --z-wa-fab:   500;
  --z-toast:    600;
}

/* =============================================================
   SEMANTIC ELEMENT DEFAULTS
   Drop colors_and_type.css into a page and these render correctly.
   ============================================================= */

html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--fg1);
  background: var(--bg);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy-800);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: clamp(var(--text-5xl), 6vw, var(--text-6xl));
  line-height: var(--lh-tight);
  font-weight: 500;
}

h2 {
  font-size: clamp(var(--text-3xl), 4.5vw, var(--text-4xl));
  line-height: var(--lh-snug);
  font-weight: 500;
}

h3 {
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  font-weight: 600;
}

h4 {
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  font-weight: 600;
}

p {
  margin: 0 0 1em 0;
  color: var(--fg2);
  line-height: var(--lh-loose);
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold-700);
}

.display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

.meta {
  font-size: var(--text-sm);
  color: var(--fg3);
}

a {
  color: var(--navy-600);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

a:hover {
  color: var(--gold-700);
  border-bottom-color: var(--gold-400);
}

hr.hairline-gold {
  border: none;
  height: 1px;
  background: var(--gradient-hairline-gold);
  margin: var(--sp-5) 0;
}

code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}