/* ============================================================
   Herodeals – Design Tokens (tokens.css)
   Single source of truth for ALL design decisions.
   Change once → updated everywhere automatically.
   ============================================================ */

/* ── LOCAL FONTS ─────────────────────────────────────────── */
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {

  /* ── COLORS ──────────────────────────────────────────────── */

  /* Backgrounds */
  --color-bg:             #07090f;
  --color-surface-1:      #0e1219;
  --color-surface-2:      #141922;

  /* Glass surfaces (frosted-glass cards & panels) */
  --color-glass:          rgba(255, 255, 255, 0.04);
  --color-glass-h:        rgba(255, 255, 255, 0.065);
  --color-glass-2:        rgba(255, 255, 255, 0.07);
  --color-glass-edge:     rgba(255, 255, 255, 0.09);
  --color-glass-sheen:    rgba(255, 255, 255, 0.13);

  /* Accent (Gold) */
  --color-accent:         #e8a020;
  --color-accent-h:       #f0b840;               /* hover  */
  --color-accent-subtle:  rgba(232, 160, 32, 0.10);
  --color-accent-border:  rgba(232, 160, 32, 0.30);
  --color-accent-hover-border: rgba(232, 160, 32, 0.35);

  /* Text */
  --color-text:           #f0f2f5;
  --color-muted:          #8a92a6;
  --color-border:         rgba(255, 255, 255, 0.07);

  /* Platform: eBay */
  --color-ebay:           #e53238;
  --color-ebay-subtle:    rgba(229, 50, 56, 0.12);
  --color-ebay-border:    rgba(229, 50, 56, 0.25);
  --color-ebay-hover:     rgba(229, 50, 56, 0.35);

  /* Platform: Amazon */
  --color-amazon:         #ff9900;
  --color-amazon-subtle:  rgba(255, 153, 0, 0.12);
  --color-amazon-border:  rgba(255, 153, 0, 0.25);
  --color-amazon-hover:   rgba(255, 153, 0, 0.35);

  /* Status */
  --color-success:        #2ecc71;
  --color-success-subtle: rgba(46, 204, 113, 0.12);
  --color-success-border: rgba(46, 204, 113, 0.30);
  --color-error:          #e74c3c;
  --color-error-subtle:   rgba(231, 76, 60, 0.12);
  --color-error-border:   rgba(231, 76, 60, 0.30);

  /* ── SPACING (4 px base grid) ────────────────────────────── */
  --sp-1:   0.25rem;   /*   4 px */
  --sp-2:   0.5rem;    /*   8 px */
  --sp-3:   0.75rem;   /*  12 px */
  --sp-4:   1rem;      /*  16 px */
  --sp-5:   1.25rem;   /*  20 px */
  --sp-6:   1.5rem;    /*  24 px */
  --sp-7:   1.75rem;   /*  28 px */
  --sp-8:   2rem;      /*  32 px */
  --sp-10:  2.5rem;    /*  40 px */
  --sp-12:  3rem;      /*  48 px */
  --sp-16:  4rem;      /*  64 px */
  --sp-20:  5rem;      /*  80 px */
  --sp-24:  6rem;      /*  96 px */
  --sp-25:  6.25rem;   /* 100 px */

  /* ── TYPOGRAPHY ──────────────────────────────────────────── */
  --font:          'Inter', sans-serif;

  --text-xs:       0.75rem;    /* 12 px */
  --text-sm:       0.875rem;   /* 14 px */
  --text-base:     1rem;       /* 16 px */
  --text-lg:       1.1rem;     /* ~18 px */
  --text-xl:       1.25rem;    /* 20 px */
  --text-2xl:      1.5rem;     /* 24 px */

  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semi:       600;
  --fw-bold:       700;
  --fw-black:      800;

  /* ── BORDER RADIUS ───────────────────────────────────────── */
  --radius-sm:     6px;
  --radius-md:     10px;
  --radius-lg:     12px;
  --radius-xl:     16px;
  --radius-full:   999px;

  /* ── TRANSITIONS ─────────────────────────────────────────── */
  --t-fast:        0.15s ease;
  --t-base:        0.2s ease;
  --t-slow:        0.3s ease;

  /* ── LAYOUT ──────────────────────────────────────────────── */
  --nav-height:    68px;
  --page-gutter:   6%;
  --section-pad-v: 100px;
}