/* ==========================================================================
   CAFÉ TRÊS LOBOS — DESIGN TOKENS
   Fonte única de verdade para cor, tipografia, espaçamento e grid.
   Nenhum valor de cor, fonte ou espaçamento deve ser escrito "solto"
   em nenhum outro arquivo CSS. Sempre referenciar estas variáveis.
   ========================================================================== */

:root {

  /* ---------- COR DE FUNDO ---------- */
  --ctl-bg: #000000;
  --ctl-bg-elevated: #0d0d0d;   /* cards, modais, header ao rolar */
  --ctl-bg-soft: #141414;      /* seções alternadas, sem quebrar o preto */

  /* ---------- PALETA DOURADA (uso individual, ex: ícones sólidos) ---------- */
  --ctl-gold-base: #aa771c;
  --ctl-gold-transition: #b38728;
  --ctl-gold-center: #bf953f;
  --ctl-gold-reflex: #fbf5b7;
  --ctl-gold-shine: #fcf6ba;

  /* ---------- GRADIENTE METÁLICO OFICIAL ----------
     Uso obrigatório em: menu, botões, ícones, títulos de destaque.
     Nunca substituir por dourado sólido ou amarelo chapado. */
  --ctl-gold-gradient: linear-gradient(
    90deg,
    var(--ctl-gold-base),
    var(--ctl-gold-transition),
    var(--ctl-gold-center),
    var(--ctl-gold-reflex),
    var(--ctl-gold-center),
    var(--ctl-gold-transition),
    var(--ctl-gold-base)
  );

  /* Variante diagonal, usada em botões e hover de cards */
  --ctl-gold-gradient-135: linear-gradient(
    135deg,
    var(--ctl-gold-base) 0%,
    var(--ctl-gold-center) 45%,
    var(--ctl-gold-reflex) 100%
  );

  /* ---------- NEUTROS DE APOIO (nunca substituem o preto/dourado como identidade) ---------- */
  --ctl-white: #ffffff;
  --ctl-off-white: #f7f5ef;      /* fundo de campos de formulário */
  --ctl-gray-100: #ececec;
  --ctl-gray-400: #9a9a9a;       /* texto secundário sobre preto */
  --ctl-gray-700: #2b2b2b;       /* bordas discretas sobre preto */
  --ctl-black-text: #0a0a0a;     /* texto sobre fundo dourado (contraste) */

  /* ---------- FEEDBACK (uso mínimo, nunca como cor de marca) ---------- */
  --ctl-success: #4caf50;
  --ctl-error: #e5484d;
  --ctl-warning: #d9a441;

  /* ---------- TIPOGRAFIA ---------- */
  --ctl-font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

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

  /* Escala tipográfica fluida (clamp: mínimo, ideal, máximo) */
  --ctl-fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --ctl-fs-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --ctl-fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --ctl-fs-md: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --ctl-fs-lg: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --ctl-fs-xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --ctl-fs-2xl: clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem);
  --ctl-fs-3xl: clamp(2.75rem, 2rem + 3.5vw, 5rem);

  --ctl-lh-tight: 1.15;
  --ctl-lh-base: 1.5;
  --ctl-lh-loose: 1.8;

  --ctl-ls-menu: 0.15em;   /* 2-4px em fontes de menu — letter-spacing do menu principal */
  --ctl-ls-heading: 0.02em;

  /* ---------- ESPAÇAMENTO (escala base 8px) ---------- */
  --ctl-space-1: 0.5rem;   /* 8px */
  --ctl-space-2: 1rem;     /* 16px */
  --ctl-space-3: 1.5rem;   /* 24px */
  --ctl-space-4: 2rem;     /* 32px */
  --ctl-space-5: 3rem;     /* 48px */
  --ctl-space-6: 4rem;     /* 64px */
  --ctl-space-7: 6rem;     /* 96px */
  --ctl-space-8: 8rem;     /* 128px — respiro entre seções institucionais */

  /* ---------- GRID / CONTAINER ---------- */
  --ctl-container-max: 1280px;
  --ctl-container-padding: clamp(1.25rem, 4vw, 4rem);
  --ctl-grid-gap: var(--ctl-space-3);

  /* ---------- BORDAS E RAIOS ---------- */
  --ctl-radius-sm: 6px;
  --ctl-radius-md: 12px;
  --ctl-radius-lg: 20px;
  --ctl-radius-pill: 999px;
  --ctl-border-hairline: 1px solid rgba(191, 149, 63, 0.25); /* dourado discreto */

  /* ---------- SOMBRAS ---------- */
  --ctl-shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.35);
  --ctl-shadow-gold: 0 8px 24px rgba(191, 149, 63, 0.18);
  --ctl-shadow-card-hover: 0 16px 40px rgba(0, 0, 0, 0.45);

  /* ---------- TRANSIÇÕES ---------- */
  --ctl-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ctl-duration-fast: 0.25s;
  --ctl-duration-base: 0.3s;
  --ctl-duration-slow: 0.35s;

  /* ---------- Z-INDEX (escala controlada, evita guerra de z-index) ---------- */
  --ctl-z-header: 100;
  --ctl-z-mega-menu: 110;
  --ctl-z-mobile-menu: 120;
  --ctl-z-modal: 200;
  --ctl-z-whatsapp: 90;
  --ctl-z-cookie-banner: 210;

  /* ---------- BREAKPOINTS DE REFERÊNCIA (uso em comentários / JS, media query não lê var) ---------- */
  /* mobile: até 599px | tablet: 600–1023px | notebook: 1024–1439px | desktop: 1440px+ */
}