/* =====================================================================
   Circles Design System — Colors & Type
   Source of truth: circles-v2/frontend/src/styles/vars.css + fonts.css
   ===================================================================== */

/* ---- Fonts ---- */
@font-face {
  font-family: "Inter";
  src: url("./fonts/InterDisplay-Medium.woff2") format("woff2");
  font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/InterDisplay-BoldItalic.woff2") format("woff2");
  font-style: italic; font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/InterDisplay-Bold.woff2") format("woff2");
  font-style: normal; font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "SF-Compact-Rounded-Semibold";
  src: url("./fonts/SF-Compact-Rounded-Semibold.woff2") format("woff2");
  font-style: normal; font-weight: 600; font-display: swap;
}

/* ---- Tokens ---- */
:root {
  /* Surfaces — deep, near-black midnight blue. The whole app lives on it. */
  --bg: #0D111A;
  --bg-elev: rgba(255,255,255,0.08);   /* ghost card   */
  --bg-card: rgba(255,255,255,0.08);   /* #FFFFFF14 */
  --bg-card-2: rgba(255,255,255,0.04); /* #FFFFFF0A subtle panel */
  --bg-card-contrast: #ffffff;         /* light-on-dark CTA */

  /* Text */
  --text: #ffffff;
  --text-secondary: rgba(255,255,255,0.64);
  --text-tertiary:  rgba(255,255,255,0.40);
  --text-quaternary:rgba(255,255,255,0.24);
  --text-contrast: #000000;
  --text-negative: #FF2A8A;  /* hot pink — betrayal / destructive */

  /* Accents — 3-note "token trio" */
  --accent-pink:  #FF2A8A;   /* betrayal / negative / prize circle */
  --accent-blue:  #2A6FFF;   /* trust / primary CTA / user */
  --accent-green: #2AFF9C;   /* tokens / gains / success */

  /* Tints used on dim glass / strokes */
  --pink-16:   rgba(255,42,138,0.16);
  --blue-16:   rgba(42,111,255,0.16);
  --green-16:  rgba(42,255,156,0.16);

  --stroke-soft:   rgba(255,255,255,0.16);
  --stroke-hair:   rgba(255,255,255,0.10);
  --stroke-bright: rgba(255,255,255,0.40);
  --stroke-glass:  rgba(255,255,255,0.40); /* glass card inner border */

  /* Fonts */
  --font-sans:    "Inter", system-ui, -apple-system, "SF Pro", sans-serif;
  --font-display: "Inter", system-ui, -apple-system, sans-serif; /* italic 700 used */
  --font-rounded: "SF-Compact-Rounded-Semibold", "SF Pro Rounded", system-ui, sans-serif;

  /* Sizes */
  --navbar-height: 88px;
  --panel-width: min(100dvw, 500px);

  /* Radii */
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 46px;
  --r-full: 9999px;

  /* Spacing scale (mobile-dense) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;

  /* Blur */
  --blur-glass: 12px;
  --blur-halo: 36px;

  /* Shadows (used sparingly — brand relies on blur/glow) */
  --shadow-avatar: -1px 1px 10px rgba(0,0,0,0.4);
  --glow-pink:   0 0 80px 20px rgba(255,42,138,0.35);
  --glow-blue:   0 0 80px 20px rgba(42,111,255,0.35);
  --glow-green:  0 0 60px 16px rgba(42,255,156,0.35);

  /* Gradients — the "circle halo" motif */
  --grad-pink:  radial-gradient(50% 50% at 50% 50%, #FF2A8A 0%, rgba(255,42,138,0) 100%);
  --grad-blue:  radial-gradient(50% 50% at 50% 50%, #2A6FFF 0%, rgba(42,111,255,0) 100%);
  --grad-green: radial-gradient(50% 50% at 50% 50%, #2AFF9C 0%, rgba(42,255,156,0) 100%);
  --grad-glass-border: linear-gradient(95deg, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0) 100%);
  --grad-btn-blue: linear-gradient(0deg, rgba(255,255,255,0.08), rgba(255,255,255,0.08)),
                   radial-gradient(50% 121.9% at 50% 50%, #2A6FFF 0%, rgba(42,111,255,0.16) 100%);
  --grad-scrim-bottom: linear-gradient(180deg, rgba(13,17,26,0) 0%, #0D111A 85%, #0D111A 100%);
}

/* ---- Base ---- */
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* ---- Semantic type classes ---- */
/* H-display: the italic-uppercase hero type. Brand signature. */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.024em;
  line-height: 100%;
  color: var(--text);
}
.display--xl { font-size: 72px; }    /* cover */
.display--lg { font-size: 40px; }    /* section hero */
.display--md { font-size: 22px; line-height: 28px; letter-spacing: 0.024em; }  /* Title component */
.display--sm { font-size: 17px; line-height: 22px; }   /* CircleGroupCard */

/* Rounded numeric — token/USDT chips, counters */
.numeric {
  font-family: var(--font-rounded);
  font-weight: 600;
  letter-spacing: 0;
}
.numeric--lg { font-size: 20px; }
.numeric--sm { font-size: 13px; }
.numeric--xs { font-size: 10px; line-height: 100%; }

/* Body */
.body-lg  { font-size: 17px; line-height: 20px; font-weight: 500; color: var(--text); }
.body     { font-size: 15px; line-height: 20px; font-weight: 400; color: var(--text); }
.body--secondary { color: var(--text-secondary); }
.body-sm  { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--text-secondary); }
.caption  { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-secondary); }

/* Labels for buttons / tabs */
.label    { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--text); }
.label-sm { font-size: 13px; line-height: 100%; font-weight: 600; letter-spacing: -0.02px; }

/* Semantic element-level styles */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.024em;
  margin: 0;
  color: var(--text);
}
h1 { font-size: 40px; line-height: 100%; }
h2 { font-size: 22px; line-height: 28px; }
h3 { font-size: 17px; line-height: 22px; }
p  { margin: 0; font-size: 15px; line-height: 20px; color: var(--text); }
code, kbd { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; }