/* ============================================================
   GARDS COCKTAIL BAR — Design Tokens
   colors_and_type.css
   ============================================================ */

@font-face {
  font-family: 'Acme Gothic Wide';
  src: url('./fonts/Acme-Gothic-Wide-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Acme Gothic Wide';
  src: url('./fonts/Acme-Gothic-Wide-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Acme Gothic Wide';
  src: url('./fonts/Acme-Gothic-Wide-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Acme Gothic Wide';
  src: url('./fonts/Acme-Gothic-Wide-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Acme Gothic Wide';
  src: url('./fonts/Acme-Gothic-Wide-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Filmotype Yale';
  src: url('./fonts/Filmotype-Yale.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Outfit';
  src: url('./fonts/Outfit-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}

/* ============================================================
   BASE COLOR PALETTE
   ============================================================ */
:root {
  /* Brand Colors */
  --color-preto:        #191919;
  --color-creme:        #ded2c9;
  --color-laranja:      #d6522d;
  --color-verde:        #2f372b;
  --color-verde-limao:  #99e626;  /* CMYK C40 M10 Y85 K0 — valor definitivo */

  /* Extended tones */
  --color-preto-soft:   #242424;   /* slightly lighter surface */
  --color-creme-dim:    rgba(222, 210, 201, 0.55);  /* creme at lower opacity */
  --color-laranja-dark: #b8411f;   /* pressed/hover darken */
  --color-verde-light:  #3d4a35;   /* lighter verde surface */

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

  /* Backgrounds */
  --bg-primary:         var(--color-preto);
  --bg-surface:         var(--color-preto-soft);
  --bg-surface-alt:     var(--color-verde);
  --bg-invert:          var(--color-creme);

  /* Foregrounds */
  --fg-primary:         var(--color-creme);
  --fg-secondary:       rgba(222, 210, 201, 0.65);
  --fg-tertiary:        rgba(222, 210, 201, 0.38);
  --fg-invert:          var(--color-preto);
  --fg-accent:          var(--color-laranja);
  --fg-accent-alt:      var(--color-verde-limao);

  /* Borders */
  --border-subtle:      rgba(222, 210, 201, 0.18);
  --border-medium:      rgba(222, 210, 201, 0.35);
  --border-strong:      rgba(222, 210, 201, 0.65);

  /* Interactive */
  --interactive-primary:        var(--color-laranja);
  --interactive-primary-hover:  var(--color-laranja-dark);
  --interactive-secondary:      transparent;
  --interactive-focus:          var(--color-creme);

  /* ============================================================
     TYPOGRAPHY FAMILIES
     ============================================================ */
  --font-display:  'Acme Gothic Wide', Georgia, serif;
  --font-script:   'Filmotype Yale', cursive;
  --font-body:     'Outfit', system-ui, sans-serif;

  /* ============================================================
     TYPE SCALE (fluid-ish, rem base = 16px)
     ============================================================ */
  --text-xs:    0.75rem;    /* 12px — fine print, captions */
  --text-sm:    0.875rem;   /* 14px — secondary labels */
  --text-base:  1rem;       /* 16px — body default */
  --text-md:    1.125rem;   /* 18px — slightly larger body */
  --text-lg:    1.25rem;    /* 20px — section intro */
  --text-xl:    1.5rem;     /* 24px — sub-headings */
  --text-2xl:   2rem;       /* 32px — section titles */
  --text-3xl:   2.75rem;    /* 44px — headings */
  --text-4xl:   3.75rem;    /* 60px — hero sub */
  --text-5xl:   5rem;       /* 80px — hero display */
  --text-6xl:   7rem;       /* 112px — statement display */

  /* ============================================================
     LETTER SPACING
     ============================================================ */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.22em;

  /* ============================================================
     LINE HEIGHTS
     ============================================================ */
  --leading-tight:    1.1;
  --leading-snug:     1.3;
  --leading-normal:   1.5;
  --leading-relaxed:  1.7;

  /* ============================================================
     SPACING SCALE
     ============================================================ */
  --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:   96px;
  --space-10:  128px;
  --space-11:  192px;
  --space-12:  256px;

  /* ============================================================
     BORDER RADIUS
     ============================================================ */
  --radius-none:  0px;
  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-pill:  100px;

  /* ============================================================
     SHADOWS & ELEVATION
     ============================================================ */
  --shadow-none:     none;
  --shadow-card:     0 2px 24px rgba(0, 0, 0, 0.45);
  --shadow-elevated: 0 8px 40px rgba(0, 0, 0, 0.70);

  /* ============================================================
     TRANSITIONS
     ============================================================ */
  --ease-brand:    cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */
  --duration-fast: 200ms;  /* @kind other */
  --duration-base: 350ms;  /* @kind other */
  --duration-slow: 600ms;  /* @kind other */
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-primary);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-primary);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-primary);
}

.script-accent {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

.script-lg {
  font-family: var(--font-script);
  font-size: var(--text-3xl);
}

.script-xl {
  font-family: var(--font-script);
  font-size: var(--text-4xl);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 300;
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}

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

.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 300;
  line-height: var(--leading-normal);
  color: var(--fg-tertiary);
}

/* ============================================================
   BASE RESET (optional include)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg-primary);
  color: var(--fg-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}