/*
 * Interscope Records — Design Tokens
 * Extracted from: https://interscope.com/pages/iga-artist-hub
 *
 * Usage: Link this file in any component HTML:
 *   <link rel="stylesheet" href="design-tokens.css" />
 *
 * All variables are scoped to :root and prefixed with --ig-
 * LIGHT THEME — white backgrounds, black text, electric blue accent
 */

:root {
  /* ── Colors ──────────────────────────────────────── */
  --ig-bg:              #FFFFFF;
  --ig-bg-alt:          #F8F8F8;
  --ig-bg-dark:         #000000;
  --ig-bg-dark-alt:     #111111;
  --ig-card-bg:         #FFFFFF;

  --ig-text:            #000000;
  --ig-text-primary:    #000000;
  --ig-text-secondary:  #333333;
  --ig-text-muted:      #666666;
  --ig-text-caption:    #999999;
  --ig-text-inverse:    #FFFFFF;

  --ig-accent:          #000DFF;
  --ig-accent-hover:    #0008CC;
  --ig-red:             #DC3545;
  --ig-red-alt:         #DD2D2D;
  --ig-success:         #28A745;

  --ig-border:          #E5E5E5;
  --ig-border-dark:     #CCCCCC;
  --ig-border-light:    rgba(0,0,0,0.06);

  --ig-black:           #000000;
  --ig-white:           #FFFFFF;

  /* ── Typography ──────────────────────────────────── */
  --ig-font-primary:    Helvetica, Arial, sans-serif;
  --ig-font-mono:       'SF Mono', 'Fira Code', monospace;

  --ig-fs-xs:    10px;
  --ig-fs-sm:    11px;
  --ig-fs-base:  13px;
  --ig-fs-md:    14px;
  --ig-fs-lg:    16px;
  --ig-fs-xl:    20px;
  --ig-fs-2xl:   28px;
  --ig-fs-3xl:   36px;
  --ig-fs-4xl:   48px;
  --ig-fs-5xl:   64px;

  --ig-fw-regular:  400;
  --ig-fw-medium:   500;
  --ig-fw-semibold: 600;
  --ig-fw-bold:     700;

  --ig-lh-tight:   1.1;
  --ig-lh-base:    1.4;
  --ig-lh-relaxed: 1.6;

  --ig-ls-tight:   -0.02em;
  --ig-ls-normal:  0;
  --ig-ls-wide:    0.08em;
  --ig-ls-caps:    0.14em;
  --ig-ls-editorial: 0.2em;

  /* ── Spacing ─────────────────────────────────────── */
  --ig-space-xs:   4px;
  --ig-space-sm:   8px;
  --ig-space-md:   16px;
  --ig-space-lg:   24px;
  --ig-space-xl:   40px;
  --ig-space-2xl:  64px;
  --ig-space-3xl:  96px;
  --ig-space-4xl:  120px;

  /* ── Radius ──────────────────────────────────────── */
  --ig-radius-none: 0;
  --ig-radius-sm:   4px;
  --ig-radius-md:   8px;
  --ig-radius-lg:   12px;
  --ig-radius-pill:  100px;
  --ig-radius-circle: 50%;

  /* ── Shadows ─────────────────────────────────────── */
  --ig-shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
  --ig-shadow-md:   0 4px 12px rgba(0,0,0,0.1);
  --ig-shadow-lg:   0 8px 24px rgba(0,0,0,0.15);

    /* ── Motion ──────────────────────────────────────── */
  /* feel: mixed | scroll-linked: yes | no springs detected */
  --ig-motion-instant:   75ms;
  --ig-motion-xs:        150ms;
  --ig-motion-sm:        200ms;
  --ig-motion-base:      300ms;
  --ig-motion-lg:        500ms;
  --ig-motion-xl:        1s;

  --ig-ease-standard:    cubic-bezier(0.4, 0, 0.2, 1); /* custom — dominant (372 uses) */
  --ig-ease-in-out:      ease-in-out;

  --ig-transition-fast:  var(--ig-motion-xs) var(--ig-ease-standard);
  --ig-transition-base:  var(--ig-motion-base) var(--ig-ease-standard);
  --ig-transition-slow:  var(--ig-motion-lg) ease-in-out;

  /* ── Dimensions ──────────────────────────────────── */
  --ig-nav-h:         60px;
  --ig-announce-h:    40px;
  --ig-container-max: 1440px;
  --ig-content-max:   1200px;
  --ig-grid-gap:      16px;

  /* ── Z-Index ─────────────────────────────────────── */
  --ig-z-base:    1;
  --ig-z-nav:     100;
  --ig-z-drawer:  200;
  --ig-z-overlay: 300;
  --ig-z-modal:   400;

  /* ── Backward compat — old token names used in components ── */
  --ig-ease-base: var(--ig-motion-base) var(--ig-ease-standard);
  --ig-ease-fast: var(--ig-motion-xs) var(--ig-ease-standard);
}

/* ── Base Reset ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--ig-font-primary);
  font-size: var(--ig-fs-base);
  background: var(--ig-bg);
  color: var(--ig-text);
  -webkit-font-smoothing: antialiased;
  line-height: var(--ig-lh-base);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }