/* ═══════════════════════════════════════════
   SingClaw Design System v1.0
   Brand Tokens + Typography + Shared Components
   ═══════════════════════════════════════════ */

/* ── Google Fonts: Inter ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* Brand Colors */
  --sc-bg:          #020408;
  --sc-bg2:         #080d18;
  --sc-bg3:         #0c1220;
  --sc-bg-alpha:    rgba(2,4,8,.82);
  --sc-card:        rgba(255,255,255,.04);
  --sc-card-hover:  rgba(255,255,255,.07);
  --sc-border:      rgba(255,255,255,.08);
  --sc-border-hover:rgba(255,255,255,.14);

  /* Text */
  --sc-text:        #e8ecf4;
  --sc-text-bright: #f5f8ff;
  --sc-dim:         rgba(200,215,240,.55);
  --sc-muted:       rgba(200,215,240,.35);

  /* Accent */
  --sc-accent:      #00d4aa;
  --sc-accent2:     #00ff88;
  --sc-accent-glow:       rgba(0,212,170,.15);
  --sc-accent-bg:         rgba(0,212,170,.06);
  --sc-accent-bg-medium:  rgba(0,212,170,.08);
  --sc-accent-bg-lighter: rgba(0,212,170,.04);
  --sc-accent-border:     rgba(0,212,170,.18);

  /* Semantic */
  --sc-blue:             #4d8ffa;
  --sc-blue-bg-medium:   rgba(77,143,250,.08);
  --sc-blue-bg-light:    rgba(77,143,250,.04);
  --sc-purple:      #a855f7;
  --sc-gold:             #fbbf24;
  --sc-gold-bg:          rgba(251,191,36,.12);
  --sc-gold-bg-strong:   rgba(251,191,36,.15);
  --sc-gold-border:      rgba(251,191,36,.25);
  --sc-gold-border-strong:rgba(251,191,36,.3);
  --sc-gold-glow:        rgba(251,191,36,.4);
  --sc-orange:      #f97316;
  --sc-orange-bg:   rgba(249,115,22,.12);
  --sc-danger:      #ef4444;
  --sc-danger-bg:   rgba(239,68,68,.12);
  --sc-success:     #22c55e;
  --sc-purple-bg:        rgba(168,85,247,.12);
  --sc-purple-bg-light:  rgba(168,85,247,.04);
  --sc-purple-bg-soft:   rgba(168,85,247,.06);
  --sc-gold-bg-soft:     rgba(251,191,36,.06);
  --sc-gold-border-medium:rgba(251,191,36,.2);
  --sc-accent-glow-soft: rgba(0,212,170,.10);
  --sc-surface-subtle:   rgba(255,255,255,.02);
  --sc-surface-light:    rgba(255,255,255,.05);
  --sc-white-ultra-light:rgba(255,255,255,.03);

  /* Blog Tag Colors */
  --sc-tag-blue-bg:   rgba(59,130,246,.12);
  --sc-tag-blue:      #60a5fa;
  --sc-tag-green-bg:  rgba(34,197,94,.12);
  --sc-tag-green:     #4ade80;
  --sc-tag-yellow-bg: rgba(234,179,8,.12);
  --sc-tag-yellow:    #facc15;

  /* Journal / Daily Log Tag */
  --sc-tag-journal-bg: rgba(148,163,184,.12);
  --sc-tag-journal:    #94a3b8;

  /* Homepage Module Tags */
  --sc-tag-content-bg: rgba(77,143,250,.12);
  --sc-tag-content:    #4d8ffa;
  --sc-tag-game-bg:    rgba(0,212,170,.12);
  --sc-tag-game:       var(--sc-accent);
  --sc-tag-wisdom-bg:  rgba(168,85,247,.12);
  --sc-tag-wisdom:     var(--sc-purple);
  --sc-tag-new-bg:     rgba(34,197,94,.12);
  --sc-tag-new:        #22c55e;

  /* Typography */
  --sc-font:        'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC', sans-serif;
  --sc-mono:        'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing */
  --sc-max:         1100px;
  --sc-radius:      12px;
  --sc-radius-lg:   20px;
  --sc-radius-xl:   28px;

  /* Transitions */
  --sc-ease:        cubic-bezier(.4,0,.2,1);
  --sc-duration:    .25s;
}

/* ── Base Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--sc-font);
  background: var(--sc-bg);
  color: var(--sc-text);
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* ── Utility ── */
.sc-w { width: min(calc(100% - 40px), var(--sc-max)); margin: 0 auto; }

/* ── Shared Button Styles ── */
.sc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: all var(--sc-duration) var(--sc-ease);
  font-family: var(--sc-font);
}
.sc-btn-primary {
  background: linear-gradient(135deg, var(--sc-accent), var(--sc-accent2));
  color: #000;
}
.sc-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--sc-accent-glow);
}
.sc-btn-secondary {
  background: transparent;
  border: 1px solid var(--sc-border);
  color: var(--sc-text);
}
.sc-btn-secondary:hover {
  border-color: var(--sc-border-hover);
  background: rgba(255,255,255,.03);
}

/* ── Glass Card ── */
.sc-glass {
  padding: 28px;
  border-radius: var(--sc-radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--sc-border);
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
}

/* ── Scroll Reveal Animation ── */
.sc-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s var(--sc-ease), transform .6s var(--sc-ease);
}
.sc-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Section Labels ── */
.sc-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--sc-accent);
  font-weight: 600;
  margin-bottom: 10px;
}
.sc-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin-bottom: 12px;
}
.sc-desc {
  color: var(--sc-dim);
  font-size: 16px;
  max-width: 600px;
  margin-bottom: 40px;
}

/* ── Homepage Module Tags ── */
.tc-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}
.tag-content { background: var(--sc-tag-content-bg); color: var(--sc-tag-content); }
.tag-game    { background: var(--sc-tag-game-bg);    color: var(--sc-tag-game); }
.tag-wisdom  { background: var(--sc-tag-wisdom-bg);  color: var(--sc-tag-wisdom); }
.tag-new     { background: var(--sc-tag-new-bg);     color: var(--sc-tag-new); }