/* Flicko Design System — colors & type tokens
   Black‑first neon‑accented TikTok‑style UI. Use these vars in every surface. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;900&family=Nunito:wght@800;900&display=swap');

:root {
  /* ===== BRAND ACCENTS ===== */
  --flicko-cyan:        #25F4EE;   /* Aqua – left chromatic split, primary neon */
  --flicko-magenta:     #FE2C55;   /* Rose – right chromatic split, primary accent */
  --flicko-cyan-dim:    #0ACEC9;
  --flicko-magenta-dim: #D9264A;

  /* ===== CANVAS ===== */
  --bg-canvas:          #000000;   /* app background everywhere */
  --bg-surface:         #121212;   /* list surfaces (inbox, settings) */
  --bg-surface-raised:  #1C1C1E;   /* tiles, wallet cards, modals */
  --bg-surface-alt:     #262626;   /* input fields, chip tracks */

  /* ===== FOREGROUND (WHITE ON BLACK) ===== */
  --fg-1:    rgba(255, 255, 255, 1.00); /* Primary text (titles, counts) */
  --fg-2:    rgba(255, 255, 255, 0.85); /* Secondary text (captions) */
  --fg-3:    rgba(255, 255, 255, 0.55); /* Tertiary / inactive icons & labels */
  --fg-4:    rgba(255, 255, 255, 0.32); /* Quaternary / disabled, placeholder */
  --fg-5:    rgba(255, 255, 255, 0.12); /* Hairlines, dividers, inactive chip */

  /* ===== SEMANTIC ===== */
  --accent-primary:   var(--flicko-magenta);  /* follow, like active, primary CTA */
  --accent-secondary: var(--flicko-cyan);     /* create pill accent, link hover */
  --success:          #2BD37A;
  --warning:          #FFB020;
  --danger:           #FE2C55;   /* = magenta; intentional */
  --live:             #FE2C55;   /* LIVE ring, REC dot */

  /* ===== PROTECTION GRADIENTS (for overlaid text) ===== */
  --protect-top:    linear-gradient(180deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,0) 100%);
  --protect-bottom: linear-gradient(  0deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,0) 100%);
  --text-shadow-video: 0 1px 2px rgba(0,0,0,.60);

  /* ===== SPACING (4pt base) ===== */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;   /* default screen gutter */
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;

  /* ===== RADII ===== */
  --r-xs:   4px;   /* chips, tag badges */
  --r-sm:   8px;   /* comment bubble, create pill */
  --r-md:  12px;   /* grid cards, wallet tiles */
  --r-lg:  16px;   /* primary buttons */
  --r-xl:  22px;   /* large sheets */
  --r-full: 999px; /* avatars, pill buttons, like capsule */
  --r-squircle: 22.37%;

  /* ===== ELEVATION ===== */
  /* On dark canvas, elevation = glow + hairline, not drop shadow */
  --glow-accent:    0 0 12px rgba(254, 44, 85, 0.45);
  --glow-cyan:      0 0 12px rgba(37, 244, 238, 0.45);
  --glow-white:     0 0 12px rgba(255,255,255,0.25);
  --hairline-top:   inset 0 1px 0 rgba(255,255,255,.08);
  --hairline-bot:   inset 0 -1px 0 rgba(255,255,255,.08);

  /* ===== MOTION ===== */
  --ease-out-expo:  cubic-bezier(.22, 1, .36, 1);
  --ease-standard:  cubic-bezier(.4, 0, .2, 1);
  --dur-fast:       120ms;
  --dur-base:       240ms;
  --dur-slow:       320ms;
  --dur-sheet:      320ms;

  /* ===== TYPE – families ===== */
  --font-sans:    'Inter', -apple-system, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-han:     'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-display: 'Nunito', 'Inter', sans-serif;   /* wordmark only */
  --font-mono:    ui-monospace, 'SF Mono', Menzies, Menlo, monospace;

  /* ===== TYPE – base scale ===== */
  --fs-10: 10px;  /* micro labels */
  --fs-11: 11px;  /* tab bar labels */
  --fs-12: 12px;  /* counts under rail icons, timestamps */
  --fs-13: 13px;  /* secondary, chip text */
  --fs-14: 14px;  /* body small, caption */
  --fs-15: 15px;  /* username, comment body */
  --fs-16: 16px;  /* body default */
  --fs-17: 17px;  /* header title (iOS) */
  --fs-18: 18px;  /* section title */
  --fs-20: 20px;  /* page title */
  --fs-24: 24px;  /* big number, profile name */
  --fs-32: 32px;  /* hero count */
  --fs-40: 40px;  /* display */

  --lh-tight: 1.15;
  --lh-snug:  1.30;
  --lh-base:  1.45;
  --lh-loose: 1.60;

  --lt-tight:   -0.01em;
  --lt-display: -0.02em;
  --lt-wide:     0.02em;   /* tab labels caps */
}

/* ============ SEMANTIC TYPE ROLES ============
   Use these classes so copy doesn't hand‑pick sizes. */

html, body {
  background: var(--bg-canvas);
  color: var(--fg-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fk-wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-24);
  letter-spacing: var(--lt-display);
  line-height: 1;
}
.fk-display {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-32);
  letter-spacing: var(--lt-display);
  line-height: var(--lh-tight);
}
.fk-h1 {
  font-weight: 700;
  font-size: var(--fs-24);
  letter-spacing: var(--lt-tight);
  line-height: var(--lh-tight);
}
.fk-h2 {
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
}
.fk-h3 {
  font-weight: 600;
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
}
.fk-body {
  font-weight: 400;
  font-size: var(--fs-15);
  line-height: var(--lh-base);
  color: var(--fg-2);
}
.fk-body-strong {
  font-weight: 600;
  font-size: var(--fs-15);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.fk-caption {
  font-weight: 400;
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  color: var(--fg-1);
  text-shadow: var(--text-shadow-video);
}
.fk-username {
  font-weight: 600;
  font-size: var(--fs-15);
  color: var(--fg-1);
  text-shadow: var(--text-shadow-video);
}
.fk-count {
  font-weight: 600;
  font-size: var(--fs-12);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  text-shadow: var(--text-shadow-video);
}
.fk-hero-count {
  font-weight: 700;
  font-size: var(--fs-24);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--lt-tight);
}
.fk-tab-label {
  font-weight: 500;
  font-size: var(--fs-11);
  letter-spacing: var(--lt-wide);
  color: var(--fg-3);
}
.fk-tab-label--active { color: var(--fg-1); }
.fk-chip {
  font-weight: 500;
  font-size: var(--fs-13);
  color: var(--fg-1);
}
.fk-overline {
  font-weight: 600;
  font-size: var(--fs-11);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.fk-cta {
  font-weight: 600;
  font-size: var(--fs-15);
  line-height: 1;
}
.fk-meta {
  font-weight: 400;
  font-size: var(--fs-12);
  color: var(--fg-3);
}

/* Han (zh‑CN) drop‑in — apply .fk-han to any element with Chinese text */
.fk-han { font-family: var(--font-han); }