/* ============================================================
   7LM CONSTRUTORA — Colors & Type foundations
   "A construtora da sua vida"
   ------------------------------------------------------------
   Institutional typeface: AXIFORMA (book / bold / extrabold + italics).
   Sanctioned free fallback: RALEWAY (Google Fonts) — used here because
   the Axiforma license files were not supplied. See README.md.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,500;0,700;0,800;1,400;1,700&display=swap');

:root {
  /* ---------- PRIMARY PALETTE (Hierarquia cromática) ---------- */
  --branco:        #FFFFFF;  /* 1. Fundo de peças gráficas (PANTONE —)        */
  --azul:          #00AAE0;  /* 2. Elementos gráficos e textos de destaque    */
  --cinza-claro:   #E0E0E0;  /* 3. Elementos gráficos (PANTONE GRAY 1 C)      */
  --cinza-escuro:  #7F8082;  /* 3. Elementos gráficos (PANTONE 430 C)         */
  --preto:         #231F20;  /* 3. Texto corrido (PANTONE 447 C)              */

  /* ---------- SECONDARY / EXPRESSIVE PALETTE ---------- */
  --azul-marinho:  #081F45;  /* PANTONE 541 C  */
  --roxo:          #600B70;  /* PANTONE 267 C  */
  --turquesa:      #0DEDA6;  /* PANTONE 3245 C */
  --verde:         #1BA800;  /* PANTONE 347 C  */
  --vermelho:      #E0370A;  /* PANTONE 173 C  */
  --rosa:          #EE3F7B;  /* PANTONE RHOD RED C */
  --laranja:       #FF850B;  /* PANTONE 716    */
  --amarelo:       #E0A916;  /* PANTONE 131 C  */

  /* ---------- SEMANTIC TINTS (derived, oklch-balanced) ---------- */
  --azul-claro:    #E4F6FC;  /* azul wash for soft section backgrounds   */
  --azul-escuro:   #0089b8;  /* azul pressed / hover-darken              */
  --linha:         #ECECEC;  /* hairline borders on white                */
  --cinza-bg:      #F5F6F7;  /* off-white surface                        */

  /* ---------- SEMANTIC ROLES ---------- */
  --fg:            var(--preto);        /* primary text                  */
  --fg-muted:     var(--cinza-escuro);  /* secondary text / captions     */
  --fg-on-dark:    var(--branco);
  --accent:        var(--azul);         /* the one brand highlight       */
  --accent-ink:    var(--azul-escuro);
  --bg:            var(--branco);
  --bg-alt:        var(--cinza-bg);
  --border:        var(--linha);

  /* ---------- TYPE SYSTEM ----------
     7LM scales from a body base "B" (never < 9pt print / set here in px).
     Títulos = B*2, Maxi = B*3, Sub = B*1.2, Legenda ≈ B*0.8. */
  --font-sans: 'Raleway', 'Axiforma', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --b: 1.0625rem;          /* B — body base (17px) */

  --fs-maxi:   calc(var(--b) * 3);     /* Maxi Títulos   */
  --fs-titulo: calc(var(--b) * 2);     /* Títulos        */
  --fs-sub:    calc(var(--b) * 1.2);   /* Sub-títulos    */
  --fs-body:   var(--b);               /* Texto corrido  */
  --fs-legenda:calc(var(--b) * 0.8);   /* Legendas       */

  --lh-maxi: 1.3;    /* @kind font */
  --lh-titulo: 1.4;  /* @kind font */
  --lh-sub: 1.5;     /* @kind font */
  --lh-body: 1.7;    /* @kind font */

  --w-book: 400;     /* @kind font */
  --w-medium: 500;   /* @kind font */
  --w-bold: 700;     /* @kind font */
  --w-extra: 800;    /* @kind font */

  /* ---------- SHAPE & ELEVATION ---------- */
  --r-capsule: 999px;        /* the brand element: 45° rounded bars      */
  --r-card: 16px;
  --r-sm: 10px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(35,31,32,.06), 0 1px 3px rgba(35,31,32,.05);
  --shadow-md: 0 6px 20px rgba(35,31,32,.08), 0 2px 6px rgba(35,31,32,.05);
  --shadow-lg: 0 24px 60px rgba(8,31,69,.14), 0 6px 16px rgba(8,31,69,.08);

  /* ---------- SPACING (4px base grid) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* surface roles (used by dark mode + components that opt in) */
  --surface:   var(--branco);   /* card / panel background          */
  --surface-2: var(--cinza-bg); /* elevated / nested surface        */
  --ink:       var(--preto);    /* primary text                     */
  --ink-soft:  var(--cinza-escuro);
  color-scheme: light;
}

/* ============================================================
   DARK MODE  — "Noite 7LM"
   Apply by adding class `.theme-dark` (or [data-theme="dark"]) to
   <html>, <body>, or any wrapper. Redefines the neutral ramp so
   existing components flip automatically; #fff-on-azul stays #fff.
   Built on azul-marinho but DESATURATED — a deep neutral-slate with a
   marinho undertone, so azul reads as the one intentional accent
   ("azul com parcimônia"), never as the dominant surface colour.
   ============================================================ */
.theme-dark, [data-theme="dark"] {
  color-scheme: dark;

  /* neutral ramp flips: text light, fills deep neutral-slate (low blue chroma) */
  --preto:        #ECEFF3;   /* primary text — neutral white        */
  --branco:       #0E1622;   /* base background — deep neutral-slate */
  --cinza-escuro: #9AA4B0;   /* secondary text — neutral gray        */
  --cinza-claro:  #2A3441;   /* light fills / bars / tracks          */
  --linha:        rgba(255,255,255,.09);
  --cinza-bg:     #131C28;   /* off-base surface                     */

  /* azul brightens slightly to hold contrast; hover gets lighter */
  --azul:         #19B4EC;
  --azul-escuro:  #57CBF4;   /* "hover-darken" inverts → lighten   */
  --azul-claro:   rgba(25,180,236,.15); /* translucent wash         */
  --azul-marinho: #0E1622;

  /* surfaces (cards sit just above the base) */
  --surface:   #18222E;
  --surface-2: #222D3B;
  --ink:       #ECEFF3;
  --ink-soft:  #9AA4B0;

  /* semantic roles re-resolve from the above */
  --fg:        var(--preto);
  --fg-muted:  var(--cinza-escuro);
  --bg:        var(--branco);
  --bg-alt:    var(--cinza-bg);
  --border:    var(--linha);
  --accent:    var(--azul);
  --accent-ink:var(--azul-escuro);

  /* shadows deepen on dark */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35);
  --shadow-md: 0 8px 26px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
  --shadow-lg: 0 28px 70px rgba(0,0,0,.6), 0 8px 20px rgba(0,0,0,.45);
}

/* ============================================================
   ELEMENT DEFAULTS
   ============================================================ */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--w-book);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Maxi Títulos — B*3, extrabold, preto. Hero statements. */
.t-maxi {
  font-size: var(--fs-maxi);
  line-height: var(--lh-maxi);
  font-weight: var(--w-extra);
  letter-spacing: -0.02em;
  color: var(--preto);
  text-wrap: balance;
}

/* Títulos — B*2, bold, AZUL. The signature section headline. */
.t-titulo {
  font-size: var(--fs-titulo);
  line-height: var(--lh-titulo);
  font-weight: var(--w-bold);
  letter-spacing: -0.01em;
  color: var(--azul);
  text-wrap: balance;
}

/* Sub-títulos — B*1.2, bold, preto. */
.t-sub {
  font-size: var(--fs-sub);
  line-height: var(--lh-sub);
  font-weight: var(--w-bold);
  color: var(--preto);
}

/* Texto corrido — body. */
.t-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--w-book);
  color: var(--preto);
  text-wrap: pretty;
}

/* Legendas — captions, ≥ 8pt. */
.t-legenda {
  font-size: var(--fs-legenda);
  line-height: 1.5;
  font-weight: var(--w-medium);
  color: var(--fg-muted);
}

/* Eyebrow / kicker — small azul uppercase label */
.t-kicker {
  font-size: var(--fs-legenda);
  font-weight: var(--w-extra);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azul);
}