/* ═══════════════════════════════════════════════════════════════
   MATAVELLI GRANITOS — Design Tokens
   Fusão criativa: CS3 × Matavelli
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ─── PALETA DE CORES ─── */

  /* Primárias — Azul pedra (herança Matavelli + influência CS3) */
  --cor-primaria:          #0E5B94;
  --cor-primaria-clara:    #1A7ABF;
  --cor-primaria-escura:   #083D66;
  --cor-primaria-profunda: #051E38;

  /* Secundárias — Dourado/Âmbar (toque luxuoso CS3 + calor da pedra) */
  --cor-secundaria:        #C6963C;
  --cor-secundaria-clara:  #DABB77;
  --cor-secundaria-escura: #9E7228;

  /* Neutras — Escala sofisticada */
  --cor-preto:             #0A0E14;
  --cor-grafite:           #1A1F28;
  --cor-carvao:            #2C3340;
  --cor-cinza-escuro:      #4A5568;
  --cor-cinza:             #6B7B8D;
  --cor-cinza-claro:       #A0AEC0;
  --cor-prata:             #CBD5E0;
  --cor-neve:              #E8EDF2;
  --cor-gelo:              #F0F4F8;
  --cor-branco:            #FFFFFF;

  /* Tons de superfície — Beges inspirados em pedras naturais */
  --cor-marmore:           #F7F3EE;
  --cor-travertino:        #EDE6DA;
  --cor-arenito:           #E0D5C4;
  --cor-granito:           #C9BAA3;

  /* Tons de destaque — Para estados e feedback */
  --cor-sucesso:           #2D8659;
  --cor-alerta:            #D4922A;
  --cor-erro:              #C53030;
  --cor-info:              #2B6CB0;

  /* ─── GRADIENTES ─── */
  --grad-hero:             linear-gradient(145deg, var(--cor-primaria-profunda) 0%, #0B3A5C 35%, var(--cor-primaria-escura) 70%, #0D4A70 100%);
  --grad-hero-overlay:     linear-gradient(135deg, rgba(5,30,56,0.95) 0%, rgba(14,91,148,0.4) 50%, rgba(8,61,102,0.85) 100%);
  --grad-dourado:          linear-gradient(135deg, var(--cor-secundaria-escura) 0%, var(--cor-secundaria) 50%, var(--cor-secundaria-clara) 100%);
  --grad-pedra:            linear-gradient(160deg, var(--cor-marmore) 0%, var(--cor-travertino) 50%, var(--cor-arenito) 100%);
  --grad-superficie:       linear-gradient(180deg, var(--cor-branco) 0%, var(--cor-marmore) 100%);
  --grad-escuro:           linear-gradient(180deg, var(--cor-preto) 0%, var(--cor-grafite) 100%);
  --grad-texto-brilho:     linear-gradient(135deg, var(--cor-secundaria-clara) 0%, var(--cor-secundaria) 40%, var(--cor-secundaria-escura) 100%);

  /* ─── TIPOGRAFIA ─── */

  /* Fontes — Serif editorial + Sans geométrica */
  --fonte-serif:           'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --fonte-sans:            'Outfit', 'DM Sans', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --fonte-mono:            'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Tamanhos — Escala modular (ratio ~1.25) */
  --texto-xs:              0.75rem;     /* 12px */
  --texto-sm:              0.875rem;    /* 14px */
  --texto-base:            1rem;        /* 16px */
  --texto-md:              1.125rem;    /* 18px */
  --texto-lg:              1.25rem;     /* 20px */
  --texto-xl:              1.5rem;      /* 24px */
  --texto-2xl:             1.875rem;    /* 30px */
  --texto-3xl:             2.25rem;     /* 36px */
  --texto-4xl:             3rem;        /* 48px */
  --texto-5xl:             3.75rem;     /* 60px */
  --texto-6xl:             4.5rem;      /* 72px */
  --texto-hero:            clamp(3rem, 6vw, 5.5rem);

  /* Pesos */
  --peso-fino:             200;
  --peso-leve:             300;
  --peso-normal:           400;
  --peso-medio:            500;
  --peso-semi:             600;
  --peso-bold:             700;
  --peso-extra:            800;

  /* Line heights */
  --lh-apertado:           1;
  --lh-titulo:             1.1;
  --lh-subtitulo:          1.3;
  --lh-texto:              1.7;
  --lh-relaxado:           1.9;

  /* Letter spacings */
  --ls-apertado:           -0.03em;
  --ls-titulo:             -0.02em;
  --ls-normal:             0;
  --ls-largo:              0.08em;
  --ls-extra:              0.15em;
  --ls-ultra:              0.3em;

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

  /* Padding de seção */
  --secao-py:              clamp(4rem, 8vw, 7rem);
  --secao-px:              clamp(1.5rem, 5vw, 5rem);

  /* ─── BORDAS & RAIOS ─── */
  --raio-sm:               0.25rem;
  --raio-md:               0.5rem;
  --raio-lg:               0.75rem;
  --raio-xl:               1rem;
  --raio-2xl:              1.5rem;
  --raio-total:            9999px;

  --borda-fina:            1px;
  --borda-media:           2px;
  --borda-grossa:          3px;

  /* ─── SOMBRAS ─── */
  --sombra-sutil:          0 1px 3px rgba(10,14,20,0.06), 0 1px 2px rgba(10,14,20,0.04);
  --sombra-media:          0 4px 12px rgba(10,14,20,0.08), 0 2px 4px rgba(10,14,20,0.04);
  --sombra-forte:          0 12px 40px rgba(10,14,20,0.12), 0 4px 12px rgba(10,14,20,0.06);
  --sombra-elevada:        0 24px 64px rgba(10,14,20,0.16), 0 8px 24px rgba(10,14,20,0.08);
  --sombra-dourada:        0 8px 32px rgba(198,150,60,0.2), 0 2px 8px rgba(198,150,60,0.1);
  --sombra-azul:           0 8px 32px rgba(14,91,148,0.2), 0 2px 8px rgba(14,91,148,0.1);
  --sombra-interna:        inset 0 2px 8px rgba(10,14,20,0.06);

  /* ─── TRANSIÇÕES ─── */
  --trans-rapida:          150ms ease;
  --trans-normal:          300ms ease;
  --trans-suave:           500ms cubic-bezier(0.4, 0, 0.2, 1);
  --trans-elastica:        600ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --trans-lenta:           800ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Z-INDEX ─── */
  --z-base:                0;
  --z-elevado:             10;
  --z-dropdown:            100;
  --z-sticky:              200;
  --z-header:              300;
  --z-overlay:             400;
  --z-modal:               500;
  --z-toast:               600;
  --z-topo:                9999;

  /* ─── LARGURAS MÁXIMAS ─── */
  --max-w-texto:           42rem;       /* ~672px — ideal para leitura */
  --max-w-conteudo:        72rem;       /* ~1152px */
  --max-w-largo:           80rem;       /* ~1280px */
  --max-w-total:           90rem;       /* ~1440px */

  /* ─── OPACIDADES ─── */
  --opacidade-sutil:       0.06;
  --opacidade-leve:        0.15;
  --opacidade-media:       0.4;
  --opacidade-forte:       0.7;
  --opacidade-quase:       0.9;
}

/* ═══════════════════════════════════════════════════════════════
   TEMA ESCURO (Dark Mode)
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root {
    --cor-superficie-1:    var(--cor-preto);
    --cor-superficie-2:    var(--cor-grafite);
    --cor-superficie-3:    var(--cor-carvao);
    --cor-texto-primario:  var(--cor-neve);
    --cor-texto-secundario:var(--cor-cinza-claro);
    --cor-texto-terciario: var(--cor-cinza);
    --cor-borda:           rgba(255,255,255,0.08);
    --cor-borda-hover:     rgba(255,255,255,0.15);
  }
}

/* ═══════════════════════════════════════════════════════════════
   TEMA CLARO (Light Mode — padrão)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --cor-superficie-1:      var(--cor-branco);
  --cor-superficie-2:      var(--cor-marmore);
  --cor-superficie-3:      var(--cor-travertino);
  --cor-texto-primario:    var(--cor-preto);
  --cor-texto-secundario:  var(--cor-cinza-escuro);
  --cor-texto-terciario:   var(--cor-cinza);
  --cor-borda:             rgba(10,14,20,0.08);
  --cor-borda-hover:       rgba(10,14,20,0.18);
}