/* Let's Ride Expo Modern Theme (2026)
   - Keep brand colors
   - Softer corners, subtle depth, accessible focus
   - Works with Bootstrap 5
*/
:root {
  /* Brand palette (from base.html) */
  --lr-primary: #74B9DC;   /* Light Blue */
  --lr-secondary: #49798C; /* Blue-Gray */
  --lr-dark: #0D0D0D;      /* Near black */
  --lr-accent: #73BCD9;    /* Accent */
  --lr-light: #F2F2F2;     /* Light gray */
  --lr-white: #ffffff;

  /* Light theme neutrals (site-wide) */
  --bg: #f6f8fb;           /* app background */
  --text-1: #0f172a;       /* primary text (dark) */
  --text-2: #334155;       /* secondary text */
  --muted: #64748b;        /* muted */
  --border: #d1d9e6;       /* borders on light surfaces */
  --panel: #ffffff;        /* white surface */
  --panel-muted: #f1f5f9;  /* subtle alt surface */

  /* Dark panels (navbar/editor sidebars) */
  --panel-dark: #111821;
  --panel-dark-2: #0b121b;
  --panel-dark-3: #0f1722;
  --border-dark: #223041;

  /* Gradients */
  --grad-primary: linear-gradient(135deg, var(--lr-secondary) 0%, var(--lr-primary) 100%);
  --grad-dark: linear-gradient(135deg, #000 0%, var(--lr-dark) 60%, var(--lr-secondary) 100%);

  /* Radii & Shadows */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 2px 8px rgba(2, 10, 20, 0.08);
  --shadow-md: 0 8px 30px rgba(2, 10, 20, 0.12);
  --ring: 0 0 0 3px rgba(116, 185, 220, 0.35);
}

html, body { background: var(--bg); color: var(--text-1); }

/* Typography */
body { line-height: 1.6; }
.navbar-brand, .brand-font { font-family: 'Racing Sans One', cursive; }

/* Navbar */
.navbar.navbar-dark { background: var(--grad-dark) !important; border-bottom: 1px solid rgba(255,255,255,0.06); }
.navbar .nav-link { color: rgba(255,255,255,.85) !important; }
.navbar .nav-link.active, .navbar .nav-link:focus, .navbar .nav-link:hover { color: #fff !important; }

/* Buttons */
.btn { border-radius: var(--radius-md) !important; }
.btn-primary {
  background: var(--grad-primary);
  border: 1px solid transparent;
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { filter: brightness(1.05); box-shadow: var(--shadow-md); }
.btn-outline-secondary {
  color: var(--text-1); border-color: var(--border);
}
.btn-outline-secondary:hover { background: var(--surface-3); }

/* Forms (light surfaces) */
.form-control, .form-select { background: #fff; color: var(--text-1); border: 1px solid var(--border); border-radius: var(--radius-md); }
.form-control::placeholder{ color: #8aa1b6; }
.form-control:focus { border-color: var(--lr-primary); box-shadow: var(--ring); background: #fff; }
.input-group-text { background: var(--panel-muted); color: var(--text-2); border-color: var(--border); }

/* Cards: dark header (light text) + light body (dark text) */
.card { background: var(--panel); color: var(--text-1); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card:hover { box-shadow: var(--shadow-md); }
.card-header { background: var(--lr-dark); color: #fff; border-bottom: 1px solid rgba(0,0,0,0.15); }
.card .card-title { color: var(--text-1); }
.card-header .card-title { color: #fff; }
.card-body { background: var(--panel); color: var(--text-1); }

/* Tables (light) */
.table { color: var(--text-1); background: var(--panel); }
.table thead th { color: var(--text-2); border-bottom: 1px solid var(--border); background: var(--panel-muted); }
.table tbody tr { border-color: var(--border); }
.table-striped>tbody>tr:nth-of-type(odd) { --bs-table-accent-bg: var(--panel-muted); color: var(--text-1); }

/* Alerts */
.alert-info { background: rgba(116, 185, 220, 0.12); color: var(--text-1); border: 1px solid rgba(116, 185, 220, 0.35); border-radius: var(--radius-md); }

/* Badges */
.badge { border-radius: 999px !important; }
.badge.bg-primary { background: var(--grad-primary) !important; }

/* Footer */
footer.footer-gradient { background: linear-gradient(180deg, #0f1620, #0b1119); border-top: 1px solid var(--border); color: var(--text-2); }

/* Hero */
.hero-section { background: var(--grad-dark); color: #fff; position: relative; overflow: hidden; }
.hero-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(1200px 400px at 20% -10%, rgba(116,185,220,.25), transparent 60%), radial-gradient(800px 300px at 80% 10%, rgba(73,121,140,.25), transparent 60%); }
.hero-content { position: relative; z-index: 1; }

/* Utility */
.rounded-soft { border-radius: var(--radius-md) !important; }
.surface { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.shadow-soft { box-shadow: var(--shadow-sm); }

/* GrapesJS editor containers */
.gjs-one-bg { background-color: var(--panel-dark-2); }
.gjs-two-color { color: #e5e7eb; }
.gjs-three-bg { background-color: var(--panel-dark-3); }