/* ============================================================
   ALMÁ PINHEIROS — Design Tokens
   Gerado a partir do Figma: Design Tokens (4207:712)
   ============================================================ */


/* ------------------------------------------------------------
   @font-face — Fontes locais
   ------------------------------------------------------------ */

/* Glowstore */
@font-face {
  font-family: "Glowstore";
  src: url("../fonts/Glowstore.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Luxora Grotesk — Light */
@font-face {
  font-family: "Luxora Grotesk";
  src: url("../fonts/LuxoraGrotesk-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Luxora Grotesk";
  src: url("../fonts/LuxoraGrotesk-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Luxora Grotesk — Book */
@font-face {
  font-family: "Luxora Grotesk";
  src: url("../fonts/LuxoraGrotesk-Book.otf") format("opentype");
  font-weight: 350;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Luxora Grotesk";
  src: url("../fonts/LuxoraGrotesk-BookItalic.otf") format("opentype");
  font-weight: 350;
  font-style: italic;
  font-display: swap;
}

/* Luxora Grotesk — Regular */
@font-face {
  font-family: "Luxora Grotesk";
  src: url("../fonts/LuxoraGrotesk-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Luxora Grotesk";
  src: url("../fonts/LuxoraGrotesk-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}


/* ------------------------------------------------------------
   :root — Variáveis CSS
   ------------------------------------------------------------ */

:root {

  /* ----------------------------------------------------------
     Font Family — $font-family
     ---------------------------------------------------------- */
  --font-family-01: "Glowstore", sans-serif;        /* Display / títulos */
  --font-family-02: "Luxora Grotesk", sans-serif;   /* Body / UI         */


  /* ----------------------------------------------------------
     Font Weight — $font-weight
     ---------------------------------------------------------- */
  --font-weight-light:   300;
  --font-weight-book:    350;
  --font-weight-regular: 400;


  /* ----------------------------------------------------------
     Font Size — $font-size (mobile-first, valores únicos)
     Exceções responsivas indicadas nos comentários.
     ---------------------------------------------------------- */
  --font-size-p-xxs: 0.625rem;  /* 10px — texto legal     */
  --font-size-xxs:  0.625rem;   /* 10px — 🖥️ 💻 📱 10px  */
  --font-size-xs:   0.75rem;    /* 12px — 🖥️ 💻 📱 12px  */
  --font-size-sm:   0.875rem;   /* 14px — 🖥️ 💻 📱 14px  */
  --font-size-base: 1rem;       /* 16px — 🖥️ 💻 📱 16px  */
  --font-size-lg:   1.125rem;   /* 18px — 🖥️ 💻 📱 18px  */
  --font-size-xl:   1.25rem;    /* 20px — 🖥️ 💻 📱 20px  */
  --font-size-xxl:  1.5rem;     /* 24px — 🖥️ 💻 📱 24px  */

  /* H2: 📱 26px | 🖥️ 💻 28px */
  --h2-font-size: 1.625rem;     /* 26px — mobile-first    */

  /* H1: 📱 28px | 🖥️ 💻 32px */
  --h1-font-size: 1.75rem;      /* 28px — mobile-first    */


  /* ----------------------------------------------------------
     Line Height — $line-height
     ---------------------------------------------------------- */
  --line-height-xs:      1.1;   /* 110% */
  --line-height-sm:      1.4;   /* 140% */
  --line-height-default: 1.5;   /* 150% */


  /* ----------------------------------------------------------
     Letter Spacing — $letter-spacing
     ---------------------------------------------------------- */
  --letter-spacing-default: 0.01em;   /*  1% */
  --letter-spacing-md:      0.2em;    /* 20% */
  --letter-spacing-lg:      0.4em;    /* 40% */


  /* ----------------------------------------------------------
     Border Radius — $border-radius
     ---------------------------------------------------------- */
  --border-radius-none:     0;
  --border-radius-pill:     9999px;
  --border-radius-circular: 50%;


  /* ----------------------------------------------------------
     Border Width — $border-width
     ---------------------------------------------------------- */
  --border-width-none:    0;
  --border-width-default: 1px;
  --border-width-md:      2px;


  /* ----------------------------------------------------------
     Opacity — $opacity-level
     ---------------------------------------------------------- */
  --opacity-level-default:          1;      /* 100% */
  --opacity-level-semi-opaque:      0.8;    /*  80% */
  --opacity-level-intense:          0.64;   /*  64% */
  --opacity-level-medium:           0.5;    /*  50% */
  --opacity-level-light:            0.32;   /*  32% */
  --opacity-level-lighter:          0.24;   /*  24% */
  --opacity-level-faint:            0.16;   /*  16% */
  --opacity-level-semi-transparent: 0.08;   /*   8% */
  --opacity-level-none:             0;      /*   0% */


  /* ----------------------------------------------------------
     Shade / Tint — sobreposição de preto e branco
     ---------------------------------------------------------- */
  --shade-level-1: rgba(0, 0, 0, 0.16);   /* 16% preto */
  --shade-level-2: rgba(0, 0, 0, 0.24);   /* 24% preto */
  --tint-level-1:  rgba(255, 255, 255, 0.16);  /* 16% branco */
  --tint-level-2:  rgba(255, 255, 255, 0.24);  /* 24% branco */


  /* ----------------------------------------------------------
     Grid System — $column-grid
     ---------------------------------------------------------- */

  /* Mobile — 360px: 4 colunas, padding 16px, gap 16px */
  --grid-columns-sm:  4;
  --grid-padding-sm:  16px;
  --grid-gap-sm:      16px;

  /* Notebook/Desktop — 1366px+: 12 colunas, padding 64px, gap 32px */
  --grid-columns-lg:  12;
  --grid-padding-lg:  64px;
  --grid-gap-lg:      32px;

  /* Container max-width */
  --container-max: 1366px;


  /* ----------------------------------------------------------
     Brand Colors — $brand-color
     ---------------------------------------------------------- */
  --brand-color-primary:   #0A0405;   /* Quase preto */
  --brand-color-secondary: #EDEBEA;   /* Off-white   */


  /* ----------------------------------------------------------
     Neutral Colors — $white / $black
     ---------------------------------------------------------- */
  --white: #FFFFFF;
  --black: #000000;


  /* ----------------------------------------------------------
     Light & Dark — $light / $dark
     ---------------------------------------------------------- */
  --light: #F7F4F3;
  --dark:  #3B3B3C;


  /* ----------------------------------------------------------
     Feedback Colors — $feedback-color
     ---------------------------------------------------------- */
  --feedback-color-danger:  #DC3545;
  --feedback-color-warning: #FFC107;
  --feedback-color-success: #198754;


  /* ----------------------------------------------------------
     Gradient — $gradient-linear
     $dark com variações de opacidade (efeito vinheta)
     ---------------------------------------------------------- */
  --gradient-linear-1: linear-gradient(
    180deg,
    rgba(59, 59, 60, 0.64)  5%,    /* $dark · opacity-intense  */
    rgba(59, 59, 60, 0.32) 25%,    /* $dark · opacity-light    */
    rgba(59, 59, 60, 0.32) 75%,    /* $dark · opacity-light    */
    rgba(59, 59, 60, 0.64) 95%     /* $dark · opacity-intense  */
  );


  /* ----------------------------------------------------------
     Shadow — $shadow
     ---------------------------------------------------------- */
  --shadow-default: 0 16px 32px 0   rgba(0, 0, 0, 0.16);   /* opacity-faint  */
  --shadow-sm:      0  4px 40px 8px rgba(0, 0, 0, 0.32);   /* opacity-light  */

}


/* ------------------------------------------------------------
   Responsivo — override de font-size para desktop/notebook
   ------------------------------------------------------------ */
@media (min-width: 768px) {
  :root {
    --h2-font-size: 1.75rem;   /* 28px */
    --h1-font-size: 2rem;      /* 32px */
  }
}


/* ============================================================
   FONT TOKENS — Estilos tipográficos compostos
   Fonte: Figma Font Tokens (4207:1340)
   ============================================================ */

/* ------------------------------------------------------------
   Headings — Glowstore / Regular
   ------------------------------------------------------------ */

/* H1 — 📱 28px | 🖥️ 💻 32px */
.text-h1 {
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-regular);
  font-size: var(--h1-font-size);
  line-height: var(--line-height-xs);
  letter-spacing: var(--letter-spacing-default);
}

/* H2 — 📱 26px | 🖥️ 💻 28px */
.text-h2 {
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-regular);
  font-size: var(--h2-font-size);
  line-height: var(--line-height-xs);
  letter-spacing: var(--letter-spacing-default);
}

/* H3 — 24px */
.text-h3 {
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xxl);
  line-height: var(--line-height-xs);
  letter-spacing: var(--letter-spacing-default);
}

/* H4 — 20px — Luxora Grotesk Light */
.text-h4 {
  font-family: var(--font-family-02);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-xs);
  letter-spacing: var(--letter-spacing-default);
}


/* ------------------------------------------------------------
   Subtitle — Glowstore / Regular + Luxora Grotesk / Light
   ------------------------------------------------------------ */

/* Subtitle LG — 18px — Glowstore / Regular */
.text-subtitle-lg {
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-sm);
  letter-spacing: var(--letter-spacing-lg);
}

/* Subtitle — 16px — Luxora Grotesk / Light */
.text-subtitle {
  font-family: var(--font-family-02);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-base);
  line-height: var(--line-height-sm);
  letter-spacing: var(--letter-spacing-lg);
}

/* Subtitle XS — 12px — Luxora Grotesk / Light */
.text-subtitle-xs {
  font-family: var(--font-family-02);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-sm);
  letter-spacing: var(--letter-spacing-lg);
}


/* ------------------------------------------------------------
   Label — Luxora Grotesk / Book ou Regular/Light
   ------------------------------------------------------------ */

/* Label — 16px — Book */
.text-label {
  font-family: var(--font-family-02);
  font-weight: var(--font-weight-book);
  font-size: var(--font-size-base);
  line-height: var(--line-height-sm);
  letter-spacing: var(--letter-spacing-md);
}

/* Label SM — 14px — Book */
.text-label-sm {
  font-family: var(--font-family-02);
  font-weight: var(--font-weight-book);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  letter-spacing: var(--letter-spacing-md);
}

/* Label XS — 12px — Regular (alt: Light) */
.text-label-xs {
  font-family: var(--font-family-02);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-sm);
  letter-spacing: var(--letter-spacing-md);
}

/* Label XXS — 10px — Light */
.text-label-xxs {
  font-family: var(--font-family-02);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-xxs);
  line-height: var(--line-height-sm);
  letter-spacing: var(--letter-spacing-md);
}


/* ------------------------------------------------------------
   Parágrafo — Luxora Grotesk / Light ou Regular/Light
   ------------------------------------------------------------ */

/* P — 16px — Light */
.text-p {
  font-family: var(--font-family-02);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-base);
  line-height: var(--line-height-default);
  letter-spacing: var(--letter-spacing-default);
}

/* P XS — 12px — Regular (alt: Light) */
.text-p-xs {
  font-family: var(--font-family-02);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-default);
  letter-spacing: var(--letter-spacing-default);
}