/* ================================================================
   Climoo Design System — colors_and_type.css
   All foundational design tokens for colors + typography.
   Import this once (or copy vars) when recreating Climoo surfaces.
   ================================================================ */

/* ---------- Fonts ---------- */
/* Self-hosted variable fonts. Paths are relative to this CSS file,
   which lives at the project root. Consumers that import this CSS
   from a nested folder (e.g. /ui_kits/website/) resolve correctly
   because url() is resolved against the stylesheet's location. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ================================================================
     COLOR — RAW PALETTE (keep these stable)
     ---------------------------------------------------------------- */

  /* Brand deep purple — core identity color. Appears on nav, footer,
     hero silhouette, dark CTAs, feature card backgrounds. */
  --climoo-deep-50:  #f2eefa;
  --climoo-deep-100: #d4c9ec;
  --climoo-deep-200: #a790d4;
  --climoo-deep-300: #7f5dbd;
  --climoo-deep-400: #5c37a2;
  --climoo-deep-500: #371776; /* stroke/hover of dark bg */
  --climoo-deep-600: #321570; /* between 500 and 700 */
  --climoo-deep-700: #3d1b7d;
  --climoo-deep-800: #210856; /* THE Climoo purple. primary dark bg. */
  --climoo-deep-900: #180640;

  /* Brand vivid purple — primary CTA, accents, highlights, chart fills. */
  --climoo-violet-50:  #f3ecfd;
  --climoo-violet-100: #e3d3fb;
  --climoo-violet-200: #c6a6f5;
  --climoo-violet-300: #a97aef;
  --climoo-violet-400: #9258e1;
  --climoo-violet-500: #9354e0; /* primary action */
  --climoo-violet-600: #7f5ecb; /* muted accent text */
  --climoo-violet-700: #6b3fc1;

  /* Brand cyan — secondary accent, social icons, "Plano de Descarbonização" card,
     gradient stop, chart accent. */
  --climoo-cyan-50:  #e5faff;
  --climoo-cyan-100: #b4f0f6;
  --climoo-cyan-200: #9aeaf0;
  --climoo-cyan-300: #7fe3eb;
  --climoo-cyan-400: #5ce1e6; /* primary cyan */
  --climoo-cyan-500: #62d0e5;
  --climoo-cyan-600: #64cbe5;
  --climoo-cyan-700: #3cc3df;
  --climoo-cyan-800: #2ea5c0;

  /* Brand sky/periwinkle — softer supporting color (Metas SBTi card,
     "Simplifique" CTA gradient start). */
  --climoo-sky-300: #8979ff;
  --climoo-sky-400: #9fccf2;

  /* Brand coral — rare but present (Cadeia de Valor card, some highlights). */
  --climoo-coral-400: #ff928a;
  --climoo-coral-500: #ff64b4;

  /* Neutral scale — backgrounds, surfaces, text, borders. */
  --climoo-ink-950:  #010103; /* primary body text on light */
  --climoo-ink-900:  #0c0c0d; /* near-black for shadows */
  --climoo-ink-800:  #1e1d26;
  --climoo-ink-700:  #1f1f1f;
  --climoo-ink-600:  #4b5563;
  --climoo-ink-500:  #7d7d7d; /* body text secondary */
  --climoo-ink-400:  #9ca3af;
  --climoo-ink-300:  #bab9af;
  --climoo-ink-200:  #d9d9d9;
  --climoo-ink-150:  #e2e8f0;
  --climoo-ink-100:  #eeeff1; /* neutral card bg */
  --climoo-ink-75:   #e4ebf0; /* PAGE BG — core pale cool-grey */
  --climoo-ink-50:   #f5f7f9;
  --climoo-white:    #ffffff;

  /* Semantic status (used sparingly in dashboards). */
  --climoo-success-700: #15803d;
  --climoo-success-50:  #dcfce7;

  /* ================================================================
     COLOR — SEMANTIC TOKENS (use these in components)
     ---------------------------------------------------------------- */
  --fg-1: var(--climoo-ink-950);          /* primary on light */
  --fg-2: var(--climoo-ink-500);          /* secondary on light */
  --fg-3: var(--climoo-ink-400);
  --fg-on-dark: var(--climoo-white);
  --fg-on-dark-muted: rgba(255, 255, 255, 0.72);
  --fg-brand: var(--climoo-violet-500);   /* violet text on light */
  --fg-brand-dark: var(--climoo-deep-800);

  --bg-page:    var(--climoo-ink-75);     /* page background */
  --bg-surface: var(--climoo-white);      /* cards, inputs */
  --bg-surface-muted: var(--climoo-ink-100); /* quiet card */
  --bg-dark:    var(--climoo-deep-800);   /* nav, footer, hero circle */
  --bg-dark-2:  var(--climoo-deep-700);

  --border-soft:   rgba(125, 125, 125, 0.25);
  --border-brand:  var(--climoo-deep-800);
  --border-violet: rgba(147, 84, 224, 0.25);

  --action-primary:      var(--climoo-violet-500);
  --action-primary-hover: var(--climoo-violet-700);
  --action-primary-fg:    var(--climoo-white);

  --action-secondary:      var(--climoo-deep-800);
  --action-secondary-hover: var(--climoo-deep-900);
  --action-secondary-fg:    var(--climoo-white);

  --action-ghost-fg: var(--climoo-deep-800);
  --action-ghost-border: var(--climoo-deep-800);

  /* Signature gradient — CTA ribbon, hero accents.
     Cyan → violet → deep purple. */
  --gradient-brand: linear-gradient(
    90deg,
    var(--climoo-cyan-600) 0%,
    var(--climoo-violet-400) 49%,
    var(--climoo-deep-700) 100%
  );

  /* Gradient used on solution cards (radial violet on neutral). */
  --gradient-card-violet: radial-gradient(
    120% 80% at 100% 0%,
    var(--climoo-violet-500) 0%,
    var(--climoo-deep-800) 75%
  );

  /* ================================================================
     TYPOGRAPHY
     ---------------------------------------------------------------- */
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --font-body:    "Outfit", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  /* Raw type scale */
  --text-xxs:  10px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-md:   16px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  40px;
  --text-4xl:  56px;
  --text-5xl:  64px;
  --text-6xl:  75px;

  /* line-height is ~100% in the Figma source across the site.
     Allow a small breathing buffer for real paragraphs. */
  --lh-tight:  1.0;
  --lh-snug:   1.15;
  --lh-normal: 1.4;
  --lh-loose:  1.6;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;

  /* ================================================================
     SPACING / RADIUS / SHADOW / Z
     ---------------------------------------------------------------- */
  --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;

  /* Radii — Climoo uses very rounded (pill) CTAs + softly rounded cards. */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   15px;  /* widgets / small cards */
  --radius-lg:   20px;  /* feature cards, CTA ribbon */
  --radius-xl:   32px;
  --radius-pill: 90px;  /* buttons / tags */
  --radius-full: 9999px;

  /* ----------------------------------------------------------------
     Shadows — unified system. Always soft, long-fall, cool-black
     (#0C0C0D). Use the --elevation-* tokens in components so the scale
     stays consistent; the aliases below keep older references working.
     ---------------------------------------------------------------- */
  --shadow-color: 12, 12, 13;                /* rgb channels of ink-900 */

  /* DROP SHADOWS — ascending elevation */
  --elevation-0: none;
  --elevation-1: 0 1px 2px  rgba(var(--shadow-color), .06),
                 0 2px 4px  rgba(var(--shadow-color), .04);                 /* hairline / chips */
  --elevation-2: 0 2px 4px  rgba(var(--shadow-color), .06),
                 0 8px 16px rgba(var(--shadow-color), .08);                 /* cards at rest */
  --elevation-3: 0 4px 8px  rgba(var(--shadow-color), .08),
                 0 16px 32px rgba(var(--shadow-color), .10);                /* hovered cards */
  --elevation-4: 0 8px 16px rgba(var(--shadow-color), .10),
                 0 24px 48px rgba(var(--shadow-color), .14);                /* popovers / modals */
  --elevation-5: 0 12px 24px rgba(var(--shadow-color), .12),
                 0 40px 80px rgba(var(--shadow-color), .20);                /* lifted hero / CTA */

  /* INNER SHADOWS — unified inset scale, same cool-black system */
  --inset-1: inset 0 1px 2px rgba(var(--shadow-color), .06);                /* subtle field */
  --inset-2: inset 0 2px 4px rgba(var(--shadow-color), .10);                /* inputs at rest */
  --inset-3: inset 0 3px 6px rgba(var(--shadow-color), .14);                /* pressed state */

  /* Legacy aliases — keep existing component CSS working */
  --shadow-card-sm:  var(--elevation-2);
  --shadow-card-md:  var(--elevation-3);
  --shadow-dropdown: var(--elevation-4);
}

/* ================================================================
   ELEMENT DEFAULTS — apply tokens to base HTML elements.
   Keep specificity low; components can override freely.
   ================================================================ */
html { font-size: 16px; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

/* Display — hero h1 ("Crie e gerencie indicadores de sustentabilidade"). */
h1, .h-display {
  font-size: var(--text-5xl);   /* 64px */
  line-height: 1.05;
}

/* Section titles ("Quem somos", "Inventário de emissões"). */
h2, .h-section {
  font-size: var(--text-3xl);   /* 40px */
  line-height: 1.1;
}

/* Subheads on feature rows. */
h3, .h-subsection {
  font-size: var(--text-xl);    /* 24px */
}

/* Small card / nav labels. */
h4, .h-card {
  font-size: var(--text-lg);    /* 20px */
}

/* Eyebrows ("Soluções", "Sobre nós"). */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-brand);
}

p, .p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  margin: 0;
}

.p-lead {
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--fg-on-dark-muted);
}

.p-sm   { font-size: var(--text-sm); line-height: 1.5; }
.p-xs   { font-size: var(--text-xs); line-height: 1.4; }

/* Buttons share anatomy — size via pad, not font. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-md);
  line-height: 1;
  padding: 20px 30px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--action-primary);
  color: var(--action-primary-fg);
}
.btn-primary:hover { background: var(--action-primary-hover); }

.btn-secondary {
  background: var(--action-secondary);
  color: var(--action-secondary-fg);
}
.btn-secondary:hover { background: var(--action-secondary-hover); }

.btn-ghost {
  background: transparent;
  color: var(--action-ghost-fg);
  border-color: var(--action-ghost-border);
}
.btn-ghost:hover { background: var(--action-ghost-fg); color: var(--action-secondary-fg); }

.btn-sm { padding: 15px 24px; font-size: var(--text-sm); }

a { color: var(--fg-brand); text-decoration: none; }
a:hover { color: var(--action-primary-hover); }

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