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

/* ---- Fontes (self-hosted, sem CDN — igual ao os.lewash.com.br) ---- */
/* Open Sans Display — títulos: a mesma Open Sans instanciada em largura 87,5%
   (semicondensada), igual ao os.lewash.com.br. Sem CDN, funciona offline. */
@font-face {
  font-family: 'Open Sans Display';
  src: url('fonts/OpenSans-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 300 800;
  font-stretch: 87.5%;
  font-style: normal;
  font-display: swap;
}

/* Geometrica Sans — mantida disponível, mas não usada como display (ver --font-display). */
@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: 'Open Sans Display', 'Open Sans', system-ui, sans-serif;  /* títulos (igual ao OS) */
  --font-body:    'Open Sans', system-ui, sans-serif;     /* corpo de texto    */
  --font-mono:    'Open Sans', system-ui, sans-serif;     /* rótulos técnicos (uppercase), como no OS */

  /* ---- 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); }


/* ============================================================
   MODO ESCURO — automático das 18h às 5h (mesma regra do Gestão e do OS)
   ============================================================ */
:root {
  --tt-knob-x: 0px; --tt-knob-bg: var(--ouro-discreto);
  --tt-sun-c: #FDFBF4; --tt-moon-c: rgba(239,231,210,0.66);
}
:root[data-theme="dark"] {
  --creme-linho: #14161F;
  --off-white:   #1B1E2A;
  --linho-200:   #232733;
  --linho-800:   #E6E1D2;
  --linho-600:   #9A9484;
  --carbono:     #0F1117;
  --bg:            var(--creme-linho);
  --bg-alt:        var(--off-white);
  --surface:       var(--off-white);
  --fg:            var(--linho-800);
  --fg-muted:      var(--linho-600);
  --border:        var(--linho-200);
  --border-strong: #3a4149;
  --verde-mata:    #7FC489;
  --link:          #8FBE9A;
  --tt-knob-x: 26px; --tt-knob-bg: #7A8299;
  --tt-sun-c: rgba(239,231,210,0.66); --tt-moon-c: #FDFBF4;
}
:root[data-theme="dark"] body { background: var(--bg); color: var(--fg); }
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background-color: var(--linho-200); color: var(--fg); border-color: var(--border);
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--fg-muted); }