/* ============================================================
   DESIGN TOKENS — Vieira Stones / VS Group Rebranding 2024/25
   Versão: 2.0.0
   Última atualização: 2024

   USO: Importe este arquivo como primeiro stylesheet em todos
   os arquivos HTML do pacote de marca:
   <link rel="stylesheet" href="design-system/design-tokens.css">

   Identidades aprovadas:
   - V STONES         (arquivo: vstones-*)
   - V&S GROUP ⭐     (arquivo: vsgroup2-*)  ← recomendada
   - V&S STONES       (arquivo: vsstones2-*)

   ATENÇÃO: VS GROUP e VS STONES são marcas registradas no INPI.
   Nunca usar esses nomes em novos materiais.
============================================================ */

/* ============================================================
   1. CORES PRINCIPAIS
============================================================ */
:root {

  /* ── Família Navy (fundos, painéis) ── */
  --navy:        #0B1728;   /* fundo principal escuro         */
  --navy-mid:    #122040;   /* cards, modais, painéis         */
  --navy-lt:     #1B3A6B;   /* destaque azul / borders        */
  --navy-dark:   #060d1a;   /* fundos ultra-escuros, código   */

  /* ── Família Gold (marca, destaque) ── */
  --gold:        #D4AF37;   /* ouro base da marca             */
  --gold-lt:     #F0D060;   /* início do gradiente (topo)     */
  --gold-mid:    #C49B20;   /* ponto médio do gradiente       */
  --gold-dk:     #B8960C;   /* fim do gradiente (base)        */
  --gold-pale:   rgba(212, 175, 55, 0.08);  /* fundo sutil    */
  --gold-border: rgba(212, 175, 55, 0.20);  /* bordas suaves  */
  --gold-border-active: rgba(212, 175, 55, 0.45);  /* hover   */

  /* ── Neutros ── */
  --gray:        #8B96A8;   /* texto secundário, legenda      */
  --gray-lt:     #b0c4de;   /* texto em code blocks           */
  --white:       #F5F4F0;   /* off-white (evitar #FFFFFF puro)*/
  --black:       #070E1A;   /* preto profundo                 */

  /* ── Status ── */
  --danger:      #C0392B;
  --danger-bg:   rgba(192, 57, 43, 0.08);
  --success:     #27AE60;
  --success-bg:  rgba(39, 174, 96, 0.08);
  --warning:     #F39C12;
  --warning-bg:  rgba(243, 156, 18, 0.08);
  --info:        #2980B9;
  --info-bg:     rgba(41, 128, 185, 0.08);
}

/* ============================================================
   2. GRADIENTES (uso frequente)
============================================================ */
:root {

  /* Gradiente ouro principal — use em texto e símbolos */
  --gradient-gold: linear-gradient(
    160deg,
    #F0D060 0%,
    #D4AF37 40%,
    #C49B20 70%,
    #B8960C 100%
  );

  /* Gradiente ouro para botões / backgrounds */
  --gradient-gold-bg: linear-gradient(
    135deg,
    #F0D060 0%,
    #D4AF37 50%,
    #B8960C 100%
  );

  /* Gradiente ouro suave — hover states */
  --gradient-gold-soft: linear-gradient(
    135deg,
    rgba(240, 208, 96, 0.15) 0%,
    rgba(212, 175, 55, 0.05) 100%
  );

  /* Gradiente navy — fundos hero */
  --gradient-navy: linear-gradient(
    180deg,
    #0d1f38 0%,
    #0B1728 100%
  );

  /* Gradiente navy radial — hero com profundidade */
  --gradient-navy-radial: radial-gradient(
    ellipse at 60% 40%,
    rgba(27, 58, 107, 0.35) 0%,
    transparent 70%
  );
}

/* ============================================================
   3. TIPOGRAFIA
============================================================ */
:root {

  /* Famílias */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  system-ui, sans-serif;
  --font-mono:    'Courier New', 'Lucida Console', Courier, monospace;

  /* Pesos */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* Escala Tipográfica — Progressão Major Third (×1.250) */
  /* Base: 16px = 1rem */
  --text-2xs:   0.512rem;  /*  8.19px — micro labels      */
  --text-xs:    0.64rem;   /* 10.24px — captions          */
  --text-sm:    0.8rem;    /* 12.8px  — notas, legendas   */
  --text-base:  1rem;      /* 16px    — corpo padrão      */
  --text-md:    1.25rem;   /* 20px    — lead, destaque    */
  --text-lg:    1.563rem;  /* 25px    — subtítulos        */
  --text-xl:    1.953rem;  /* 31.25px — H3                */
  --text-2xl:   2.441rem;  /* 39px    — H2                */
  --text-3xl:   3.052rem;  /* 48.8px  — H1                */
  --text-4xl:   3.815rem;  /* 61px    — hero              */
  --text-hero:  clamp(3rem, 10vw, 8rem); /* símbolo V    */

  /* Line Heights */
  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
  --leading-loose:  2.0;

  /* Letter Spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.15em;
}

/* ============================================================
   4. ESPAÇAMENTO — Escala 4px
============================================================ */
:root {

  --space-px: 1px;
  --space-0:  0;
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-7:  1.75rem;   /* 28px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-14: 3.5rem;    /* 56px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px*/
}

/* ============================================================
   5. BORDAS E RAIOS
============================================================ */
:root {

  /* Border Radius */
  --radius-none:  0;
  --radius-xs:    4px;
  --radius-sm:    6px;
  --radius-md:    12px;
  --radius-lg:    20px;
  --radius-xl:    32px;
  --radius-2xl:   48px;
  --radius-pill:  100px;
  --radius-full:  9999px;

  /* Border Widths */
  --border-thin:    1px;
  --border-normal:  2px;
  --border-thick:   3px;
  --border-heavy:   4px;

  /* Border Colors */
  --border-subtle:  rgba(212, 175, 55, 0.10);
  --border-default: rgba(212, 175, 55, 0.20);
  --border-strong:  rgba(212, 175, 55, 0.35);
  --border-active:  rgba(212, 175, 55, 0.55);
}

/* ============================================================
   6. SOMBRAS
============================================================ */
:root {

  --shadow-xs:      0 1px 3px rgba(0, 0, 0, 0.20);
  --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md:      0 4px 16px rgba(0, 0, 0, 0.30);
  --shadow-lg:      0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-xl:      0 16px 48px rgba(0, 0, 0, 0.40);
  --shadow-card:    0 4px 24px rgba(0, 0, 0, 0.35);
  --shadow-card-hover: 0 8px 40px rgba(0, 0, 0, 0.50);

  /* Glow gold — destaque premium */
  --shadow-glow:    0 0 30px rgba(212, 175, 55, 0.18);
  --shadow-glow-md: 0 0 50px rgba(212, 175, 55, 0.22);
  --shadow-glow-lg: 0 0 80px rgba(212, 175, 55, 0.28);

  /* Inner shadows */
  --shadow-inner:   inset 0 2px 8px rgba(0, 0, 0, 0.30);
}

/* ============================================================
   7. TRANSIÇÕES E ANIMAÇÕES
============================================================ */
:root {

  /* Durações */
  --duration-instant: 50ms;
  --duration-fast:    150ms;
  --duration-base:    250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;
  --duration-slowest: 1000ms;

  /* Easing */
  --ease-linear:  linear;
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-back:    cubic-bezier(0.36, 0, 0.66, -0.56);

  /* Presets combinados */
  --transition-fast:   150ms cubic-bezier(0, 0, 0.2, 1);
  --transition-base:   250ms cubic-bezier(0, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0, 0, 0.2, 1);
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   8. Z-INDEX
============================================================ */
:root {

  --z-negative:  -1;
  --z-base:       1;
  --z-raised:     5;
  --z-overlay:   10;
  --z-dropdown:  20;
  --z-sticky:    30;
  --z-fixed:     40;
  --z-modal:    100;
  --z-nav:      200;
  --z-toast:    500;
  --z-tooltip:  600;
}

/* ============================================================
   9. LAYOUT
============================================================ */
:root {

  /* Container max-widths */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:  1024px;
  --container-xl:  1100px;
  --container-2xl: 1280px;

  /* Breakpoints (uso em JS, media queries usam os valores diretos) */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  992px;
  --bp-xl: 1200px;

  /* Grid */
  --grid-gap-sm:   0.75rem;
  --grid-gap-md:   1.25rem;
  --grid-gap-lg:   1.75rem;
  --grid-gap-xl:   2.5rem;

  /* Section padding */
  --section-padding: clamp(3rem, 6vw, 5rem);
}

/* ============================================================
   10. CLASSES UTILITÁRIAS — Gold Text Gradient
============================================================ */

/* Texto com gradiente dourado — aplique em spans e headings */
.gold-text {
  background: linear-gradient(160deg, #F0D060 0%, #D4AF37 40%, #C49B20 70%, #B8960C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Fundo dourado sólido — botões, CTAs */
.gold-bg {
  background: linear-gradient(135deg, #F0D060 0%, #D4AF37 50%, #B8960C 100%);
  color: var(--navy);
}

/* Borda dourada padrão */
.gold-border {
  border: 1px solid var(--border-default);
}

/* Borda dourada ativa */
.gold-border-active {
  border: 1px solid var(--border-active);
}

/* Card base — painel com fundo navy-mid */
.brand-card {
  background: var(--navy-mid);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--transition-base),
              transform var(--transition-base),
              box-shadow var(--transition-base);
}

.brand-card:hover {
  border-color: var(--border-active);
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow);
}

/* Label de seção */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-pale);
  border: 1px solid var(--gold-border);
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
}

/* Gold divider line */
.gold-line {
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-lt), var(--gold-dk));
  border-radius: 2px;
  margin: var(--space-3) 0 var(--space-6);
}

/* Gold line full-width */
.gold-rule {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-border), transparent);
  margin: var(--space-8) 0;
}

/* Fade-in animation base */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   11. SVG INLINE — Gradiente Ouro Padrão
   Copie o bloco <defs> abaixo em cada SVG inline do projeto
============================================================ */
/*
  <defs>
    <linearGradient id="goldV" x1="0" y1="0" x2="60" y2="100" gradientUnits="userSpaceOnUse">
      <stop offset="0%"   stop-color="#F0D060"/>
      <stop offset="40%"  stop-color="#D4AF37"/>
      <stop offset="100%" stop-color="#B8960C"/>
    </linearGradient>
  </defs>
  <polygon points="10,10 45,10 55,75 45,10 90,10 55,104" fill="url(#goldV)"/>
*/

/* ============================================================
   12. RESET OPCIONAL — base mínima para uso isolado
   Descomente se este arquivo for usado como stylesheet único
============================================================ */
/*
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--gold);
  text-decoration: none;
}

a:hover {
  color: var(--gold-lt);
}

img, svg {
  max-width: 100%;
  display: block;
}
*/

/* ============================================================
   FIM DO ARQUIVO — design-tokens.css v2.0.0
   VS Group Rebranding 2024/25 · Material Confidencial
============================================================ */