/* ============================================================
   STUDIO CONNECTA — Design Foundations
   Colors + Typography tokens (base + semantic)
   Agência de Marketing e Performance · orientada por IA
   ============================================================ */

/* ---------- FONTS ---------- */
/* SC26 type system — todas via Google Fonts CDN (sem arquivos de fonte locais).
   Fonte da verdade visual: ../design_system-SC26-StudioConnecta.html
   Space Grotesk (display/titulos) · Inter (corpo/UI) · JetBrains Mono (dados/codigo).
   Surgena, Roboto e Ibrand foram REMOVIDAS deste DS — nao usar. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ============ COLOR — PRIMARY ============ */
  /* The brand trio. Green is the hero, used with parsimony:
     one accent element per section, never two competing. */
  --sc-verde:        #93D500;  /* Verde — primary brand accent (confirmed from brand PDF) */
  --sc-lilas:        #6B4495;  /* Lilás — purple (confirmed from brand PDF) */
  --sc-tutti:        #E8336E;  /* Tutti Frutti — pink (approximate — confirm vs brand book) */

  /* tonal variants for hover / pressed / tints */
  --sc-verde-bright: #A6E815;
  --sc-verde-deep:   #6FA200;
  --sc-lilas-bright: #8A5BB8;
  --sc-lilas-deep:   #4E2F70;
  --sc-tutti-bright: #FF4D86;
  --sc-tutti-deep:   #B81F52;

  /* ============ COLOR — SECONDARY ============ */
  /* Used sparingly, supporting roles. Approximate — confirm vs brand book. */
  --sc-azul:         #0081B9;  /* Azul */
  --sc-amarelo:      #F6E75E;  /* Amarelo */
  --sc-lilas-claro:  #E8DBE8;  /* Lilás claro */

  /* ============ COLOR — NEUTRALS (dark-first) ============ */
  /* The brand lives on deep near-black. Whitespace is part of the
     composition. Photography is B&W / darkened with overlay. */
  --sc-ink-900:      #0A0A0B;  /* page background — near black */
  --sc-ink-800:      #121214;  /* raised surface */
  --sc-ink-700:      #1A1A1E;  /* card / panel */
  --sc-ink-600:      #26262C;  /* hairline-on-dark, borders */
  --sc-ink-500:      #3A3A42;  /* disabled / muted strokes */

  --sc-fog-400:      #6E6E78;  /* tertiary text on dark */
  --sc-fog-300:      #9A9AA4;  /* secondary text on dark */
  --sc-fog-200:      #C8C8CE;  /* body text on dark */
  --sc-fog-100:      #EDEDEF;  /* near-white */
  --sc-white:        #FFFFFF;

  /* light-mode neutrals (for documents / light surfaces) */
  --sc-paper:        #FAFAF8;
  --sc-paper-2:      #F1F1ED;

  /* ============ SEMANTIC COLOR ============ */
  --bg:              var(--sc-ink-900);
  --surface:         var(--sc-ink-700);
  --surface-raised:  var(--sc-ink-800);
  --border:          var(--sc-ink-600);
  --border-strong:   var(--sc-ink-500);

  --fg1:             var(--sc-white);   /* titles */
  --fg2:             var(--sc-fog-200); /* body */
  --fg3:             var(--sc-fog-300); /* supporting */
  --fg4:             var(--sc-fog-400); /* muted / captions */

  --accent:          var(--sc-verde);
  --accent-fg:       #0A0A0B;           /* text on green */
  --link:            var(--sc-verde);

  /* ============ THE GRADIENT ============ */
  /* Always diagonal, always contained. Used only at moments of
     emphasis: verde → lilás → tutti frutti → verde. */
  --sc-gradient: linear-gradient(115deg,
      var(--sc-verde) 0%,
      var(--sc-lilas) 38%,
      var(--sc-tutti) 70%,
      var(--sc-verde) 100%);
  /* 2-color diagonal variations across the palette (sempre diagonal, ~115°).
     Canonical brand pairs first, then supporting combinations. */
  --sc-grad-verde-lilas:   linear-gradient(115deg, var(--sc-verde) 0%, var(--sc-lilas) 100%);
  --sc-grad-lilas-tutti:   linear-gradient(115deg, var(--sc-lilas) 0%, var(--sc-tutti) 100%);
  --sc-grad-tutti-verde:   linear-gradient(115deg, var(--sc-tutti) 0%, var(--sc-verde) 100%);
  --sc-grad-verde-azul:    linear-gradient(115deg, var(--sc-verde) 0%, var(--sc-azul) 100%);
  --sc-grad-azul-lilas:    linear-gradient(115deg, var(--sc-azul) 0%, var(--sc-lilas) 100%);
  --sc-grad-amarelo-verde: linear-gradient(115deg, var(--sc-amarelo) 0%, var(--sc-verde) 100%);
  --sc-grad-tutti-amarelo: linear-gradient(115deg, var(--sc-tutti) 0%, var(--sc-amarelo) 100%);
  --sc-grad-lilas-azul:    linear-gradient(115deg, var(--sc-lilas) 0%, var(--sc-azul) 100%);
  --sc-gradient-soft: linear-gradient(115deg,
      rgba(147,213,0,0.16) 0%,
      rgba(107,68,149,0.16) 50%,
      rgba(232,51,110,0.16) 100%); /* @kind color */
  /* hairline gradient for thin dividers / glints */
  --sc-glint: linear-gradient(90deg,
      transparent 0%, rgba(147,213,0,0.0) 0%,
      rgba(255,255,255,0.18) 50%, transparent 100%); /* @kind color */

  /* ============ TYPOGRAPHY — FAMILIES ============ */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --font-accent:  "Space Grotesk", system-ui, sans-serif;

  /* ============ TYPE SCALE ============ */
  /* Three levels only: título grande · subtítulo médio · corpo pequeno. */
  --fs-display:  clamp(3.5rem, 7vw, 6.5rem); /* @kind font */ /* hero título grande */
  --fs-h1:       clamp(2.75rem, 5vw, 4.5rem); /* @kind font */
  --fs-h2:       clamp(2rem, 3.4vw, 3rem); /* @kind font */ /* subtítulo médio */
  --fs-h3:       1.5rem; /* @kind font */
  --fs-body-lg:  1.25rem; /* @kind font */
  --fs-body:     1.0625rem; /* @kind font */ /* corpo pequeno (generous) */
  --fs-small:    0.9375rem; /* @kind font */
  --fs-caption:  0.8125rem; /* @kind font */

  --lh-tight:    1.02; /* @kind font */
  --lh-snug:     1.15; /* @kind font */
  --lh-body:     1.7; /* @kind font */    /* line-height espaçado */
  --lh-loose:    1.9; /* @kind font */

  --tracking-display: -0.02em; /* @kind font */
  --tracking-tight:   -0.01em; /* @kind font */
  --tracking-normal:  0; /* @kind font */
  --tracking-wide:    0.18em; /* @kind font */   /* small labels / eyebrows */

  /* ============ SPACING (low density by design) ============ */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 9rem;     /* section breathing room */
  --space-8: 13rem;

  /* ============ RADII ============ */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ============ BORDERS / DIVIDERS ============ */
  --hairline: 1px solid var(--border); /* @kind other */

  /* ============ SHADOWS / GLASS ============ */
  --shadow-soft: 0 20px 60px -20px rgba(0,0,0,0.6);
  --shadow-lift: 0 30px 90px -30px rgba(0,0,0,0.75);
  --glass-bg: rgba(255,255,255,0.04); /* @kind color */
  --glass-border: 1px solid rgba(255,255,255,0.08); /* @kind other */
  --glass-blur: saturate(140%) blur(14px); /* @kind other */

  /* ============ MOTION ============ */
  /* Slow, precise entrances. Everything glides. */
  --ease-glide: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast:   240ms; /* @kind other */
  --dur-base:   520ms; /* @kind other */
  --dur-slow:   900ms; /* @kind other */
}

/* ============================================================
   LIGHT THEME — opt-in via [data-theme="light"] on <html>.
   Dark remains the default (:root). Brand colors (verde, lilás,
   tutti, gradients) are identity and never change — only the
   neutral/semantic surface aliases, glass, and shadows flip.
   ============================================================ */
[data-theme="light"] {
  /* surfaces */
  --bg:              var(--sc-paper);   /* #FAFAF8 — warm paper */
  --surface:         #FFFFFF;
  --surface-raised:  var(--sc-paper-2); /* #F1F1ED */
  --border:          #E6E5DF;
  --border-strong:   #D2D1C9;

  /* text — near-black to warm grey */
  --fg1:             #0A0A0B;  /* titles */
  --fg2:             #33333A;  /* body */
  --fg3:             #5C5C64;  /* supporting */
  --fg4:             #8C8C94;  /* muted / captions */

  --accent:          var(--sc-verde);
  --accent-fg:       #0A0A0B;
  --link:            var(--sc-lilas-deep);

  /* glass flips from white-on-dark to dark-on-light */
  --glass-bg:        rgba(255,255,255,0.65);
  --glass-border:    1px solid rgba(0,0,0,0.08); /* @kind other */
  --glass-blur:      saturate(120%) blur(14px); /* @kind other */

  /* shadows: softer, cooler on light */
  --shadow-soft:     0 18px 50px -24px rgba(28,28,40,0.18);
  --shadow-lift:     0 30px 80px -32px rgba(28,28,40,0.22);
}

/* ============ SEMANTIC TYPE CLASSES ============ */
.sc-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg4);
}
.sc-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg1);
  text-wrap: balance;
}
.sc-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--fg1);
  text-wrap: balance;
}
.sc-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  text-wrap: balance;
}
.sc-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--fg1);
}
.sc-lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg2);
  text-wrap: pretty;
}
.sc-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg2);
  text-wrap: pretty;
}
.sc-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--fg3);
}

/* gradient text — for the rare emphasis word */
.sc-gradient-text {
  background: var(--sc-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}