/* =========================================================================
   ELITE PRIME BARBEARIA — Design Tokens
   Premium / Sophisticated / Modern · Palette: Preto · Cobre · Branco
   ========================================================================= */

/* ---------- Font face declarations -------------------------------------- */
/* See /fonts. We use Google Fonts as a fallback CDN when local files
   are not present. Both display + body are Google Font substitutions
   pending the brand-supplied originals.                                    */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Oswald:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* =====================================================================
     COLOR — Brand
     ===================================================================== */

  /* Neutrals — onyx black through bone white */
  --ep-onyx:        #07060A;   /* deepest, used for full bleeds */
  --ep-ink:         #0F0D10;   /* primary surface */
  --ep-coal:        #1A1719;   /* raised card on ink */
  --ep-graphite:    #2A2628;   /* hairline borders on dark */
  --ep-smoke:       #4A4347;   /* muted text on dark */
  --ep-ash:         #8A8285;   /* secondary text on dark */
  --ep-bone:        #E9E3D9;   /* off-white, warm */
  --ep-paper:       #F5F1EA;   /* lightest, warm cream */
  --ep-white:       #FFFFFF;

  /* Copper — the brand's heart */
  --ep-copper-50:   #FBEFE0;
  --ep-copper-100:  #F1D7B2;
  --ep-copper-200:  #E5B780;
  --ep-copper-300:  #D49355;
  --ep-copper-400:  #C2783A;   /* primary copper */
  --ep-copper-500:  #A35F28;
  --ep-copper-600:  #82481C;
  --ep-copper-700:  #5C3214;
  --ep-copper-800:  #3A1F0C;

  /* Semantic foundations */
  --ep-fg-1:        var(--ep-paper);   /* primary text on dark */
  --ep-fg-2:        var(--ep-bone);    /* secondary text on dark */
  --ep-fg-3:        var(--ep-ash);     /* tertiary / captions */
  --ep-fg-inv-1:    var(--ep-ink);     /* primary text on light */
  --ep-fg-inv-2:    #3A3033;
  --ep-fg-inv-3:    #6A5E60;

  --ep-bg-1:        var(--ep-ink);     /* default app surface */
  --ep-bg-2:        var(--ep-coal);    /* raised card */
  --ep-bg-3:        var(--ep-onyx);    /* deepest hero */
  --ep-bg-inv-1:    var(--ep-paper);   /* light surface */
  --ep-bg-inv-2:    var(--ep-bone);

  --ep-accent:      var(--ep-copper-400);
  --ep-accent-soft: var(--ep-copper-300);
  --ep-accent-deep: var(--ep-copper-600);

  --ep-line:        var(--ep-graphite);          /* hairline on dark */
  --ep-line-soft:   rgba(255,255,255,0.08);
  --ep-line-inv:    rgba(15,13,16,0.12);         /* hairline on light */

  --ep-success:     #5E8F62;
  --ep-warn:        #C28A2F;
  --ep-danger:      #B14E3E;

  /* Signature gradient — soft copper light from upper-left */
  --ep-grad-copper-glow:
    radial-gradient(120% 80% at 20% 0%,
      rgba(194,120,58,0.22) 0%,
      rgba(194,120,58,0.04) 40%,
      transparent 70%);
  --ep-grad-copper-shine:
    linear-gradient(180deg,
      #E5B780 0%,
      #C2783A 45%,
      #82481C 100%);
  --ep-grad-ink-vignette:
    radial-gradient(120% 90% at 50% 110%,
      rgba(0,0,0,0.55) 0%,
      transparent 60%);

  /* =====================================================================
     TYPOGRAPHY
     ===================================================================== */

  /* Families — chosen to echo the Elite Prime badge logo: a chunky,
     high-contrast condensed serif for display, a clean condensed caps
     sans for the lockup subtitle, and a modern humanist for body.        */
  --ep-font-display:  'DM Serif Display', 'Times New Roman', serif;          /* chunky display — like "ELITE PRIME" in the badge */
  --ep-font-italic:   'Cormorant Garamond', 'Times New Roman', serif;        /* romantic italic accents */
  --ep-font-mark:     'Oswald', 'Cinzel', serif;                             /* caps subtitle — like "BARBEARIA" in the badge */
  --ep-font-body:     'Manrope', system-ui, -apple-system, sans-serif;
  --ep-font-mono:     'JetBrains Mono', ui-monospace, monospace;

  /* Scale — designed for both print (catalogue, flyers) and 1440 web */
  --ep-text-xs:    11px;
  --ep-text-sm:    13px;
  --ep-text-base:  15px;
  --ep-text-md:    17px;
  --ep-text-lg:    20px;
  --ep-text-xl:    24px;
  --ep-text-2xl:   32px;
  --ep-text-3xl:   44px;
  --ep-text-4xl:   60px;
  --ep-text-5xl:   84px;
  --ep-text-6xl:   120px;

  --ep-leading-tight:  1.08;
  --ep-leading-snug:   1.22;
  --ep-leading-normal: 1.5;
  --ep-leading-loose:  1.75;

  --ep-tracking-tight:  -0.02em;
  --ep-tracking-normal: 0;
  --ep-tracking-wide:   0.08em;
  --ep-tracking-mark:   0.32em;   /* logotype / eyebrow caps */

  /* =====================================================================
     SPACING & RADII
     ===================================================================== */
  --ep-space-1:  4px;
  --ep-space-2:  8px;
  --ep-space-3:  12px;
  --ep-space-4:  16px;
  --ep-space-5:  24px;
  --ep-space-6:  32px;
  --ep-space-7:  48px;
  --ep-space-8:  64px;
  --ep-space-9:  96px;
  --ep-space-10: 128px;

  --ep-radius-none:  0;
  --ep-radius-sm:    2px;
  --ep-radius-md:    4px;
  --ep-radius-lg:    8px;
  --ep-radius-xl:    14px;
  --ep-radius-pill:  999px;

  /* =====================================================================
     ELEVATION & EFFECTS
     ===================================================================== */
  --ep-shadow-1:  0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --ep-shadow-2:  0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 24px -8px rgba(0,0,0,0.55);
  --ep-shadow-3:  0 1px 0 rgba(255,255,255,0.06) inset, 0 20px 60px -20px rgba(0,0,0,0.7);
  --ep-shadow-copper: 0 0 0 1px rgba(194,120,58,0.35),
                      0 12px 40px -12px rgba(194,120,58,0.45);

  --ep-border-hairline: 1px solid var(--ep-line);
  --ep-border-copper:   1px solid var(--ep-copper-400);

  /* Animation — slow, smooth, premium */
  --ep-ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ep-ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --ep-dur-fast:    180ms;
  --ep-dur-base:    320ms;
  --ep-dur-slow:    600ms;
  --ep-dur-cinema:  1200ms;
}

/* ===========================================================================
   SEMANTIC ELEMENT STYLES
   Mixins-as-classes so any HTML can opt in:  <h1 class="ep-h1">…</h1>
   =========================================================================== */

.ep-eyebrow {
  font-family: var(--ep-font-mark);
  font-size: var(--ep-text-xs);
  font-weight: 500;
  letter-spacing: var(--ep-tracking-mark);
  text-transform: uppercase;
  color: var(--ep-accent);
}

.ep-mark {
  font-family: var(--ep-font-mark);
  font-weight: 500;
  letter-spacing: var(--ep-tracking-mark);
  text-transform: uppercase;
}

.ep-display {
  font-family: var(--ep-font-display);
  font-weight: 400;
  line-height: var(--ep-leading-tight);
  letter-spacing: var(--ep-tracking-tight);
}

.ep-display-italic {
  font-family: var(--ep-font-italic);
  font-weight: 500;
  font-style: italic;
  line-height: var(--ep-leading-tight);
  letter-spacing: var(--ep-tracking-tight);
}

.ep-h1 {
  font-family: var(--ep-font-display);
  font-weight: 400;
  font-size: var(--ep-text-5xl);
  line-height: var(--ep-leading-tight);
  letter-spacing: var(--ep-tracking-tight);
}

.ep-h2 {
  font-family: var(--ep-font-display);
  font-weight: 400;
  font-size: var(--ep-text-4xl);
  line-height: var(--ep-leading-tight);
  letter-spacing: var(--ep-tracking-tight);
}

.ep-h3 {
  font-family: var(--ep-font-display);
  font-weight: 400;
  font-size: var(--ep-text-3xl);
  line-height: var(--ep-leading-snug);
  letter-spacing: var(--ep-tracking-tight);
}

.ep-h4 {
  font-family: var(--ep-font-body);
  font-weight: 600;
  font-size: var(--ep-text-xl);
  line-height: var(--ep-leading-snug);
  letter-spacing: 0;
}

.ep-body {
  font-family: var(--ep-font-body);
  font-weight: 400;
  font-size: var(--ep-text-base);
  line-height: var(--ep-leading-normal);
  color: var(--ep-fg-2);
}

.ep-body-lg {
  font-family: var(--ep-font-body);
  font-weight: 400;
  font-size: var(--ep-text-md);
  line-height: var(--ep-leading-normal);
  color: var(--ep-fg-2);
}

.ep-caption {
  font-family: var(--ep-font-body);
  font-weight: 500;
  font-size: var(--ep-text-sm);
  letter-spacing: 0.04em;
  color: var(--ep-fg-3);
}

.ep-mono {
  font-family: var(--ep-font-mono);
  font-size: var(--ep-text-sm);
  letter-spacing: 0;
}

/* Selection */
::selection {
  background: var(--ep-copper-400);
  color: var(--ep-onyx);
}