/* ============================================================
   LeWash® — Design System Foundations
   colors_and_type.css · Brandbook v1.0 (Maio 2025)
   "Um cuidado silencioso."
   ============================================================ */

/* ---- Fonts ----
   Display + body are the brand's licensed typefaces, self-hosted from fonts/.
   GeometricaSans = the geometric signature face (titles · marca).
   Open Sans      = the humanist body face (corpo de texto).
   JetBrains Mono = technical labels — loaded from CDN (no local file). */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* Geometrica Sans — display / brand. One master weight; heavier weights
   render from the same face (synthetic bold) until additional weights are supplied. */
@font-face {
  font-family: 'Geometrica Sans';
  src: url('fonts/GeometricaSans-Regular.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Open Sans — body. Variable files cover the full 300–800 range + italics. */
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 300 800;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Italic-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 300 800;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ====================================================
     COLOR — PRIMARY (paleta principal)
     Proporção padrão: 25 · 40 · 25 · 10
     ==================================================== */
  --verde-mata:    #2C4A30;   /* PRIMÁRIA · 40% — "LE", tiles, headings on light */
  --azul-marinho:  #1C2541;   /* PRIMÁRIA · 25% — "WASH", tiles, deep grounds   */
  --creme-linho:   #EFE7D2;   /* FUNDO · 25%    — primary page background        */
  --ouro-discreto: #C9A55F;   /* ACENTO · 10%   — gold accent, icons on tiles    */

  /* ---- Neutros de apoio (linen scale) ---- */
  --off-white:  #FAF6E8;
  --linho-200:  #E2DAC2;
  --linho-400:  #B7AE94;
  --linho-600:  #6B6657;
  --linho-800:  #2E2A21;
  --carbono:    #14181F;

  /* ====================================================
     SEMANTIC COLOR ROLES
     ==================================================== */
  --bg:            var(--creme-linho);   /* default page ground            */
  --bg-alt:        var(--off-white);     /* raised / lighter ground        */
  --bg-deep:       var(--azul-marinho);  /* dark sections / footers        */
  --bg-carbon:     var(--carbono);       /* deepest ground                 */
  --surface:       var(--off-white);     /* cards on creme                 */
  --surface-deep:  var(--verde-mata);    /* dark tiles / cards             */

  --fg:            var(--linho-800);     /* primary body text on light     */
  --fg-muted:      var(--linho-600);     /* secondary text                 */
  --fg-on-dark:    var(--creme-linho);   /* body text on dark grounds      */
  --fg-on-dark-muted: var(--linho-400);

  --brand-le:      var(--verde-mata);    /* the "LE" half                  */
  --brand-wash:    var(--azul-marinho);  /* the "WASH" half                */
  --accent:        var(--ouro-discreto); /* gold — sparingly (≈10%)        */

  --border:        var(--linho-200);     /* hairline on light              */
  --border-strong: var(--linho-400);
  --border-on-dark: rgba(239,231,210,0.18);

  /* status / utility (derived to stay in-palette) */
  --success:       var(--verde-mata);
  --warning:       var(--ouro-discreto);
  --link:          var(--verde-mata);

  /* ====================================================
     TYPE FAMILIES
     ==================================================== */
  --font-display: 'Geometrica Sans', 'Archivo', system-ui, sans-serif;  /* títulos · marca */
  --font-body:    'Open Sans', system-ui, sans-serif;     /* corpo de texto    */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace; /* técnico     */

  /* ---- Type scale (from brandbook 06.03) ---- */
  --display-size:  88px;  --display-lh: 82px;  --display-ls: -3.5%;  --display-wght: 800;
  --h1-size:       56px;  --h1-lh:      54px;  --h1-ls:      -3%;    --h1-wght:      800;
  --h2-size:       36px;  --h2-lh:      40px;  --h2-ls:      -2.5%;  --h2-wght:      700;
  --h3-size:       22px;  --h3-lh:      28px;  --h3-ls:      -1.5%;  --h3-wght:      700;
  --lead-size:     18px;  --lead-lh:    27px;  --lead-wght:   300;
  --body-size:     15px;  --body-lh:    24px;  --body-wght:   400;
  --mono-size:     12px;  --mono-lh:    18px;  --mono-ls:    14%;    --mono-wght:    500;

  /* ====================================================
     RADII — geometric, restrained (tile language ≈ 22%)
     ==================================================== */
  --radius-tile: 14px;   /* the azulejo / brand tile corner   */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ====================================================
     SPACING — 8px base grid (logo construction = 8x)
     ==================================================== */
  --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;
  --space-10: 128px;

  /* ====================================================
     ELEVATION — soft, low-contrast (silent, never flashy)
     ==================================================== */
  --shadow-sm: 0 1px 2px rgba(20,24,31,0.06);
  --shadow-md: 0 4px 16px rgba(20,24,31,0.08);
  --shadow-lg: 0 12px 40px rgba(20,24,31,0.12);
  --shadow-tile: 0 6px 22px rgba(28,37,65,0.14);

  /* motion — quiet, no bounce */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 220ms;
}

/* ============================================================
   BASE / SEMANTIC ELEMENT STYLES
   ============================================================ */
.lw-display, .lw-h1, .lw-h2, .lw-h3 { font-family: var(--font-display); margin: 0; color: var(--verde-mata); }

.lw-display {
  font-weight: var(--display-wght); font-size: var(--display-size);
  line-height: var(--display-lh); letter-spacing: var(--display-ls);
}
.lw-h1 { font-weight: var(--h1-wght); font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: var(--h1-ls); }
.lw-h2 { font-weight: var(--h2-wght); font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); }
.lw-h3 { font-weight: var(--h3-wght); font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: var(--h3-ls); }

.lw-lead { font-family: var(--font-body); font-weight: var(--lead-wght); font-size: var(--lead-size); line-height: var(--lead-lh); color: var(--fg-muted); margin: 0; }
.lw-body { font-family: var(--font-body); font-weight: var(--body-wght); font-size: var(--body-size); line-height: var(--body-lh); color: var(--fg); margin: 0; }

.lw-mono {
  font-family: var(--font-mono); font-weight: var(--mono-wght);
  font-size: var(--mono-size); line-height: var(--mono-lh);
  letter-spacing: var(--mono-ls); text-transform: uppercase; color: var(--fg-muted);
}

/* The wordmark, rendered in type: LE (green) + WASH (navy) */
.lw-wordmark { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; }
.lw-wordmark .le   { color: var(--brand-le); }
.lw-wordmark .wash { color: var(--brand-wash); }