/* =========================================================================
   EdConnect — Design Tokens
   Brand: EdConnect Tecnologia Ltda · "Tecnologias para Educação"
   Site:  edconnect.com.br (WordPress · Engitech theme · Elementor)
   Logo:  green→blue gradient mark with bar-chart + circuit motif
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     COLORS — Brand
     The mark transitions left→right from a deep emerald green into a
     vivid sky blue with a teal blend at the seam. The two ends of that
     gradient are the brand's primary and secondary; the teal blend
     functions as the "connect" accent.
     --------------------------------------------------------------------- */

  /* Green — "Educação" side */
  --green-50:  #E8F6EC;
  --green-100: #C8EAD2;
  --green-200: #91D3A6;
  --green-300: #5BBC7B;
  --green-400: #2EA855;
  --green-500: #0A8B3D;   /* primary green */
  --green-600: #0B8B3F;
  --green-700: #066E2C;   /* deep green from logo */
  --green-800: #054F20;
  --green-900: #033516;

  /* Blue — "Tecnologia" side */
  --blue-50:   #E6F5FC;
  --blue-100:  #BFE5F6;
  --blue-200:  #88D0EE;
  --blue-300:  #4BB6E2;
  --blue-400:  #1FA1D7;
  --blue-500:  #0480B8;   /* primary blue from logo */
  --blue-600:  #0479AD;
  --blue-700:  #035A85;
  --blue-800:  #023F5E;
  --blue-900:  #012738;

  /* Teal — gradient meeting point */
  --teal-300:  #4DCFC9;
  --teal-500:  #008C87;   /* blend color in logo */
  --teal-700:  #00766F;

  /* Signature gradient (logo direction, left→right) */
  --grad-brand:        linear-gradient(90deg, var(--green-500) 0%, var(--teal-500) 50%, var(--blue-500) 100%);
  --grad-brand-soft:   linear-gradient(90deg, var(--green-50) 0%, var(--blue-50) 100%);
  --grad-brand-deep:   linear-gradient(135deg, var(--green-700) 0%, var(--blue-700) 100%);
  --grad-hero:         linear-gradient(135deg, #052A3D 0%, #022038 60%, #021A2E 100%);

  /* ---------------------------------------------------------------------
     COLORS — Neutrals (warm-cool slate)
     --------------------------------------------------------------------- */
  --ink-900: #0B1220;       /* near-black for hero */
  --ink-800: #1B1D21;       /* primary text — from theme */
  --ink-700: #2A2E36;
  --ink-600: #4A4F58;
  --ink-500: #6D6D6D;       /* body text — from theme */
  --ink-400: #9397A7;
  --ink-300: #B5B5B5;
  --ink-200: #DCDDE1;
  --ink-100: #E7E7E7;
  --ink-50:  #F6F8FB;
  --paper:   #FFFFFF;

  /* ---------------------------------------------------------------------
     COLORS — Semantic
     --------------------------------------------------------------------- */
  --success: var(--green-500);
  --info:    var(--blue-500);
  --warning: #F2B035;
  --danger:  #E5484D;

  /* Semantic aliases for FG / BG / borders */
  --fg-1: var(--ink-800);
  --fg-2: var(--ink-500);
  --fg-3: var(--ink-400);
  --fg-on-brand: #FFFFFF;
  --fg-link: var(--blue-500);
  --fg-link-hover: var(--blue-700);

  --bg-1: var(--paper);
  --bg-2: var(--ink-50);
  --bg-inverse: var(--ink-900);

  --border-1: var(--ink-100);
  --border-2: var(--ink-200);
  --border-strong: var(--ink-300);
  --focus-ring: color-mix(in oklab, var(--blue-500) 50%, transparent);

  /* WhatsApp accent (EducaConnect uses it as a service channel) */
  --whatsapp: #25D366;

  /* ---------------------------------------------------------------------
     TYPOGRAPHY
     Display + UI:  Montserrat (600/700/800)
     Body:          Nunito Sans (400/600/700)
     Mono (code):   "JetBrains Mono", ui-monospace
     Both Google Fonts — load via <link> in HTML.
     --------------------------------------------------------------------- */
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Nunito Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

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

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.6;
  --lh-loose: 1.8;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:  0.04em;
  --tracking-eyebrow: 0.18em;   /* used on uppercase eyebrows */

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* ---------------------------------------------------------------------
     SPACING (4 / 8 grid)
     --------------------------------------------------------------------- */
  --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:  2.5rem;    /* 40 */
  --space-8:  3rem;      /* 48 */
  --space-10: 4rem;      /* 64 */
  --space-12: 5rem;      /* 80 */
  --space-16: 7.5rem;    /* 120 — section spacing */

  /* ---------------------------------------------------------------------
     RADII — soft, friendly, never sharp; cards land at 12–16
     --------------------------------------------------------------------- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------
     SHADOWS — low and clean; lifted on hover
     --------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(11, 18, 32, 0.04);
  --shadow-sm: 0 2px 6px rgba(11, 18, 32, 0.06);
  --shadow-md: 0 10px 24px -8px rgba(11, 18, 32, 0.12);
  --shadow-lg: 0 24px 48px -16px rgba(11, 18, 32, 0.18);
  --shadow-brand: 0 16px 40px -16px color-mix(in oklab, var(--blue-500) 70%, transparent);

  /* ---------------------------------------------------------------------
     MOTION
     --------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* Layout */
  --container: 1200px;
  --container-tight: 960px;
}

/* =========================================================================
   SEMANTIC TYPOGRAPHY HELPERS
   ========================================================================= */

html { font-size: 16px; }

body {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg-1);
  font-size: var(--fz-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fz-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--blue-500);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: clamp(2.25rem, 4.5vw, var(--fz-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-5);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(1.75rem, 3vw, var(--fz-4xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fz-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fz-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

h5, .h5 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--fz-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

p, .body { font-size: var(--fz-base); line-height: var(--lh-base); color: var(--fg-2); }
.lead    { font-size: var(--fz-md);   line-height: var(--lh-base); color: var(--fg-2); }
.small   { font-size: var(--fz-sm);   line-height: var(--lh-base); color: var(--fg-2); }
.caption { font-size: var(--fz-xs);   line-height: var(--lh-base); color: var(--fg-3); }

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

a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--fg-link-hover); }

::selection { background: var(--blue-100); color: var(--ink-900); }

/* Brand gradient text helper */
.gradient-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}