/* ================================================================
   Blip — Design System v2
   Clean, Snapchat-inspired, fully responsive
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* Brand */
  --yellow:     #2F80ED;
  --yellow-2:   #56A1FF;
  --yellow-bg:  rgba(47,128,237,.12);
  --yellow-brd: rgba(47,128,237,.25);

  /* Dark palette */
  --bg:      #0a0a0a;
  --surface: #141414;
  --card:    #1c1c1c;
  --border:  #2a2a2a;
  --border2: #333;
  --hover:   #232323;
  --active:  #282828;

  /* Text */
  --text-1: #ffffff;
  --text-2: #aaaaaa;
  --text-3: #666666;

  /* Status */
  --red:    #ff3b30;
  --green:  #32d74b;
  --blue:   #0a84ff;
  --purple: #bf5af2;
  --orange: #ff9f0a;
  --pink:   #ff375f;
  --teal:   #5ac8fa;

  /* Geometry */
  --r2:   4px;
  --r4:   8px;
  --r8:   14px;
  --r12:  20px;
  --r16:  28px;
  --full: 9999px;

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --t1: .12s;
  --t2: .22s;
  --t3: .35s;

  /* Shadows */
  --shadow-1: 0 1px 3px rgba(0,0,0,.4);
  --shadow-2: 0 4px 16px rgba(0,0,0,.5);
  --shadow-3: 0 12px 40px rgba(0,0,0,.6);
  --glow-y:   0 0 20px rgba(47,128,237,.25);

  /* Sizes */
  --nav-h:    56px;
  --sidebar-w:300px;
  --rail-w:   64px;
}

/* Light theme */
[data-theme="light"] {
  --bg:      #f2f2f7;
  --surface: #ffffff;
  --card:    #ffffff;
  --border:  #e0e0e0;
  --border2: #d0d0d0;
  --hover:   #f5f5f5;
  --active:  #eaeaea;
  --text-1:  #000000;
  --text-2:  #555555;
  --text-3:  #999999;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; -webkit-text-size-adjust:100%; }

body {
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text-1);
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-y:auto;
}

a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; outline:none; background:none; }
input,textarea,select { font-family:inherit; outline:none; border:none; background:none; color:inherit; }
img,video { display:block; max-width:100%; }
ul { list-style:none; }
::-webkit-scrollbar { width:0; height:0; }
::selection { background:var(--yellow); color:#000; }

/* ── Typography ──────────────────────────────────────────────── */
.t-hero  { font-size:clamp(2rem,6vw,4rem); font-weight:900; letter-spacing:-.04em; line-height:1.05; }
.t-h1    { font-size:clamp(1.5rem,3vw,2.4rem); font-weight:800; letter-spacing:-.03em; }
.t-h2    { font-size:1.15rem; font-weight:700; }
.t-h3    { font-size:.95rem;  font-weight:700; }
.t-body  { font-size:.9rem;   line-height:1.55; }
.t-small { font-size:.78rem;  line-height:1.4; }
.t-xs    { font-size:.68rem;  line-height:1.3; }
.t-label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); }