/* ─────────────────────────────────────────────────────────────
   Lunedo Design System — Tokens
   Source of truth: lib/theme.ts (React Native)
   ─────────────────────────────────────────────────────────── */

:root {
  /* ── Color · Surfaces ──────────────────────────────────── */
  --bg:        #FFFFFF;       /* App background */
  --surface:   #F7F8FA;       /* Cards, inputs, surfaces */
  --border:    rgba(0, 0, 0, 0.08);

  /* ── Color · Brand Teal ────────────────────────────────── */
  --teal:        #086E64;     /* Primary — buttons, active tab, badges */
  --teal-dark:   #065C54;     /* Hover / pressed */
  --teal-light:  #A7EDE6;     /* Backgrounds, badge fills */
  --teal-card:   #053830;     /* Card backs, meeple-detail footer */
  --teal-star:   #0AADA0;     /* Vollständig star (between teal & tealLight) */

  /* ── Color · Text ──────────────────────────────────────── */
  --text-1:    #0F172A;       /* Primary text */
  --text-2:    #64748B;       /* Secondary text */
  --text-3:    #94A3B8;       /* Placeholder, inactive elements */

  /* ── Color · Semantic ──────────────────────────────────── */
  --danger:    #EF4444;       /* Heart-icon active, errors */
  --amber:     #F59E0B;       /* Star (rating), unique-rarity */

  /* ── Type · Stack ──────────────────────────────────────── */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Segoe UI", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                  "Segoe UI", system-ui, sans-serif;

  /* ── Type · Scale (matches lib/theme.ts) ───────────────── */
  --t-xxl:  26px;  --t-xxl-w:  700;   /* Page titles  (Sammlung) */
  --t-xl:   22px;  --t-xl-w:   700;   /* Section titles */
  --t-lg:   17px;  --t-lg-w:   700;   /* Card titles */
  --t-md:   15px;  --t-md-w:   600;   /* Section headers */
  --t-base: 13px;  --t-base-w: 400;   /* Body */
  --t-sm:   11px;  --t-sm-w:   400;   /* Captions */
  --t-xs:   9px;   --t-xs-w:   500;   /* Badges, chips */

  /* ── Spacing ───────────────────────────────────────────── */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  12px;
  --sp-lg:  16px;
  --sp-xl:  20px;
  --sp-xxl: 28px;

  /* ── Radius ────────────────────────────────────────────── */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-full: 999px;

  /* ── Elevation ─────────────────────────────────────────── */
  --shadow-sm:   0 2px 4px rgba(15, 23, 42, 0.06);
  --shadow-card: 0 4px 12px rgba(15, 23, 42, 0.10);
}

/* ── Semantic helpers ─────────────────────────────────────── */
body { background: var(--bg); color: var(--text-1); font-family: var(--font-sans); }

.lu-page-title  { font-size: var(--t-xxl);  font-weight: var(--t-xxl-w);  letter-spacing: -0.02em; color: var(--text-1); }
.lu-section     { font-size: var(--t-xl);   font-weight: var(--t-xl-w);   letter-spacing: -0.01em; color: var(--text-1); }
.lu-card-title  { font-size: var(--t-lg);   font-weight: var(--t-lg-w);   color: var(--text-1); }
.lu-section-h   { font-size: var(--t-md);   font-weight: var(--t-md-w);   color: var(--text-1); }
.lu-body        { font-size: var(--t-base); font-weight: var(--t-base-w); color: var(--text-1); }
.lu-caption     { font-size: var(--t-sm);   font-weight: var(--t-sm-w);   color: var(--text-2); }
.lu-badge       { font-size: var(--t-xs);   font-weight: var(--t-xs-w);   letter-spacing: 0.06em; text-transform: uppercase; }

.lu-btn-primary {
  background: var(--teal); color: #fff;
  border-radius: var(--r-full);
  padding: 14px 28px;
  font-size: var(--t-md); font-weight: 600;
  border: 0;
}
.lu-btn-primary:hover  { background: var(--teal-dark); }
.lu-btn-primary:active { background: var(--teal-dark); transform: scale(0.98); }