/* ═══════════════════════════════════════════════
   PONTURI.RO — Design System Variables v1.0
   Date: April 3, 2026
   
   Single source of truth for all design tokens.
   Include this file before any other stylesheet.
   ═══════════════════════════════════════════════ */

:root {
  /* ── Layout ── */
  --container: 780px;
  --container-narrow: 520px;

  /* ── Backgrounds ── */
  --bg-page: #0f172a;
  --bg-card: rgba(255,255,255,.04);
  --bg-card-subtle: rgba(255,255,255,.02);
  --bg-hover: rgba(255,255,255,.08);

  /* ── Borders ── */
  --border: rgba(255,255,255,.06);
  --border-strong: rgba(255,255,255,.10);

  /* ── Text ── */
  --text-primary: #e2e8f0;
  --text-body: #cbd5e1;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  /* ── Accents ── */
  --accent: #22d3ee;
  --accent-hover: #67e8f9;
  --accent-bg: rgba(34,211,238,.08);
  --accent-secondary: #6366f1;
  --accent-secondary-bg: rgba(99,102,241,.08);
  --success: #22c55e;
  --success-bg: rgba(34,197,94,.08);
  --warning: #f59e0b;
  --warning-bg: rgba(245,158,11,.08);
  --danger: #ef4444;
  --danger-bg: rgba(239,68,68,.08);

  /* ── Radius ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* ── Spacing ── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;

  /* ── Typography scale ── */
  --font-micro: .62rem;
  --font-small: .72rem;
  --font-body: .82rem;
  --font-large: .95rem;
  --font-h3: 1.1rem;
  --font-h2: 1.25rem;
  --font-h1: 1.35rem;
  --font-hero: 1.8rem;
}

/* ── Shared components ── */

.ds-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.ds-container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.ds-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.ds-card-subtle {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.ds-card:hover, .ds-card-hover:hover {
  background: var(--bg-hover);
}

/* ── Typography classes ── */

.ds-h1 {
  font-size: var(--font-h1);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.3;
  margin: 0 0 var(--space-sm);
}

.ds-h2 {
  font-size: var(--font-h3);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  margin: 0 0 var(--space-sm);
}

.ds-body {
  font-size: var(--font-body);
  color: var(--text-body);
  line-height: 1.65;
}

.ds-meta {
  font-size: var(--font-small);
  color: var(--text-muted);
}

.ds-micro {
  font-size: var(--font-micro);
  color: var(--text-dim);
}

/* ── Badge / Tag ── */

.ds-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-micro);
  font-weight: 600;
}

.ds-badge-accent {
  background: var(--accent-bg);
  color: var(--accent);
}

.ds-badge-warning {
  background: var(--danger-bg);
  color: var(--danger);
}

/* ── Analysis snippet (list mode) ── */

.ma-list-snippet {
  max-width: 720px;
  padding: var(--space-sm) 0 var(--space-xs);
  color: var(--text-body);
}

@media (min-width: 640px) {
  .ma-list-snippet {
    padding-left: 52px;
  }
}

/* ── Section spacing ── */

.ds-section {
  margin-bottom: var(--space-xl);
}

/* ── Link reset ── */

.ds-link {
  color: var(--accent);
  text-decoration: none;
}
.ds-link:hover {
  color: var(--accent-hover);
}


/* ═══ Phase 4: Premium Polish ═══ */

/* Featured match card */
.ds-featured {
  background: var(--bg-card);
  border: 1px solid rgba(34,211,238,.2);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  position: relative;
}
.ds-featured::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 12px rgba(34,211,238,.04);
  pointer-events: none;
}
.ds-featured:hover {
  background: var(--bg-hover);
}
.ds-featured .ma-list-snippet {
  padding-left: 0;
  max-width: none;
}
.ds-featured .ma-list-snippet div:first-child {
  font-size: var(--font-body);
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.6;
}

/* Badge polish */
.ds-badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-micro);
  font-weight: 600;
  letter-spacing: .3px;
}
.ds-badge-accent {
  background: var(--accent-bg);
  color: var(--accent);
}
.ds-badge-warning {
  background: var(--danger-bg);
  color: var(--danger);
}
.ds-badge-success {
  background: var(--success-bg);
  color: var(--success);
}
.ds-badge-secondary {
  background: var(--accent-secondary-bg);
  color: var(--accent-secondary);
}
.ds-badge-neutral {
  background: rgba(255,255,255,.06);
  color: var(--text-muted);
}

/* Hover transitions for match rows */
.ds-card-hover {
  transition: background .2s ease;
}
.ds-card-hover:hover {
  background: var(--bg-hover);
}

/* Section spacing rhythm */
.ds-section {
  margin-bottom: var(--space-xl);
}
.ds-section-title {
  font-size: var(--font-h3);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

/* Updated timestamp micro */
.ds-updated {
  font-size: var(--font-micro);
  color: var(--text-dim);
  font-style: italic;
  margin-top: var(--space-xs);
}

/* Analysis snippet in list — featured override */
.ds-featured .ma-list-snippet div[style*="font-size:var(--font-small)"] {
  font-size: var(--font-body) !important;
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}


/* ═══ Phase 5: Match Card Separation ═══ */

/* Match card wrapper — separates each match visually */
/* Match card — standalone (ponturi-azi, independent listings) */
.match-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-md);
  transition: background .15s ease;
}
.match-card:hover {
  background: var(--bg-hover);
}

/* Homepage football block: analysis snippets sit directly after fb-row */
/* match-card class is used only on standalone pages (ponturi-azi) */

/* Internal separation: analysis below match info */
.match-card .ma-list-snippet {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  padding-left: 0;
  border-top: 1px solid var(--border);
  max-width: none;
}

/* Match header (teams + time) */
.match-card .fb-row,
.match-card .pa-card {
  border: none;
  padding: 0;
  background: none;
  border-radius: 0;
}

/* ponturi-azi cards — when wrapped in .match-card */
.match-card .pa-card:hover,
.match-card .pa-top-card:hover {
  background: none;
}

/* Tags inside match card */
.match-card .ds-badge {
  margin-top: 0;
}

/* Override fb-row borders inside match-card (no double borders) */
.match-card .fb-row {
  border-bottom: none;
}

@media (max-width: 520px) {
  .match-card {
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-sm);
  }
  .match-card .ma-list-snippet {
    padding-left: 0;
  }
}