/* ============================================================
   e-Qapla Design System
   Single import for color, type, spacing, radius, elevation.

   Real licensed faces (CoinbaseDisplay / CoinbaseSans / CoinbaseMono)
   are not shipped here. We substitute Inter + JetBrains Mono.
   ============================================================ */

/* ---------- Fonts ----------
   Primary: Inter + JetBrains Mono via Google Fonts CDN (used while
   local .woff2 files are not present). If you drop real licensed
   .woff2 files into fonts/, the @font-face blocks below will pick
   them up and the CDN @import becomes a no-op fallback.
*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap");

/* Local .woff2 faces intentionally omitted here — the fonts/ dir is not
   shipped in this bundle, so pointing @font-face at missing files would
   override and break the Google-loaded families. Inter + JetBrains Mono
   load from the @import above (and the <link> in the HTML head). If you add
   licensed .woff2 files to fonts/, re-add the @font-face blocks and drop the
   CDN @import. */

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --color-primary:           #1E50FA;  /* sampled from logo */
  --color-primary-active:    #1740C8;
  --color-primary-disabled:  #A8B5E6;

  /* Surface */
  --color-canvas:                #ffffff;
  --color-surface-soft:          #f7f7f7;
  --color-surface-strong:        #eef0f3;
  --color-surface-dark:          #0a0b0d;
  --color-surface-dark-elevated: #16181c;

  /* Hairlines */
  --color-hairline:        #dee1e6;
  --color-hairline-soft:   #eef0f3;

  /* Text */
  --color-ink:           #0a0b0d;
  --color-body:          #5b616e;
  --color-body-strong:   #0a0b0d;
  --color-muted:         #7c828a;
  --color-muted-soft:    #a8acb3;
  --color-on-primary:    #ffffff;
  --color-on-dark:       #ffffff;
  --color-on-dark-soft:  #a8acb3;

  /* Trading semantics — text-only */
  --color-semantic-up:   #05b169;
  --color-semantic-down: #cf202f;

  /* Type stacks */
  --font-display: "Inter", -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-sans:    "Inter", -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type tokens — name : size / line-height / letter-spacing / weight / family */
  --type-display-mega-size:    80px;   --type-display-mega-lh:    1.0;   --type-display-mega-ls:    -2px;
  --type-display-xl-size:      64px;   --type-display-xl-lh:      1.0;   --type-display-xl-ls:      -1.6px;
  --type-display-lg-size:      52px;   --type-display-lg-lh:      1.0;   --type-display-lg-ls:      -1.3px;
  --type-display-md-size:      44px;   --type-display-md-lh:      1.09;  --type-display-md-ls:      -1px;
  --type-display-sm-size:      36px;   --type-display-sm-lh:      1.11;  --type-display-sm-ls:      -0.5px;
  --type-title-lg-size:        32px;   --type-title-lg-lh:        1.13;  --type-title-lg-ls:        -0.4px;
  --type-title-md-size:        18px;   --type-title-md-lh:        1.33;  --type-title-md-ls:        0;
  --type-title-sm-size:        16px;   --type-title-sm-lh:        1.25;  --type-title-sm-ls:        0;
  --type-body-md-size:         16px;   --type-body-md-lh:         1.5;   --type-body-md-ls:         0;
  --type-body-sm-size:         14px;   --type-body-sm-lh:         1.5;   --type-body-sm-ls:         0;
  --type-caption-size:         13px;   --type-caption-lh:         1.5;   --type-caption-ls:         0;
  --type-caption-strong-size:  12px;   --type-caption-strong-lh:  1.5;   --type-caption-strong-ls:  0.04em;
  --type-number-display-size:  18px;   --type-number-display-lh:  1.4;   --type-number-display-ls:  0;
  --type-button-size:          16px;   --type-button-lh:          1.15;  --type-button-ls:          0;
  --type-nav-link-size:        14px;   --type-nav-link-lh:        1.4;   --type-nav-link-ls:        0;

  /* Spacing — 4px base */
  --space-xxs:     4px;
  --space-xs:      8px;
  --space-sm:     12px;
  --space-base:   16px;
  --space-md:     20px;
  --space-lg:     24px;
  --space-xl:     32px;
  --space-xxl:    48px;
  --space-section: 96px;

  /* Radius */
  --radius-none:  0;
  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-pill:  100px;
  --radius-full:  9999px;

  /* Elevation — single tier */
  --shadow-soft:  0 4px 12px rgba(0, 0, 0, 0.04);

  /* Layout */
  --container-max: 1200px;
  --nav-height:    64px;
  --section-rhythm: var(--space-section);

  /* Motion */
  --motion-fast: 120ms ease-out;
  --motion-base: 180ms ease-out;
}

/* ---------- Base / semantic ---------- */
html, body {
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { margin: 0; }

/* Display */
.eq-display-mega, h1.eq-hero {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-display-mega-size);
  line-height: var(--type-display-mega-lh);
  letter-spacing: var(--type-display-mega-ls);
  color: var(--color-ink);
  margin: 0;
}
.eq-display-xl {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-display-xl-size);
  line-height: var(--type-display-xl-lh);
  letter-spacing: var(--type-display-xl-ls);
  margin: 0;
}
.eq-display-lg, h2.eq-section {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-display-lg-size);
  line-height: var(--type-display-lg-lh);
  letter-spacing: var(--type-display-lg-ls);
  margin: 0;
}
.eq-display-md {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-display-md-size);
  line-height: var(--type-display-md-lh);
  letter-spacing: var(--type-display-md-ls);
  margin: 0;
}
.eq-display-sm, h3.eq-sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--type-display-sm-size);
  line-height: var(--type-display-sm-lh);
  letter-spacing: var(--type-display-sm-ls);
  margin: 0;
}

/* Titles */
.eq-title-lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--type-title-lg-size);
  line-height: var(--type-title-lg-lh);
  letter-spacing: var(--type-title-lg-ls);
  margin: 0;
}
.eq-title-md {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--type-title-md-size);
  line-height: var(--type-title-md-lh);
  letter-spacing: 0;
  margin: 0;
}
.eq-title-sm {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--type-title-sm-size);
  line-height: var(--type-title-sm-lh);
  letter-spacing: 0;
  margin: 0;
}

/* Body */
.eq-body, p.eq-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-lh);
  color: var(--color-body);
  margin: 0;
}
.eq-body-strong {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-lh);
  color: var(--color-body-strong);
}
.eq-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  color: var(--color-body);
}
.eq-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  color: var(--color-muted);
}
.eq-caption-strong {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--type-caption-strong-size);
  line-height: var(--type-caption-strong-lh);
  letter-spacing: var(--type-caption-strong-ls);
  text-transform: uppercase;
  color: var(--color-ink);
}

/* Mono / numbers */
.eq-number {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--type-number-display-size);
  line-height: var(--type-number-display-lh);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.eq-number--up   { color: var(--color-semantic-up); }
.eq-number--down { color: var(--color-semantic-down); }

/* Nav link */
.eq-nav-link {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-nav-link-size);
  line-height: var(--type-nav-link-lh);
  color: var(--color-ink);
  text-decoration: none;
}
.eq-nav-link:hover { color: var(--color-primary); }

/* Inline brand link */
.eq-link {
  color: var(--color-primary);
  text-decoration: none;
}
.eq-link:hover { color: var(--color-primary-active); }

/* ---------- Buttons ---------- */
.eq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--type-button-size);
  line-height: var(--type-button-lh);
  height: 44px;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
  white-space: nowrap;
}
.eq-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.eq-btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.eq-btn--primary:active { background: var(--color-primary-active); }
.eq-btn--primary[disabled] {
  background: var(--color-primary-disabled);
  cursor: not-allowed;
}
.eq-btn--secondary-light {
  background: var(--color-surface-strong);
  color: var(--color-ink);
}
.eq-btn--secondary-dark {
  background: var(--color-surface-dark-elevated);
  color: var(--color-on-dark);
}
.eq-btn--outline-on-dark {
  background: transparent;
  color: var(--color-on-dark);
  border-color: var(--color-on-dark);
}
.eq-btn--tertiary-text {
  background: transparent;
  color: var(--color-primary);
  padding: 0 4px;
  height: auto;
  border-radius: 0;
}
.eq-btn--pill-cta {
  height: 56px;
  padding: 16px 32px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--type-button-size);
}

/* ---------- Cards & surfaces ---------- */
.eq-card {
  background: var(--color-canvas);
  color: var(--color-ink);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-hairline);
  padding: var(--space-xl);
}
.eq-card:hover { box-shadow: var(--shadow-soft); }

.eq-card--product-dark {
  background: var(--color-surface-dark-elevated);
  color: var(--color-on-dark);
  border: 0;
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
}

.eq-band-dark {
  background: var(--color-surface-dark);
  color: var(--color-on-dark);
  padding: var(--space-section) 0;
}
.eq-band-light {
  background: var(--color-canvas);
  color: var(--color-ink);
  padding: var(--space-section) 0;
}
.eq-band-soft {
  background: var(--color-surface-soft);
  color: var(--color-ink);
  padding: var(--space-section) 0;
}

/* ---------- Forms ---------- */
.eq-input {
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--type-body-md-size);
  height: 48px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-hairline);
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--motion-fast), border-width var(--motion-fast);
}
.eq-input:focus {
  outline: none;
  border: 2px solid var(--color-primary);
  padding: 13px 15px;
}
.eq-search-pill {
  background: var(--color-surface-strong);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--type-body-md-size);
  height: 44px;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  border: 0;
  width: 100%;
  box-sizing: border-box;
}

/* ---------- Badges ---------- */
.eq-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  background: var(--color-surface-strong);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--type-caption-strong-size);
  line-height: 1;
  letter-spacing: var(--type-caption-strong-ls);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
}

/* ---------- Layout helpers ---------- */
.eq-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.eq-divider { height: 1px; background: var(--color-hairline); border: 0; }

/* ---------- Asset icon plate ---------- */
.eq-asset-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-surface-strong);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}