/* ==========================================================================
   MORADA DOS NOBRES — Design Tokens
   Sistema de design derivado do logotipo residencial.
   Paleta extraída diretamente das cores da marca (verdes sálvia + limão).
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     COR — Verde Folha (primária / marca)
     Derivada das figuras do logotipo.
     ---------------------------------------------------------------------- */
  --green-50:  #F1F6EE;
  --green-100: #E3EEDC;
  --green-200: #C9DEBC;
  --green-300: #A9CB8B;   /* figura clara do logo */
  --green-400: #86AF79;   /* figura principal do logo */
  --green-500: #6B9560;
  --green-600: #527C49;
  --green-700: #3E6138;   /* texto/ação acessível sobre claro */
  --green-800: #2E4A2A;
  --green-900: #20341E;

  /* COR — Verde Broto (lima / acento claro) */
  --lime-100: #EEF4D2;
  --lime-300: #D7E6A0;
  --lime-500: #C8DD86;    /* lima do logo */
  --lime-700: #A6C25A;

  /* COR — Limão Sol (acento — uso reduzido) */
  --sun-100: #FCF8CF;
  --sun-300: #F7F0A3;     /* fundo limão do logo */
  --sun-500: #ECE07A;
  --sun-700: #D4C84E;

  /* COR — Neutros Pedra (cinzas quentes esverdeados) */
  --stone-0:   #FFFFFF;
  --stone-50:  #FBFAEC;   /* fundo de página (creme) */
  --stone-100: #F4F4E7;
  --stone-200: #E7E8D7;
  --stone-300: #D5D7C4;
  --stone-400: #B0B3A0;
  --stone-500: #868A76;
  --stone-600: #5E6353;   /* texto secundário */
  --stone-700: #434838;
  --stone-800: #2C3024;
  --stone-900: #1E2118;   /* tinta / texto principal */

  /* COR — Semânticas (terrosas e calmas) */
  --info:        #3E6B7C;   --info-bg:    #E6EEF1;   --info-border:    #BFD5DD;
  --success:     #3E7C4E;   --success-bg: #E4F0E4;   --success-border: #BDD9BE;
  --warning:     #9C7416;   --warning-bg: #FBF1D8;   --warning-border: #E8D49A;
  --danger:      #A8473C;   --danger-bg:  #F6E4E0;   --danger-border:  #E2BBB3;

  /* ----------------------------------------------------------------------
     PAPÉIS SEMÂNTICOS (tokens de aplicação)
     Use estes na construção do site — não os valores brutos acima.
     ---------------------------------------------------------------------- */
  --color-bg:            var(--stone-50);
  --color-surface:       var(--stone-0);
  --color-surface-soft:  var(--green-50);
  --color-border:        var(--stone-200);
  --color-border-strong: var(--stone-300);

  --color-text:          var(--stone-900);
  --color-text-muted:    var(--stone-600);
  --color-text-faint:    var(--stone-500);
  --color-text-invert:   var(--stone-50);

  --color-brand:         var(--green-600);
  --color-brand-strong:  var(--green-700);
  --color-brand-soft:    var(--green-100);
  --color-accent:        var(--lime-500);
  --color-highlight:     var(--sun-300);

  --color-link:          var(--green-700);
  --color-link-hover:    var(--green-800);
  --color-focus:         var(--green-500);

  /* ----------------------------------------------------------------------
     TIPOGRAFIA — sans-serif only (aligned with packages/ui tokens)
     ---------------------------------------------------------------------- */
  --font-ui:        "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-heading:   var(--font-ui);
  --font-body:      var(--font-ui);
  --font-editorial: var(--font-ui);
  --font-mono:      "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Escala tipográfica */
  --text-display: 3.25rem;   /* 52px */
  --text-h1:      2.5rem;     /* 40px */
  --text-h2:      1.875rem;   /* 30px */
  --text-h3:      1.375rem;   /* 22px */
  --text-h4:      1.125rem;   /* 18px */
  --text-lg:      1.125rem;   /* 18px */
  --text-base:    1rem;       /* 16px */
  --text-sm:      0.875rem;   /* 14px */
  --text-xs:      0.75rem;    /* 12px */

  --leading-tight:   1.12;
  --leading-snug:    1.28;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* ----------------------------------------------------------------------
     ESPAÇAMENTO (base 4px)
     ---------------------------------------------------------------------- */
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */

  /* RAIOS */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* SOMBRAS (suaves, naturais — tinta quente) */
  --shadow-xs: 0 1px 2px rgba(30, 33, 24, 0.06);
  --shadow-sm: 0 2px 6px rgba(30, 33, 24, 0.07);
  --shadow-md: 0 8px 22px rgba(30, 33, 24, 0.08);
  --shadow-lg: 0 18px 44px rgba(30, 33, 24, 0.11);

  /* CONTORNO DE FOCO */
  --focus-ring: 0 0 0 3px rgba(107, 149, 96, 0.45);

  /* LARGURAS DE CONTEÚDO */
  --width-prose:  68ch;
  --width-content: 1080px;
  --width-wide:   1280px;

  /* MOVIMENTO */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
}