/* ═══════════════════════════════════════════════════════
   WES — Shared Stylesheet (style.css)
   Used by: index.html, app.html
   Rev: 1 — 2026-04-12
   ═══════════════════════════════════════════════════════ */

/* ─── FONTS ─── */
@font-face {
  font-family: 'UTMAvo';
  src: url('./fronts/UTMAvo.ttf') format('truetype');
  font-weight: 400; font-style: normal;
}
@font-face {
  font-family: 'UTMAvo';
  src: url('./fronts/UTMAvoBold.ttf') format('truetype');
  font-weight: 700; font-style: normal;
}
@font-face {
  font-family: 'UTMAvo';
  src: url('./fronts/UTMAvoBold_Italic.ttf') format('truetype');
  font-weight: 700; font-style: italic;
}
@font-face {
  font-family: 'UTMAvo';
  src: url('./fronts/UTMAvoItalic.ttf') format('truetype');
  font-weight: 400; font-style: italic;
}

/* ─── CSS VARIABLES ─── */
:root {
  /* Backgrounds */
  --bg: #ffffff;
  --bg2: #f7f7f8;
  --bg3: #fdf1f1;
  --bg4: #f0f0f2;
  --panel: rgba(255,255,255,0.9);
  --card: #ffffff;

  /* Brand colours */
  --red: #DC1C1C;
  --red2: #ff3333;
  --red-dark: #a01010;
  --red-deep: #7a0a0a;
  --gold: #DC1C1C;
  --gold2: #b01010;
  --cyan: #DC1C1C;
  --cyan2: #ff3333;
  --accent: #b01010;
  --green: #16a34a;
  --blue: #6366f1;
  --purple: #a855f7;

  /* Text */
  --text: #1a1a1a;
  --text2: #6b7280;
  --text3: #9ca3af;
  --muted: #6b7280;

  /* Borders & effects */
  --border: rgba(220,28,28,0.15);
  --glow: 0 4px 24px rgba(220,28,28,0.12);

  /* Radii */
  --r: 16px;
  --radius: 16px;
  --radius-sm: 8px;

  /* Layout (app) */
  --sidebar-w: 260px;
  --header-h: 56px;
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'UTMAvo', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}
a { color: var(--red); text-decoration: none; }
button { cursor: pointer; font-family: inherit; }

/* ─── COMMON UTILITIES ─── */
.section-label { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--red); margin-bottom: 12px; }
.section-title { font-family: 'UTMAvo', sans-serif; font-weight: 700; font-size: clamp(24px, 3vw, 36px); line-height: 1.2; margin-bottom: 8px; color: #1a1a1a; }
.section-sub { color: var(--text2); font-size: 14px; margin-bottom: 32px; }

/* ─── COMMON BUTTONS ─── */
.btn-connect {
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  color: #fff; border: none; border-radius: 10px;
  padding: 10px 22px; font-family: 'UTMAvo', sans-serif; font-weight: 700; font-size: 13px;
  cursor: pointer; letter-spacing: 0.5px;
  box-shadow: 0 4px 16px rgba(220,28,28,0.35); transition: all 0.3s;
}
.btn-connect:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(220,28,28,0.5); }
.btn-connect.connected { background: #1a2d1a; border: 1px solid #4ade80; color: #4ade80; box-shadow: none; font-size: 12px; }

/* ─── FOOTER ─── */
footer {
  border-top: 1px solid rgba(220,28,28,0.15); padding: 40px 60px;
  display: flex; justify-content: space-between; align-items: center;
  background: #1a1a1a; color: #ccc;
}
.footer-logo { display: flex; align-items: center; gap: 12px; }
.footer-note { font-size: 12px; color: #888; }
.footer-links { display: flex; gap: 20px; }
.footer-links a { font-size: 12px; color: #888; text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--red2); }