/* ============================================================
   FOOTY · 进球档案 — Design Tokens
   业余足球内容平台 · 设计系统 v0.1
   ============================================================ */

:root {
  /* ── Brand · 草地绿 / 警示橙 ─────────────────────── */
  --brand-grass:        #1A8754;
  --brand-grass-deep:   #126B42;
  --brand-grass-soft:   #D4F0E0;
  --brand-grass-ink:    #0B3D24;

  --brand-orange:       #FF6B35;
  --brand-orange-soft:  #FFE9DF;
  --brand-orange-deep:  #D8501F;

  /* ── Neutrals ─────────────────────────────────── */
  --ink-1:  #1C1F26;
  --ink-2:  #6E7280;
  --ink-3:  #9CA3AF;
  --line:   #E5E7EB;
  --bg:     #F9FAFB;
  --card:   #FFFFFF;

  /* ── Dark mode swatches (for reference cards) ──── */
  --d-bg:   #0A0E16;
  --d-card: #161B26;
  --d-ink1: #F3F4F6;
  --d-ink2: #9CA3AF;
  --d-line: #2A3140;

  /* ── Status ───────────────────────────────────── */
  --ok:     #10B981;
  --err:    #EF4444;
  --warn:   #F59E0B;
  --info:   #3B82F6;

  /* ── Tier (segment colors only — gradients composed in components) ── */
  --tier-iron:     #4A5568;
  --tier-bronze:   #C97A4A;
  --tier-silver-a: #C0C0C0;
  --tier-silver-b: #E8E8E8;
  --tier-gold-a:   #F0B429;
  --tier-gold-b:   #F5D773;
  --tier-plat-a:   #4FD1C5;
  --tier-plat-b:   #38B2AC;
  --tier-diamond-a:#8B5CF6;
  --tier-diamond-b:#B794F4;
  --tier-king:     #DC143C;
  --tier-king-edge:#F5D773;

  /* ── Type ─────────────────────────────────────── */
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans CN",
               "Helvetica Neue", "Manrope", system-ui, sans-serif;
  --font-display: "Barlow Condensed", "Oswald", "PingFang SC", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Roboto Mono", ui-monospace, monospace;

  /* ── Radius ───────────────────────────────────── */
  --r-pill: 24px;
  --r-md:   16px;
  --r-card: 12px;
  --r-img:  8px;
  --r-tag:  4px;

  /* ── Shadow ───────────────────────────────────── */
  --sh-1: 0 1px 2px rgba(0,0,0,.04);
  --sh-2: 0 4px 12px rgba(0,0,0,.08);
  --sh-3: 0 12px 32px rgba(0,0,0,.16);
}

/* ── Reset for artboard interiors ────────────────────── */
.ab * { box-sizing: border-box; }
.ab {
  font-family: var(--font-sans);
  color: var(--ink-1);
  background: var(--card);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum" 1, "cv11" 1;
  line-height: 1.4;
}
.ab.dark { background: var(--d-bg); color: var(--d-ink1); }

/* helpers */
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.disp { font-family: var(--font-display); font-weight: 700; letter-spacing: .01em; }
.tnum { font-variant-numeric: tabular-nums; }

/* keyframes */
@keyframes sk {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes pcfloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: .9; }
  50%      { transform: translateY(-14px) scale(1.15); opacity: 1; }
}
@keyframes pcrotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes tsRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes tsRay {
  0%   { opacity: 0; transform: translate(-1px, 0) rotate(var(--rot,0deg)) scaleY(.4); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-1px, 0) rotate(var(--rot,0deg)) scaleY(1.4); }
}
@keyframes msBreath {
  0%, 100% { transform: scale(1);     box-shadow: 0 8px 24px rgba(26,135,84,.45), inset 0 1px 0 rgba(255,255,255,.2); }
  50%      { transform: scale(1.018); box-shadow: 0 10px 32px rgba(26,135,84,.6),  inset 0 1px 0 rgba(255,255,255,.2); }
}
@keyframes msPulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.4); opacity: .55; }
}
@keyframes msProgress {
  0%   { background-position: 0 0; }
  100% { background-position: 28px 0; }
}
@keyframes msToast {
  0%   { transform: translate(-50%, -10px); opacity: 0; }
  10%  { transform: translate(-50%, 0);     opacity: 1; }
  90%  { transform: translate(-50%, 0);     opacity: 1; }
  100% { transform: translate(-50%, -10px); opacity: 0; }
}

/* striped image placeholder */
.placeholder {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(26,135,84,.10) 0 8px,
    rgba(26,135,84,.04) 8px 16px
  );
  background-color: var(--brand-grass-soft);
  color: var(--brand-grass-deep);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase;
}
.placeholder.dark {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,.06) 0 8px,
    rgba(255,255,255,.02) 8px 16px
  );
  background-color: #1f2a22;
  color: #6ed09a;
}
.placeholder.dusk {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,107,53,.16) 0 8px,
    rgba(255,107,53,.06) 8px 16px
  );
  background-color: #4a2418;
  color: #ffb89c;
}

/* common card */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

/* section header text on artboards */
.ab-h {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 600;
}
.ab-title { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.ab-sub   { font-size: 13px; color: var(--ink-2); }