/* ============================================================
   ESTILO HEXA — Design Tokens
   colors_and_type.css
   ============================================================ */

/* --- Local Brand Fonts -------------------------------------- */
@font-face { font-family: 'Castoro Titling'; src: url('fonts/CastoroTitling-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Dancing Script'; src: url('fonts/DancingScript-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; }
@font-face { font-family: 'Borel'; src: url('fonts/Borel-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Delius Unicase'; src: url('fonts/DeliusUnicase-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Delius Unicase'; src: url('fonts/DeliusUnicase-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Emilys Candy'; src: url('fonts/EmilysCandy-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Gluten'; src: url('fonts/Gluten-VariableFont_slnt_wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal oblique; }
@font-face { font-family: 'Google Sans'; src: url('fonts/GoogleSans-VariableFont_GRAD_opsz_wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; }
@font-face { font-family: 'Google Sans'; src: url('fonts/GoogleSans-Italic-VariableFont_GRAD_opsz_wght.ttf') format('truetype'); font-weight: 100 900; font-style: italic; }
@font-face { font-family: 'Gravitas One'; src: url('fonts/GravitasOne-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Holtwood One SC'; src: url('fonts/HoltwoodOneSC-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Lexend'; src: url('fonts/Lexend-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; }
@font-face { font-family: 'Limelight'; src: url('fonts/Limelight-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Michroma'; src: url('fonts/Michroma-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Mystery Quest'; src: url('fonts/MysteryQuest-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Roboto Serif'; src: url('fonts/RobotoSerif-VariableFont_GRAD_opsz_wdth_wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; }
@font-face { font-family: 'Roboto Serif'; src: url('fonts/RobotoSerif-Italic-VariableFont_GRAD_opsz_wdth_wght.ttf') format('truetype'); font-weight: 100 900; font-style: italic; }

/* ============================================================
   COLOR TOKENS
   ============================================================ */

:root {
  /* Brasil Core */
  --yellow:       #F2C200;
  --yellow-light: #FFD740;
  --yellow-dark:  #C9A000;
  --green:        #009C3B;
  --green-light:  #00C44A;
  --green-dark:   #007A2E;
  --blue:         #003087;
  --blue-light:   #0044BB;
  --royal-blue:   #0033A0;
  --royal-blue-vivid: #1144CC;

  /* Gold / Metallic */
  --gold:         #C9A84C;
  --gold-light:   #E2C06A;
  --gold-dark:    #9E7C28;
  --gold-marble:  #D4AF37;

  /* Dark / Luxury */
  --black:        #0A0A0A;
  --charcoal:     #1C1C1E;
  --stone:        #3A3A3C;
  --ash:          #5A5A5C;
  --smoke:        #8A8A8C;

  /* Neutrals */
  --white:        #FAFAFA;
  --off-white:    #F0EDEA;
  --light-grey:   #C8C8C8;
  --mid-grey:     #9A9A9A;

  /* Special */
  --marble-dark:  #2A2826;
  --marble-mid:   #3D3B38;

  /* --------------------------------------------------------- */
  /* SEMANTIC TOKENS                                           */
  /* --------------------------------------------------------- */

  /* Surfaces */
  --surface-base:     var(--black);
  --surface-raised:   var(--charcoal);
  --surface-overlay:  var(--stone);

  /* Foreground */
  --fg-primary:       var(--white);
  --fg-secondary:     var(--light-grey);
  --fg-muted:         var(--smoke);
  --fg-on-yellow:     var(--black);
  --fg-on-blue:       var(--white);

  /* Brand accent */
  --accent:           var(--yellow);
  --accent-alt:       var(--gold);
  --cta:              var(--royal-blue);
  --cta-hover:        var(--blue-light);

  /* Borders */
  --border-subtle:    rgba(255,255,255,0.08);
  --border-accent:    rgba(201,168,76,0.4);
  --border-strong:    rgba(255,255,255,0.2);

  /* Shadows */
  --shadow-card:      0 4px 24px rgba(0,0,0,0.6);
  --shadow-gold:      0 0 20px rgba(201,168,76,0.3);
  --shadow-blue:      0 0 20px rgba(0,51,160,0.4);

  /* --------------------------------------------------------- */
  /* TYPOGRAPHY TOKENS                                         */
  /* --------------------------------------------------------- */

  /* Font families */
  --font-display:     'Castoro Titling', Georgia, serif;
  --font-display-alt: 'Holtwood One SC', Georgia, serif;
  --font-display-tech:'Michroma', monospace;
  --font-display-art: 'Limelight', Georgia, serif;
  --font-display-heavy:'Gravitas One', Georgia, serif;
  --font-script:      'Dancing Script', cursive;
  --font-decorative:  'Borel', cursive;
  --font-mystery:     'Mystery Quest', cursive;
  --font-unicase:     'Delius Unicase', cursive;
  --font-festive:     'Emilys Candy', cursive;
  --font-rounded:     'Gluten', cursive;
  --font-ui:          'Google Sans', system-ui, sans-serif;
  --font-body-serif:  'Roboto Serif', Georgia, serif;
  --font-readable:    'Lexend', system-ui, sans-serif;

  /* Type scale */
  --text-hero:    clamp(64px, 8vw, 120px);
  --text-h1:      clamp(40px, 5vw, 72px);
  --text-h2:      clamp(28px, 3.5vw, 48px);
  --text-h3:      clamp(20px, 2.5vw, 32px);
  --text-h4:      20px;
  --text-body:    16px;
  --text-small:   14px;
  --text-label:   11px;

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.15em;

  /* Line heights */
  --leading-tight:  1.1;
  --leading-normal: 1.5;
  --leading-loose:  1.8;

  /* --------------------------------------------------------- */
  /* SPACING TOKENS (8px grid)                                 */
  /* --------------------------------------------------------- */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  80px;
  --space-10: 120px;

  /* --------------------------------------------------------- */
  /* RADII                                                     */
  /* --------------------------------------------------------- */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* --------------------------------------------------------- */
  /* TRANSITIONS                                               */
  /* --------------------------------------------------------- */

  --ease-standard: 0.3s ease;
  --ease-enter:    0.4s cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-exit:     0.2s cubic-bezier(0.4, 0.0, 1, 1);
}

/* ============================================================
   BASE SEMANTIC STYLES
   ============================================================ */

.hexa-h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg-primary);
}

.hexa-h2 {
  font-family: var(--font-ui);
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-primary);
}

.hexa-h3 {
  font-family: var(--font-ui);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-secondary);
}

.hexa-body {
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--fg-secondary);
}

.hexa-body-serif {
  font-family: var(--font-body-serif);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-loose);
  color: var(--fg-secondary);
}

.hexa-label {
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.hexa-script {
  font-family: var(--font-script);
  font-weight: 700;
  color: var(--accent);
}

.hexa-display {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}