/* ==========================================================================
   LAR MONTESSORIANO - DESIGN SYSTEM TOKENS (VARIABLES.CSS)
   Atualizado com a Paleta Oficial de larmontessoriano.com.br
   ========================================================================== */

:root {
  /* ========================================================================
     PALETA OFICIAL DO LAR MONTESSORIANO (AZUL INSTITUCIONAL & VERMELHO DE AÇÃO)
     Extraída diretamente do site oficial: https://larmontessoriano.com.br
     ======================================================================== */
  
  /* Azul Institucional Primário (--primary: #4376B8 | --primary-dark: #2D5385) */
  --color-blue-900: #15263d;
  --color-blue-800: #1d3657;
  --color-blue-700: #2d5385; /* --primary-dark do site oficial */
  --color-blue-600: #4376b8; /* --primary OFICIAL do site */
  --color-blue-500: #5b8ccb;
  --color-blue-400: #7ba6db;
  --color-blue-100: #eaf1fa;
  --color-blue-50:  #f4f7fc;

  /* Vermelho Oficial de Ação & Matrículas (--secondary: #EE3A3A) */
  --color-red-800: #9e1c1c;
  --color-red-700: #c62525;
  --color-red-600: #ee3a3a; /* --secondary OFICIAL do site */
  --color-red-500: #f55c5c;
  --color-red-100: #fde8e8;
  --color-red-50:  #fef5f5;

  /* Turquesa / Menta Oficial (--teal: #20C997 | --info: #00A99D) */
  --color-teal-800: #006b63;
  --color-teal-700: #008f84;
  --color-teal-600: #00a99d; /* Botão Cookie e Destaque oficial */
  --color-teal-500: #20c997; /* --teal do site oficial */
  --color-teal-100: #e2f7f3;
  --color-teal-50:  #f0faf8;

  /* Amarelo Solar Oficial Montessori & Lar Montessoriano (--warning: #ffc107) */
  --color-yellow-700: #B78103;
  --color-yellow-600: #E6A600;
  --color-yellow-500: #FFB800; /* Amarelo solar vibrante e acolhedor */
  --color-yellow-100: #FFF8E1;
  --color-yellow-50:  #FFFDF5;

  /* Aliases de Dourado / Estrelas com Amarelo Solar */
  --color-gold-700: var(--color-yellow-700);
  --color-gold-600: var(--color-yellow-600);
  --color-gold-500: var(--color-yellow-500);
  --color-gold-100: var(--color-yellow-100);

  /* Aliases Semânticos (Garantindo compatibilidade total com o ecossistema) */
  --color-forest-900: var(--color-blue-900);
  --color-forest-800: var(--color-blue-800);
  --color-forest-700: var(--color-blue-600); /* Azul oficial como cor mestra */
  --color-forest-600: var(--color-blue-700);
  --color-forest-500: var(--color-blue-500);
  --color-forest-100: var(--color-blue-100);
  --color-forest-50:  var(--color-blue-50);

  --color-terracotta-700: var(--color-red-700);
  --color-terracotta-600: var(--color-red-600); /* Vermelho oficial em CTAs */
  --color-terracotta-500: var(--color-red-500);
  --color-terracotta-100: var(--color-red-100);
  --color-terracotta-50:  var(--color-red-50);

  --color-sage-600: var(--color-teal-600);
  --color-sage-500: var(--color-teal-500);
  --color-sage-300: #82d8c3;
  --color-sage-100: var(--color-teal-100);

  /* Fundos Sensoriais e Superfícies */
  --color-bg-main:    #fbfaf7; /* Off-white linho acolhedor */
  --color-bg-surface: #ffffff; /* Branco puro para cartões e modais */
  --color-bg-subtle:  #f2f5f9; /* Sub-tom azulado suave e limpo */
  --color-bg-warm:    #e9eef5;

  /* Textos & Contraste (Acessibilidade WCAG AAA rigorosa) */
  --color-text-title: #1c2b3e; /* Azul petróleo escuro para títulos */
  --color-text-body:  #333333; /* --dark oficial do site (#333) */
  --color-text-muted: #667280; /* --gray-dark suavizado */
  --color-text-light: #94a3b3;
  --color-text-on-dark: #fafaf8;

  /* Bordas e Divisores */
  --color-border-light: #e4e9f0;
  --color-border-medium: #cbd6e4;
  --color-border-focus: var(--color-blue-600);

  /* Tipografia Moderna e Acolhedora */
  --font-serif: 'Playfair Display', Georgia, Cambria, 'Times New Roman', serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  
  /* Escala de Tipografia Fluida (clamp) */
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --font-size-sm: clamp(0.875rem, 0.825rem + 0.25vw, 0.9375rem);
  --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --font-size-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --font-size-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --font-size-xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
  --font-size-2xl: clamp(1.875rem, 1.65rem + 1.1vw, 2.375rem);
  --font-size-3xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
  --font-size-display: clamp(2.75rem, 2.2rem + 2.5vw, 4.25rem);

  /* Alturas de Linha */
  --line-height-tight: 1.15;
  --line-height-snug: 1.3;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;

  /* Espaçamentos Modulares */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* Raios de Arredondamento */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Sombras Orgânicas e Suaves */
  --shadow-xs: 0 1px 3px rgba(21, 38, 61, 0.05);
  --shadow-sm: 0 2px 8px rgba(21, 38, 61, 0.06), 0 1px 3px rgba(21, 38, 61, 0.04);
  --shadow-md: 0 8px 24px rgba(21, 38, 61, 0.08), 0 3px 6px rgba(21, 38, 61, 0.04);
  --shadow-lg: 0 16px 40px rgba(21, 38, 61, 0.10), 0 6px 12px rgba(21, 38, 61, 0.05);
  --shadow-xl: 0 24px 60px rgba(21, 38, 61, 0.12), 0 10px 20px rgba(21, 38, 61, 0.06);

  /* Transições */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 280ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 450ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Dimensões Estruturais */
  --container-max-width: 1280px;
  --container-narrow: 920px;
  --header-height: 84px;
  --header-height-mobile: 72px;

  /* Camadas Z-Index */
  --z-back: -1;
  --z-normal: 1;
  --z-sticky: 100;
  --z-header: 1000;
  --z-modal-backdrop: 2000;
  --z-modal: 2010;
  --z-toast: 3000;
}