/* =========================================================
   Design Tokens - Expansao Teologica
   Escala calibrada para plataforma educacional profissional.
   ========================================================= */

:root {
  /* --- Base / Marca --- */
  --color-ink:        #0F1B2D; /* azul-noite: texto forte, fundos escuros */
  --color-deep:       #1B2A41; /* azul profundo: secoes de destaque */
  --color-primary:    #2A4A6B; /* azul confianca: links, botoes secundarios */
  --color-primary-10: rgba(42, 74, 107, 0.08);

  /* --- Acento de autoridade / conversao --- */
  --color-gold:       #C9A24B;
  --color-gold-soft:  #E4D2A0;
  --color-gold-10:    rgba(201, 162, 75, 0.12);
  --color-gold-20:    rgba(201, 162, 75, 0.20);
  --color-gold-line:  rgba(201, 162, 75, 0.40);
  --color-cta:        #C9A24B;
  --color-cta-hover:  #B38E38;

  /* --- Neutros --- */
  --color-bg:         #FBFAF7; /* off-white quente: fundo padrao */
  --color-surface:    #FFFFFF; /* cards e caixas */
  --color-surface-2:  #F6F4EF; /* superficie alternativa */
  --color-line:       #E7E3DA; /* divisores */
  --color-text:       #1C2330; /* corpo de texto */
  --color-text-muted: #64707F; /* legendas, metadados */

  /* --- Estado --- */
  --color-success:    #2F855A;
  --color-success-10: rgba(47, 133, 90, 0.12);
  --color-star:       #E8B53D; /* estrelas de avaliacao */

  /* --- Tipografia --- */
  --font-base: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Escala mais contida e profissional */
  --fs-h1:   clamp(1.85rem, 1.3rem + 2.2vw, 2.6rem);   /* ~42px max  */
  --fs-h2:   clamp(1.45rem, 1.2rem + 1.1vw, 1.9rem);   /* ~30px max  */
  --fs-h3:   clamp(1.1rem, 1rem + 0.5vw, 1.3rem);      /* ~21px max  */
  --fs-lead: 1.0625rem;  /* subtitulos / lead          */
  --fs-body: 1rem;       /* 16px corpo                 */
  --fs-sm:   0.875rem;   /* 14px legendas              */
  --fs-xs:   0.75rem;    /* 12px micro labels          */

  --lh-tight: 1.25;
  --lh-body:  1.65;

  /* --- Espacamento (escala compacta) --- */
  --space-2xs: 0.375rem;  /* 6px  */
  --space-xs:  0.5rem;    /* 8px  */
  --space-sm:  0.75rem;   /* 12px */
  --space-md:  1.25rem;   /* 20px */
  --space-lg:  2rem;      /* 32px */
  --space-xl:  3rem;      /* 48px */
  --space-2xl: 4.5rem;    /* 72px */

  /* Ritmo vertical das secoes (responsivo) */
  --section-y: clamp(3rem, 2rem + 4vw, 5rem);

  /* --- Layout --- */
  --container: 1320px;        /* largura unica: aproveita telas largas mantendo alinhamento */
  --container-narrow: 880px;  /* blocos de texto longo (legibilidade) */
  --radius:    12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* --- Sombras em camadas (sutil -> elevado) --- */
  --shadow-xs: 0 1px 2px rgba(15, 27, 45, 0.05);
  --shadow-sm: 0 2px 8px rgba(15, 27, 45, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 27, 45, 0.08);
  --shadow-lg: 0 18px 44px rgba(15, 27, 45, 0.12);

  /* --- Movimento --- */
  --transition: 0.18s ease;
  --transition-slow: 0.4s cubic-bezier(.2, .6, .2, 1);

  /* --- Camadas --- */
  --z-header: 100;
  --z-overlay: 200;
}