/* ============================================================
   CanchApp — Colors & Type foundation
   Recreational soccer platform · Barranquilla, Colombia
   Light theme only. Built for outdoor sunlight readability.
   ============================================================ */

/* Fonts are loaded from Google Fonts CDN (see note in README).
   Sora    → headlines (700, tight tracking)
   Inter   → body & labels (400 / 600) */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Brand / Color primitives ---------- */
  --bg:            #F7F8FA;  /* app background */
  --surface:       #FFFFFF;  /* cards, sheets */
  --surface-sunk:  #F1F3F6;  /* inset wells, skeletons */

  --primary:       #0D7A6E;  /* Caribbean teal — actions, links, icons */
  --primary-700:   #0A6359;  /* hover / pressed teal */
  --primary-050:   #E6F4F2;  /* teal-tinted badge bg */

  --accent:        #F5A623;  /* golden yellow — hero CTAs only, sparingly */
  --accent-700:    #D88E12;  /* hover / pressed yellow */
  --accent-050:    #FEF3DC;  /* yellow-tinted badge bg */

  --ink:           #111827;  /* primary text */
  --muted:         #6B7280;  /* secondary text, labels */
  --border:        #E5E7EB;  /* hairline borders, dividers */

  --error:         #DC2626;
  --error-050:     #FCEBEB;
  --success:       #16A34A;
  --success-050:   #E7F6EC;

  /* ---------- Semantic color roles ---------- */
  --color-bg:            var(--bg);
  --color-surface:       var(--surface);
  --color-text:          var(--ink);
  --color-text-muted:    var(--muted);
  --color-link:          var(--primary);
  --color-border:        var(--border);
  --color-focus-ring:    rgba(13, 122, 110, 0.35);

  /* ---------- Type families ---------- */
  --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---------- Type scale (mobile-first, dense) ---------- */
  --text-display: 700 34px/1.1   var(--font-display);
  --text-h1:      700 26px/1.2   var(--font-display);
  --text-h2:      700 21px/1.25  var(--font-display);
  --text-h3:      600 17px/1.3   var(--font-display);
  --text-body:    400 15px/1.5   var(--font-body);
  --text-body-strong: 600 15px/1.5 var(--font-body);
  --text-label:   600 13px/1.35  var(--font-body);
  --text-caption: 400 13px/1.4   var(--font-body);
  --text-micro:   600 11px/1.3   var(--font-body);

  --tracking-display: -0.02em;  /* tight tracking on Sora headlines */
  --tracking-tight:   -0.01em;
  --tracking-caps:     0.04em;  /* uppercase micro labels */

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---------- Radii ---------- */
  --radius-btn:   10px;  /* buttons */
  --radius-card:  16px;  /* cards, sheets */
  --radius-input: 10px;  /* inputs */
  --radius-pill:  999px; /* badges, chips */
  --radius-sm:    8px;

  /* ---------- Elevation (subtle, functional — no glow) ---------- */
  --shadow-card:  0 1px 3px rgba(0,0,0,0.06);
  --shadow-raised: 0 4px 12px rgba(17,24,39,0.08);
  --shadow-sheet: 0 -4px 24px rgba(17,24,39,0.10);

  /* ---------- Layout ---------- */
  --tap-min: 44px;       /* minimum touch target */
  --app-max: 440px;      /* mobile content max width */
  --header-h: 56px;
  --tabbar-h: 60px;
}

/* ============================================================
   Semantic element styles — apply directly to tags/classes
   ============================================================ */
.cc-display { font: var(--text-display); letter-spacing: var(--tracking-display); color: var(--ink); margin: 0; }
.cc-h1 { font: var(--text-h1); letter-spacing: var(--tracking-display); color: var(--ink); margin: 0; }
.cc-h2 { font: var(--text-h2); letter-spacing: var(--tracking-tight); color: var(--ink); margin: 0; }
.cc-h3 { font: var(--text-h3); letter-spacing: var(--tracking-tight); color: var(--ink); margin: 0; }
.cc-body { font: var(--text-body); color: var(--ink); margin: 0; }
.cc-body-strong { font: var(--text-body-strong); color: var(--ink); margin: 0; }
.cc-label { font: var(--text-label); color: var(--ink); margin: 0; }
.cc-caption { font: var(--text-caption); color: var(--muted); margin: 0; }
.cc-micro { font: var(--text-micro); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--muted); margin: 0; }
.cc-link { color: var(--primary); text-decoration: none; font-weight: 600; }
.cc-link:hover { color: var(--primary-700); text-decoration: underline; }