/* ========================================================================
   FLEX ENERGY — Design Tokens
   Base CSS variables for color and typography.
   Source of truth: Paleta de cores.pdf, Gradientes.pdf, Iconografia.pdf
   ======================================================================== */

/* --- Fonts ---------------------------------------------------------------
   PRIMARY: Rubik — self-hosted, all weights 300-900 with italics.
            Rubik's slightly rounded geometric forms echo the Flex Energy
            wordmark's friendly, modern character.
   Font files live in fonts/ as TTFs. See fonts/rubik.css for @font-face.
------------------------------------------------------------------------- */
@import url('./fonts/rubik.css');

:root {
  /* =========================================================
     COLOR TOKENS — raw brand palette
     ========================================================= */

  /* Primary warm — sun / energy */
  --solar-gold:    #F5B321;    /* Pantone 123 C — primary brand color */
  --golden-light:  #F7C94A;    /* Pantone 121 C */

  /* Sustainability green */
  --eco-flow:      #8CCB7F;    /* Pantone 7488 C */
  --green-breeze:  #CFE8C7;    /* Pantone 621 C */

  /* Innovation / sky */
  --sky-energy:    #74C7F7;    /* Pantone 2975 C */
  --blue-air:      #D7F1FF;    /* Pantone 290 C */

  /* Neutrals */
  --pure-light:    #F8F8F6;    /* Cool Gray 1 C — page background */
  --soft-white:    #F4F1EA;    /* Warm Gray 1 C — surface alt */
  --silver-mist:   #BFC3C7;    /* Cool Gray 4 C — borders, muted ui */
  --graphite-soft: #4B4B4D;    /* Pantone 432 C — primary text */
  --ink:           #3A3A3D;    /* Softened graphite for headlines — brand avoids pure black */
  --ink-deep:      #2E2E31;    /* Deepest allowed neutral, sparingly. Still NOT black. */
  --white:         #FFFFFF;

  /* Extra steps derived from the palette for ui depth */
  --solar-gold-700: #C8901A;
  --solar-gold-100: #FDEBC4;
  --eco-flow-700:   #5FA055;
  --sky-energy-700: #3B9AD7;
  --neutral-100:    #ECEAE3;
  --neutral-200:    #DAD7CF;
  --neutral-300:    #BFC3C7;   /* alias silver-mist */
  --neutral-500:    #7A7B7D;
  --neutral-700:    #4B4B4D;   /* alias graphite-soft */
  --neutral-900:    #3A3A3D;   /* alias ink — softened from near-black */

  /* =========================================================
     SEMANTIC COLOR TOKENS
     ========================================================= */
  --bg:           var(--pure-light);
  --bg-alt:       var(--soft-white);
  --surface:      var(--white);
  --surface-sunk: var(--pure-light);

  --fg:           var(--graphite-soft);       /* default body text */
  --fg-strong:    var(--ink);                  /* headlines */
  --fg-muted:     var(--neutral-500);
  --fg-on-dark:   var(--pure-light);
  --fg-on-solar:  var(--ink);                  /* gold is light enough that dark text wins */

  --border:       var(--neutral-200);
  --border-strong:var(--silver-mist);
  --divider:      var(--neutral-100);

  --accent:       var(--solar-gold);
  --accent-hover: var(--solar-gold-700);
  --accent-soft:  var(--solar-gold-100);

  --success:      var(--eco-flow);
  --success-soft: var(--green-breeze);
  --info:         var(--sky-energy);
  --info-soft:    var(--blue-air);
  --warning:      var(--golden-light);
  --danger:       #D9534F;     /* not in original palette — derived for ui only */

  /* =========================================================
     OFFICIAL GRADIENTS
     ========================================================= */
  --gradient-brazil-light: linear-gradient(90deg, #74C7F7 0%, #8CCB7F 50%, #F5B321 100%);
  --gradient-soft-solar:   linear-gradient(90deg, #F8F8F6 0%, #F7E4A8 50%, #F5B321 100%);
  --gradient-eco-tech:     linear-gradient(90deg, #74C7F7 0%, #DDF5E0 100%);
  --gradient-energy-flow:  linear-gradient(90deg, #D7F1FF 0%, #CFE8C7 50%, #F7C944 100%);
  --gradient-premium-light:linear-gradient(90deg, #FFFFFF 0%, #F4F1EA 50%, #F8F876 100%);

  /* =========================================================
     TYPOGRAPHY — families, weights, scale
     ========================================================= */
  --font-sans: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --ls-display: -0.02em;
  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-tracked: 0.12em;     /* for ALL-CAPS labels */

  /* Type scale — major third-ish, tuned for marketing + product */
  --fs-display: clamp(48px, 6vw, 84px);
  --fs-h1:      clamp(36px, 4.5vw, 56px);
  --fs-h2:      clamp(28px, 3.2vw, 40px);
  --fs-h3:      24px;
  --fs-h4:      20px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-overline:11px;

  /* =========================================================
     SPACING — 4px base
     ========================================================= */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* =========================================================
     RADII — generous, rounded; matches the Rubik & logo feel
     ========================================================= */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl:32px;
  --radius-pill: 999px;

  /* =========================================================
     ELEVATION — soft, low-contrast shadows
     ========================================================= */
  --shadow-xs: 0 1px 2px rgba(58, 58, 61, 0.05);
  --shadow-sm: 0 2px 6px rgba(58, 58, 61, 0.07);
  --shadow-md: 0 8px 24px rgba(58, 58, 61, 0.09);
  --shadow-lg: 0 20px 48px rgba(58, 58, 61, 0.12);
  --shadow-solar: 0 8px 24px rgba(245, 179, 33, 0.28);    /* warm halo on CTAs */

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* container */
  --container-max: 1240px;
}

/* ========================================================================
   SEMANTIC ELEMENT STYLES
   These define how raw HTML elements render with our tokens.
   ======================================================================== */

html {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
}

body {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--fg-strong);
  margin: 0 0 var(--sp-4) 0;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
}

.display, .display-1 {
  font-size: var(--fs-display);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-extrabold); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
h5 { font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); }
h6 { font-size: var(--fs-body); font-weight: var(--fw-semibold); }

p  { margin: 0 0 var(--sp-4) 0; line-height: var(--lh-base); }
.lead { font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--fg); }

small, .caption { font-size: var(--fs-caption); color: var(--fg-muted); }

.overline {
  font-size: var(--fs-overline);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tracked);
  text-transform: uppercase;
  color: var(--fg-muted);
}

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

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--surface-sunk);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

strong, b { font-weight: var(--fw-bold); color: var(--fg-strong); }

/* Highlight: brand wraps an accent word in solar gold */
.hl-solar { color: var(--solar-gold); }
.hl-eco   { color: var(--eco-flow-700); }
.hl-sky   { color: var(--sky-energy-700); }

/* Quick utilities used across the system */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}