/* eyeiq — design tokens + components
 * Lifted from Swiss Fintech Company design system.
 * Drop into FastAPI/Jinja2 project at static/css/eyeiq.css.
 *
 * Import once in your base template:
 *   <link rel="stylesheet" href="{{ url_for('static', path='css/eyeiq.css') }}">
 */

/* ═══════════════════════════════════════════════════════════════
 * 1. Font — self-hosted Inter Variable
 * ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/InterVariable.woff2') format('woff2-variations'),
       url('../fonts/InterVariable.woff2') format('woff2');
}

/* ═══════════════════════════════════════════════════════════════
 * 2. Tokens (CSS custom properties)
 * ═══════════════════════════════════════════════════════════════ */

:root {
  /* Brand */
  --color-brand:          #E30613;    /* primary accent — pill CTA, active tabs, hero */
  --color-brand-hover:    #C10510;
  --color-brand-ink:      #9A030C;    /* darker brand, for text on brand-tint */
  --color-brand-tint:     #FFEAEB;    /* chip / tint background */
  --color-brand-border:   #FFA8AE;    /* outline-button border */

  /* Surface */
  --color-bg:             #F4F5F8;    /* page canvas — cool near-white */
  --color-surface:        #FFFFFF;    /* card surface */
  --color-surface-alt:    #FAFBFD;    /* input fill, subtle sunken */
  --color-divider:        rgba(10,14,21,.08);
  --color-divider-strong: rgba(10,14,21,.16);

  /* Text */
  --color-text:           #0A0E15;    /* primary */
  --color-text-muted:     #4A5362;    /* secondary — meta, labels */
  --color-text-subtle:    #6B7788;    /* tertiary — help text */
  --color-text-disabled:  #94A0B1;
  --color-text-on-brand:  #FFFFFF;

  /* Semantic */
  --color-success:        #128C5A;
  --color-success-bg:     #E3F4EC;
  --color-warning:        #D98F1A;
  --color-warning-bg:     #FBEFD9;
  --color-danger:         #E30613;    /* same as brand — red is already alert hue */
  --color-danger-bg:      #FFEAEB;
  --color-info:           #2D5BD6;
  --color-info-bg:        #E3EBFB;

  /* Typography */
  --font-sans:  'Inter var', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:  ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Radii */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;   /* inputs, small buttons */
  --radius-lg:   20px;   /* cards */
  --radius-xl:   28px;   /* hero */
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card:  0 1px 2px rgba(10,14,21,.04), 0 4px 14px rgba(10,14,21,.05);
  --shadow-pop:   0 4px 12px rgba(10,14,21,.08), 0 20px 40px rgba(10,14,21,.10);
  --shadow-focus: 0 0 0 3px rgba(227,6,19,.25);

  /* Spacing (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Motion */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --dur: 180ms;
}

/* ═══════════════════════════════════════════════════════════════
 * 3. Base
 * ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01' 1;
}

h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; line-height: 1.2; }
h1 { font-size: 40px; font-weight: 600; }
h2 { font-size: 28px; font-weight: 600; }
h3 { font-size: 20px; font-weight: 600; }
p  { margin: 0; }

a  { color: var(--color-brand); text-decoration: none; }
a:hover { color: var(--color-brand-hover); }

.num, .mono { font-feature-settings: 'tnum' 1; }
.mono { font-family: var(--font-mono); }

/* ═══════════════════════════════════════════════════════════════
 * 4. Buttons — pill shape, solid + outline variants
 * ═══════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out),
              color      var(--dur) var(--ease-out),
              border     var(--dur) var(--ease-out),
              transform  var(--dur) var(--ease-out);
  white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn[disabled]    { opacity: .5; cursor: not-allowed; }

/* Solid red pill */
.btn--primary          { background: var(--color-brand); color: var(--color-text-on-brand); }
.btn--primary:hover    { background: var(--color-brand-hover); }

/* Outline red pill */
.btn--outline          { background: transparent; color: var(--color-brand);
                         border-color: var(--color-brand-border); }
.btn--outline:hover    { background: var(--color-brand-tint); border-color: var(--color-brand); }

/* Ghost (text-only, neutral) */
.btn--ghost            { background: transparent; color: var(--color-text-muted); }
.btn--ghost:hover      { background: var(--color-surface); color: var(--color-text); }

/* Dark-ink pill (inverse CTA) */
.btn--dark             { background: var(--color-text); color: var(--color-text-on-brand); }
.btn--dark:hover       { background: #1B222D; }

/* Sizes */
.btn--sm { padding: 8px 16px;  font-size: 13px; }
.btn--lg { padding: 16px 28px; font-size: 15px; }
.btn--block { width: 100%; }

/* ═══════════════════════════════════════════════════════════════
 * 5. Card
 * ═══════════════════════════════════════════════════════════════ */

.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}
.card--flush   { padding: 0; }
.card--compact { padding: var(--space-4); }

.card__header {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--space-5) var(--space-6) var(--space-3);
}
.card__title   { font-size: 17px; font-weight: 600; }
.card__action  { font-size: 13px; font-weight: 500; color: var(--color-brand); }

/* Hero — signature brand motif: large red panel, white text */
.card--hero {
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  border-radius: var(--radius-xl);
  border: 0;
  padding: 36px 40px;
  position: relative;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
 * 6. Underline input (floating label)
 * ═══════════════════════════════════════════════════════════════ */

.field { position: relative; padding-top: 12px; }

.field__label {
  position: absolute; left: 0; top: 22px;
  font-size: 15px; color: var(--color-text-subtle);
  pointer-events: none;
  transition: top var(--dur) var(--ease-out),
              font-size var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}

.field__input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--color-divider-strong);
  background: transparent;
  padding: 6px 0 10px;
  font-family: inherit;
  font-size: 16px;
  color: var(--color-text);
  outline: none;
}
.field__input:focus {
  border-bottom-color: var(--color-brand);
  border-bottom-width: 1.5px;
}

.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label {
  top: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-brand);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.field__help  { margin-top: 6px; font-size: 12px; color: var(--color-text-subtle); }
.field__error { margin-top: 6px; font-size: 12px; color: var(--color-danger); }

/* ═══════════════════════════════════════════════════════════════
 * 7. OTP — six-box code input
 * ═══════════════════════════════════════════════════════════════ */

.otp         { display: flex; gap: 10px; justify-content: center; }
.otp__box {
  width: 52px; height: 60px;
  border: 1.5px solid var(--color-divider-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 600;
  font-feature-settings: 'tnum' 1;
  text-align: center;
  color: var(--color-text);
  outline: none;
  transition: border var(--dur) var(--ease-out);
}
.otp__box:focus,
.otp__box--filled { border-color: var(--color-brand); }
.otp__box:focus   { box-shadow: var(--shadow-focus); }

/* ═══════════════════════════════════════════════════════════════
 * 8. Exchange widget — Give / Take
 * ═══════════════════════════════════════════════════════════════ */

.exchange { display: flex; flex-direction: column; gap: 0; }

.exchange__leg {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.exchange__label {
  font-size: 17px; font-weight: 600;
  margin: 0 0 4px;
}
.exchange__asset {
  display: flex; align-items: center; gap: 10px;
  background: var(--color-bg);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-weight: 600; font-size: 14px;
}
.exchange__asset img { width: 28px; height: 28px; }
.exchange__amount {
  flex: 1;
  text-align: right;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' 1;
  outline: none;
  color: var(--color-text);
  min-width: 0;
}
.exchange__meta {
  display: flex; justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-text-subtle);
}

/* Swap button between legs */
.exchange__swap {
  display: flex; justify-content: center;
  margin: 16px 0;
}
.exchange__swap-btn {
  width: 48px; height: 48px;
  border-radius: var(--radius-pill);
  background: var(--color-text);
  color: var(--color-text-on-brand);
  border: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════
 * 9. Affiliate / data cards — stat grid
 * ═══════════════════════════════════════════════════════════════ */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}

.stat {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
}
.stat__label {
  font-size: 11px; font-weight: 600;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.stat__value {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 6px;
  font-feature-settings: 'tnum' 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat__meta {
  font-size: 13px;
  color: var(--color-text-subtle);
  margin-top: 4px;
}
.stat__meta--success { color: var(--color-success); font-weight: 500; }
.stat__meta--danger  { color: var(--color-danger);  font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════
 * 10. Tabs (underline)
 * ═══════════════════════════════════════════════════════════════ */

.tabs {
  display: flex; gap: 6px;
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: var(--space-6);
}
.tabs__item {
  padding: 12px 18px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-subtle);
  cursor: pointer;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}
.tabs__item--active {
  color: var(--color-brand);
  font-weight: 600;
  border-bottom-color: var(--color-brand);
}

/* ═══════════════════════════════════════════════════════════════
 * 11. Badges / chips
 * ═══════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  background: var(--color-brand-tint);
  color: var(--color-brand-ink);
}
.badge--success { background: var(--color-success-bg); color: var(--color-success); }
.badge--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge--info    { background: var(--color-info-bg);    color: var(--color-info); }
.badge--neutral { background: var(--color-bg);         color: var(--color-text-muted); }

/* ═══════════════════════════════════════════════════════════════
 * 12. Utilities
 * ═══════════════════════════════════════════════════════════════ */

.container     { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.container--sm { max-width: 680px;  margin: 0 auto; padding: 0 24px; }

.stack-1 > * + * { margin-top: var(--space-1); }
.stack-2 > * + * { margin-top: var(--space-2); }
.stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-5 > * + * { margin-top: var(--space-5); }
.stack-6 > * + * { margin-top: var(--space-6); }

.muted    { color: var(--color-text-muted); }
.subtle   { color: var(--color-text-subtle); }
.tnum     { font-feature-settings: 'tnum' 1; }
.text-sm  { font-size: 13px; }
.text-xs  { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }