/* ============================================================
   MEDIA.LEAD — Design Tokens
   Awwwards-level Design System
   ============================================================ */

/* ── Font Face ──────────────────────────────────────────────── */

@font-face {
  font-family: 'Loos Wide';
  src: url('../fonts/loos-wide-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Loos Wide';
  src: url('../fonts/loos-wide-medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Loos Wide';
  src: url('../fonts/loos-wide-bold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Loos Wide';
  src: url('../fonts/loos-wide-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Loos Wide';
  src: url('../fonts/loos-wide-black.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Loos Normal';
  src: url('../fonts/loos-wide-light.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Loos Normal';
  src: url('../fonts/loos-wide-regular.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Loos Normal';
  src: url('../fonts/loos-wide-medium.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ── Root Variables ─────────────────────────────────────────── */

:root {
  /* ── Typography ─────────────────────────────────────────── */
  --font-display: 'Loos Wide', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Loos Normal', 'Inter', system-ui, -apple-system, sans-serif;

  /* Display / Headings — Desktop */
  --type-display-size: 72px;
  --type-display-lh: 80px;
  --type-display-weight: 700;
  --type-display-tracking: -0.02em;

  --type-h1-size: 58px;
  --type-h1-lh: 66px;
  --type-h1-weight: 700;
  --type-h1-tracking: -0.02em;

  --type-h2-size: 48px;
  --type-h2-lh: 56px;
  --type-h2-weight: 700;
  --type-h2-tracking: -0.01em;

  --type-h3-size: 24px;
  --type-h3-lh: 32px;
  --type-h3-weight: 600;
  --type-h3-tracking: 0;

  --type-label-size: 14px;
  --type-label-lh: 20px;
  --type-label-weight: 600;
  --type-label-tracking: 0.08em;

  --type-label-sm-size: 12px;
  --type-label-sm-lh: 16px;
  --type-label-sm-weight: 600;
  --type-label-sm-tracking: 0.1em;

  --type-button-size: 15px;
  --type-button-lh: 20px;
  --type-button-weight: 600;
  --type-button-tracking: 0.06em;

  /* Body — Desktop */
  --type-body-lg-size: 20px;
  --type-body-lg-lh: 32px;

  --type-body-size: 18px;
  --type-body-lh: 28px;

  --type-body-sm-size: 16px;
  --type-body-sm-lh: 24px;

  --type-caption-size: 14px;
  --type-caption-lh: 20px;

  --type-micro-size: 13px;
  --type-micro-lh: 18px;
  --type-micro-tracking: 0.01em;

  /* ── Backgrounds ────────────────────────────────────────── */
  --bg-base: #08080D;
  --bg-primary: #0A0A0F;
  --bg-secondary: #0F0F17;
  --bg-card: #14141E;
  --bg-card-hover: #1A1A26;
  --bg-elevated: #1E1E2A;
  --bg-input: #0C0C14;

  /* ── Text Colors ────────────────────────────────────────── */
  --text-primary: #FFFFFF;
  --text-secondary: #8A8A9B;
  --text-tertiary: #5C5C70;
  --text-muted: #3E3E50;

  /* ── Accents ────────────────────────────────────────────── */
  --accent-gradient: linear-gradient(130deg, #ff3a3a 0%, #7d72fe 100%);
  --accent-red: #ff3a3a;
  --accent-purple: #7d72fe;
  --accent-red-muted: rgba(255, 58, 58, 0.12);
  --accent-purple-muted: rgba(125, 114, 254, 0.12);
  --gradient-soft: linear-gradient(130deg, rgba(255,58,58,0.10) 0%, rgba(125,114,254,0.10) 100%);
  --gradient-glow: radial-gradient(ellipse at center, rgba(255,58,58,0.06) 0%, rgba(125,114,254,0.03) 40%, transparent 70%);

  /* ── Borders ────────────────────────────────────────────── */
  --border-default: rgba(255, 255, 255, 0.06);
  --border-card: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.14);
  --border-focus: rgba(125, 114, 254, 0.5);
  --border-accent: rgba(255, 58, 58, 0.25);

  /* ── Easing ─────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-hover: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ─────────────────────────────────────────────── */
  --container-max: 1280px;
  --container-padding: 64px;
  --grid-columns: 12;
  --grid-gap: 24px;

  /* ── Spacing (8px scale) ────────────────────────────────── */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-15: 120px;

  /* ── Section Spacing ────────────────────────────────────── */
  --section-padding: 120px;

  /* ── Border Radius ──────────────────────────────────────── */
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-pill: 100px;

  /* ── Header ─────────────────────────────────────────────── */
  --header-height: 72px;
}

/* ── Tablet Overrides ───────────────────────────────────────── */

@media (max-width: 1279px) {
  :root {
    --type-display-size: 56px;
    --type-display-lh: 64px;

    --type-h1-size: 42px;
    --type-h1-lh: 50px;

    --type-h2-size: 36px;
    --type-h2-lh: 44px;

    --type-h3-size: 20px;
    --type-h3-lh: 28px;

    --type-body-lg-size: 18px;
    --type-body-lg-lh: 28px;

    --type-body-size: 17px;
    --type-body-lh: 26px;

    --container-padding: 40px;
    --grid-gap: 20px;
    --section-padding: 96px;
  }
}

/* ── Mobile Overrides ───────────────────────────────────────── */

@media (max-width: 767px) {
  :root {
    --type-display-size: 40px;
    --type-display-lh: 46px;

    --type-h1-size: 32px;
    --type-h1-lh: 38px;

    --type-h2-size: 28px;
    --type-h2-lh: 34px;

    --type-h3-size: 18px;
    --type-h3-lh: 24px;

    --type-body-lg-size: 17px;
    --type-body-lg-lh: 26px;

    --type-body-size: 16px;
    --type-body-lh: 24px;

    --container-padding: 20px;
    --grid-gap: 16px;
    --section-padding: 72px;
    --header-height: 64px;
  }
}