/* ============================================================================
   ELITE-DS — Elite Roleplay Design System
   ----------------------------------------------------------------------------
   Shared, presentation-only design system for eliterp.gg (home + loja).
   São Paulo urban / police RP identity: warm red on warm black, tactical
   condensed signage type, siren + hazard motifs.

   NAMESPACE CONTRACT (collision-free with the legacy [data-elite-surface] layer):
     • Tokens : --eds-*
     • Classes: .eds-*
   Consume alongside any existing stylesheet — nothing here leaks onto bare
   element selectors except an opt-in .eds-scope helper. No JS required.

   Fonts: Anton (DISPLAY-ONLY, sparingly) · Oswald (headings/labels) · Inter (body)
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------ */
:root {
  /* --- Brand: warm red family --- */
  --eds-red:          #ff2e2e;   /* brand primary */
  --eds-red-400:      #ff5a55;   /* light / hover text */
  --eds-red-500:      #ff2e2e;
  --eds-red-600:      #e21c1c;   /* hover surface */
  --eds-red-700:      #b81414;   /* active / pressed */
  --eds-red-800:      #7f1414;   /* deep blood */
  --eds-red-tint:     #2a1012;   /* red-tinted panel */
  --eds-red-glow:     rgba(255, 46, 46, .45);

  /* --- Brand: warm black family --- */
  --eds-black:        #0c0809;   /* base ground */
  --eds-black-900:    #0c0809;
  --eds-black-800:    #120c0d;
  --eds-black-700:    #1a1214;   /* panel */
  --eds-black-600:    #241a1c;   /* elevated panel */
  --eds-black-500:    #2f2225;   /* hover elev */
  --eds-ink:          #0c0809;

  /* --- Neutrals (warm) --- */
  --eds-white:        #f8f5f4;
  --eds-text:         #f1ecea;   /* primary text on dark */
  --eds-text-muted:   #b6aba9;   /* secondary text */
  --eds-text-dim:     #877d7b;   /* metadata / captions */
  --eds-text-invert:  #140d0e;   /* text on light/red surfaces */
  --eds-line:         rgba(248, 245, 244, .09);
  --eds-line-strong:  rgba(248, 245, 244, .17);

  /* --- State --- */
  --eds-success:      #35d07f;
  --eds-success-deep: #1c9a5b;
  --eds-warning:      #ffb020;
  --eds-danger:       #ff3b3b;
  --eds-info:         #3d9bff;
  --eds-siren-blue:   #2b6bff;   /* police duotone accent (siren) */

  /* --- Type: families --- */
  --eds-font-display: 'Anton', 'Oswald', 'Arial Narrow', sans-serif;   /* DISPLAY ONLY */
  --eds-font-head:    'Oswald', 'Arial Narrow', system-ui, sans-serif; /* headings, labels */
  --eds-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --eds-font-mono:    ui-monospace, 'SFMono-Regular', 'JetBrains Mono', 'Consolas', monospace;

  /* --- Type: fluid scale --- */
  --eds-fs-xs:    0.75rem;                              /* 12px */
  --eds-fs-sm:    0.8125rem;                            /* 13px */
  --eds-fs-base:  0.9375rem;                            /* 15px */
  --eds-fs-md:    clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --eds-fs-lg:    clamp(1.15rem, 1.05rem + 0.6vw, 1.4rem);
  --eds-fs-xl:    clamp(1.4rem, 1.2rem + 1.1vw, 2rem);
  --eds-fs-2xl:   clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
  --eds-fs-3xl:   clamp(2.6rem, 1.6rem + 4.6vw, 4.75rem);
  --eds-fs-display: clamp(3.4rem, 2rem + 7vw, 8rem);   /* Anton hero moments */

  /* --- Type: rhythm --- */
  --eds-lh-tight:  1.02;
  --eds-lh-head:   1.12;
  --eds-lh-body:   1.7;
  --eds-tracking-tight:  -0.02em;
  --eds-tracking-label:  0.16em;   /* wide-tracked tactical labels */

  /* --- Spacing --- */
  --eds-space-0:   0;
  --eds-space-1:   0.25rem;
  --eds-space-2:   0.5rem;
  --eds-space-3:   0.75rem;
  --eds-space-4:   1rem;
  --eds-space-5:   1.5rem;
  --eds-space-6:   2rem;
  --eds-space-7:   3rem;
  --eds-space-8:   4rem;
  --eds-space-section: clamp(3.5rem, 2rem + 6vw, 7rem);
  --eds-wrap: 1400px;

  /* --- Radii --- */
  --eds-radius-sm:   6px;
  --eds-radius-md:   10px;
  --eds-radius-lg:   16px;
  --eds-radius-pill: 999px;
  --eds-radius-sharp: 2px;   /* editorial / tactical hard edge */

  /* --- Shadows --- */
  --eds-shadow-sm:  0 2px 8px rgba(0, 0, 0, .35);
  --eds-shadow-md:  0 12px 34px rgba(0, 0, 0, .45);
  --eds-shadow-lg:  0 28px 70px rgba(0, 0, 0, .55);
  --eds-shadow-red: 0 10px 34px rgba(255, 46, 46, .28);

  /* --- Motion --- */
  --eds-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --eds-ease-snap: cubic-bezier(0.77, 0, 0.175, 1);
  --eds-dur-fast:  180ms;
  --eds-dur-mid:   320ms;
}

/* ---------------------------------------------------------------------------
   2. OPT-IN SCOPE HELPER
   Apply .eds-scope to a wrapper (or <body>) to get the DS ground + body type
   without forcing it globally. Purely optional — tokens/components work alone.
   ------------------------------------------------------------------------ */
.eds-scope {
  background: var(--eds-black-900);
  color: var(--eds-text);
  font-family: var(--eds-font-body);
  font-size: var(--eds-fs-base);
  line-height: var(--eds-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.eds-scope ::selection { background: var(--eds-red); color: var(--eds-white); }

/* Shared typographic helpers (opt-in classes, never bare tags) */
.eds-display {
  font-family: var(--eds-font-display);
  font-weight: 400;
  font-size: var(--eds-fs-display);
  line-height: var(--eds-lh-tight);
  letter-spacing: var(--eds-tracking-tight);
  text-transform: uppercase;
  text-wrap: balance;
}
.eds-h1 { font-family: var(--eds-font-head); font-weight: 700; font-size: var(--eds-fs-3xl); line-height: var(--eds-lh-head); letter-spacing: var(--eds-tracking-tight); text-wrap: balance; }
.eds-h2 { font-family: var(--eds-font-head); font-weight: 600; font-size: var(--eds-fs-2xl); line-height: var(--eds-lh-head); letter-spacing: var(--eds-tracking-tight); text-wrap: balance; }
.eds-h3 { font-family: var(--eds-font-head); font-weight: 600; font-size: var(--eds-fs-xl); line-height: 1.2; }
.eds-body { font-family: var(--eds-font-body); font-size: var(--eds-fs-md); line-height: var(--eds-lh-body); color: var(--eds-text-muted); max-width: 68ch; }
.eds-label {
  font-family: var(--eds-font-head);
  font-weight: 600;
  font-size: var(--eds-fs-xs);
  letter-spacing: var(--eds-tracking-label);
  text-transform: uppercase;
  color: var(--eds-text-dim);
}
.eds-accent { color: var(--eds-red); }

/* ---------------------------------------------------------------------------
   3. BUTTONS  —  .eds-btn  +  --primary | --secondary | --ghost
   ------------------------------------------------------------------------ */
.eds-btn {
  --_pad-y: 0.85em;
  --_pad-x: 1.6em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: var(--_pad-y) var(--_pad-x);
  font-family: var(--eds-font-head);
  font-weight: 600;
  font-size: var(--eds-fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--eds-radius-md);
  cursor: pointer;
  user-select: none;
  transition: transform var(--eds-dur-fast) var(--eds-ease-out),
              background var(--eds-dur-fast) var(--eds-ease-out),
              border-color var(--eds-dur-fast) var(--eds-ease-out),
              box-shadow var(--eds-dur-fast) var(--eds-ease-out),
              color var(--eds-dur-fast) var(--eds-ease-out);
}
.eds-btn:hover { transform: translateY(-2px); }
.eds-btn:active { transform: translateY(0); }
.eds-btn:focus-visible { outline: 2px solid var(--eds-red-400); outline-offset: 3px; }
.eds-btn--sm { --_pad-y: 0.6em; --_pad-x: 1.1em; font-size: var(--eds-fs-xs); }
.eds-btn--lg { --_pad-y: 1.05em; --_pad-x: 2.1em; font-size: var(--eds-fs-base); }
.eds-btn--block { display: flex; width: 100%; }

.eds-btn--primary {
  background: var(--eds-red);
  color: var(--eds-white);
  box-shadow: var(--eds-shadow-red);
}
.eds-btn--primary:hover { background: var(--eds-red-600); box-shadow: 0 16px 40px var(--eds-red-glow); }
.eds-btn--primary:active { background: var(--eds-red-700); }

.eds-btn--secondary {
  background: var(--eds-black-600);
  color: var(--eds-text);
  border-color: var(--eds-line-strong);
}
.eds-btn--secondary:hover { background: var(--eds-black-500); border-color: var(--eds-red); color: var(--eds-white); }

.eds-btn--ghost {
  background: transparent;
  color: var(--eds-text-muted);
  border-color: var(--eds-line-strong);
}
.eds-btn--ghost:hover { color: var(--eds-white); border-color: var(--eds-red); background: rgba(255, 46, 46, .07); }

.eds-btn[disabled], .eds-btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
}

/* ---------------------------------------------------------------------------
   4. CARD  —  .eds-card
   ------------------------------------------------------------------------ */
.eds-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--eds-space-3);
  padding: var(--eds-space-5);
  background: var(--eds-black-700);
  border: 1px solid var(--eds-line);
  border-radius: var(--eds-radius-lg);
  box-shadow: var(--eds-shadow-sm);
  transition: transform var(--eds-dur-mid) var(--eds-ease-out),
              border-color var(--eds-dur-mid) var(--eds-ease-out),
              box-shadow var(--eds-dur-mid) var(--eds-ease-out);
}
.eds-card--hover:hover { transform: translateY(-4px); border-color: var(--eds-line-strong); box-shadow: var(--eds-shadow-md); }
.eds-card--flush { padding: 0; overflow: hidden; }
.eds-card__title { font-family: var(--eds-font-head); font-weight: 600; font-size: var(--eds-fs-lg); line-height: 1.25; color: var(--eds-text); }
.eds-card__text  { font-family: var(--eds-font-body); font-size: var(--eds-fs-base); line-height: var(--eds-lh-body); color: var(--eds-text-muted); }

/* ============================================================================
   5. PROPRIETARY COMPONENT FAMILY  —  SP / urban-police identity
   ========================================================================= */

/* --- 5a. SIREN FRAME CARD  —  .eds-siren -------------------------------------
   A card wearing a police light-bar: a sweeping red beacon along the top edge
   and tactical corner ticks. Add .eds-siren--duo for the red/blue duotone
   siren. Wrap any content (stats, offer, notice) that must read "official".   */
.eds-siren {
  --_siren-a: var(--eds-red);
  --_siren-b: var(--eds-red-700);
  position: relative;
  padding: var(--eds-space-5);
  padding-top: calc(var(--eds-space-5) + 6px);
  background: linear-gradient(180deg, var(--eds-black-700), var(--eds-black-800));
  border: 1px solid var(--eds-line-strong);
  border-radius: var(--eds-radius-lg);
  overflow: hidden;
  isolation: isolate;
}
/* the light bar */
.eds-siren::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--_siren-a), var(--_siren-b), var(--_siren-a), var(--_siren-b));
  background-size: 250% 100%;
  animation: eds-siren-sweep 2.4s linear infinite;
}
/* soft beacon glow bleeding down from the bar */
.eds-siren::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 120px;
  background: radial-gradient(120% 100% at 15% 0, var(--_siren-a), transparent 60%);
  opacity: .16;
  pointer-events: none;
  z-index: -1;
  animation: eds-siren-pulse 2.4s ease-in-out infinite;
}
.eds-siren--duo { --_siren-a: var(--eds-red); --_siren-b: var(--eds-siren-blue); }
.eds-siren__label {  /* optional tactical eyebrow inside the frame */
  font-family: var(--eds-font-head);
  font-weight: 600;
  font-size: var(--eds-fs-xs);
  letter-spacing: var(--eds-tracking-label);
  text-transform: uppercase;
  color: var(--eds-red-400);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.eds-siren__label::before {  /* pulsing beacon dot */
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--eds-red);
  box-shadow: 0 0 0 0 var(--eds-red-glow);
  animation: eds-beacon 1.6s var(--eds-ease-out) infinite;
}
@keyframes eds-siren-sweep { to { background-position: 250% 0; } }
@keyframes eds-siren-pulse { 0%,100% { opacity: .10; } 50% { opacity: .22; } }
@keyframes eds-beacon {
  0%   { box-shadow: 0 0 0 0 var(--eds-red-glow); }
  70%  { box-shadow: 0 0 0 9px rgba(255,46,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,46,46,0); }
}

/* --- 5b. RANK BADGE  —  .eds-rank -------------------------------------------
   Insignia chip for patente / hierarquia / store tiers. Chevron insignia + a
   condensed uppercase label. Tier modifiers set the metal:
   --bronze | --prata | --ouro | --elite.                                      */
.eds-rank {
  --_metal:  var(--eds-text-muted);
  --_metal2: var(--eds-text-dim);
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.4em 0.85em 0.4em 0.7em;
  background: var(--eds-black-600);
  border: 1px solid var(--eds-line-strong);
  border-left: 3px solid var(--_metal);
  border-radius: var(--eds-radius-sm);
  font-family: var(--eds-font-head);
  font-weight: 600;
  font-size: var(--eds-fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eds-text);
  line-height: 1;
  white-space: nowrap;
}
/* stacked-chevron insignia drawn in CSS */
.eds-rank::before {
  content: "";
  width: 12px; height: 12px;
  background:
    linear-gradient(135deg, transparent 45%, var(--_metal) 45%, var(--_metal) 60%, transparent 60%),
    linear-gradient(135deg, transparent 70%, var(--_metal2) 70%, var(--_metal2) 85%, transparent 85%);
  transform: rotate(-90deg);
  flex: none;
}
.eds-rank--bronze { --_metal: #c8794a; --_metal2: #8a4f2e; }
.eds-rank--prata  { --_metal: #cfd3d8; --_metal2: #939aa2; }
.eds-rank--ouro   { --_metal: #f2c14e; --_metal2: #c2911f; }
.eds-rank--elite  { --_metal: var(--eds-red); --_metal2: var(--eds-red-700); color: #fff; }
.eds-rank--lg { font-size: var(--eds-fs-sm); padding: 0.55em 1em 0.55em 0.85em; }

/* --- 5c. URBAN DIVIDER  —  .eds-divider -------------------------------------
   Section break carrying the hazard-tape / police-cordon motif. Default is a
   diagonal red hazard band; .eds-divider--line is a thin rule with a centered
   siren node for quieter breaks.                                              */
.eds-divider {
  position: relative;
  height: 14px;
  width: 100%;
  border: 0;
  margin: var(--eds-space-6) 0;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--eds-red) 0, var(--eds-red) 14px,
    var(--eds-black-900) 14px, var(--eds-black-900) 28px
  );
  background-size: 40px 40px;
  opacity: .9;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  animation: eds-hazard-scroll 14s linear infinite;
}
@keyframes eds-hazard-scroll { to { background-position: 40px 0; } }

.eds-divider--line {
  height: 1px;
  background: var(--eds-line-strong);
  background-image: none;
  -webkit-mask-image: none; mask-image: none;
  animation: none;
  overflow: visible;
  opacity: 1;
}
.eds-divider--line::before {  /* centered siren node */
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 9px;
  transform: translate(-50%, -50%);
  background: var(--eds-red);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--eds-black-900), 0 0 16px var(--eds-red-glow);
}
.eds-divider--tape {  /* thicker cordon band for major section gates */
  height: 22px;
  background-size: 62px 62px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--eds-red) 0, var(--eds-red) 22px,
    var(--eds-black-800) 22px, var(--eds-black-800) 44px
  );
}

/* ---------------------------------------------------------------------------
   6. ACCESSIBILITY  —  honor reduced-motion
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .eds-siren::before,
  .eds-siren::after,
  .eds-siren__label::before,
  .eds-divider {
    animation: none !important;
  }
  .eds-btn, .eds-card { transition: none; }
}