/**
 * WooShop App - Font System
 * ==========================
 * Standardized typography across the entire application.
 *
 * BODY / GENERAL TEXT:  Roboto Flex (variable font, optical sizing)
 * UI ELEMENTS:          Roboto (buttons, nav, labels, badges, inputs)
 *
 * USAGE:
 *   1. Include Google Fonts in <head>:
 *      <link href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,300..900&family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
 *   2. Include this CSS file:
 *      <link rel="stylesheet" href="{{ asset('assets/css/fonts.css') }}">
 *   3. Done. All elements are styled automatically.
 *
 * CSS VARIABLES:
 *   --font-body:  "Roboto Flex", "Roboto", Helvetica, sans-serif
 *   --font-ui:    "Roboto", Helvetica, sans-serif
 *
 * @version 1.0.0
 */

:root {
  --font-body: "Roboto Flex", "Roboto", Helvetica, sans-serif;
  --font-ui:   "Roboto", Helvetica, sans-serif;
}

/* ==================== Body / General Text ==================== */

body {
  font-family: var(--font-body);
}

p,
li,
td,
th,
dd,
dt,
blockquote,
figcaption,
.card-body,
.page-content,
.text-body,
article {
  font-family: var(--font-body);
}

/* ==================== Headings ==================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-body);
}

/* ==================== UI Elements - Roboto ==================== */

/* Buttons */
.btn,
button,
[type="button"],
[type="submit"],
[type="reset"] {
  font-family: var(--font-ui);
}

/* Navigation */
.nav-link,
.navbar-nav,
.sidebar-body .nav,
.sidebar .nav-link,
.dropdown-item,
.breadcrumb-item,
.page-link {
  font-family: var(--font-ui);
}

/* Form inputs & labels */
.form-control,
.form-select,
.form-label,
.form-check-label,
.input-group-text,
textarea {
  font-family: var(--font-ui);
}

/* Badges & labels */
.badge,
.tag,
.label,
.chip {
  font-family: var(--font-ui);
}

/* Tables header */
thead th,
.table th {
  font-family: var(--font-ui);
}

/* Tabs */
.nav-tabs .nav-link,
.nav-pills .nav-link {
  font-family: var(--font-ui);
}

/* Alerts & toasts */
.alert,
.toast-header {
  font-family: var(--font-ui);
}

/* Modal header */
.modal-title {
  font-family: var(--font-ui);
}

/* Card titles */
.card-title {
  font-family: var(--font-ui);
}

/* Footer */
.site-footer,
footer {
  font-family: var(--font-ui);
}

/* Auth-specific UI */
.auth-link,
.auth-title,
.auth-subtitle {
  font-family: var(--font-ui);
}

/* Landing CTA */
.landing-actions .btn,
.btn-landing-primary,
.btn-landing-secondary {
  font-family: var(--font-ui);
}

/* Toggle buttons */
.lava-toggle,
.bg-toggle-btn {
  font-family: var(--font-ui);
}

/* Sidebar specific */
.sidebar-header,
.sidebar-brand-name {
  font-family: var(--font-ui);
}

/* Tooltips & popovers */
.tooltip-inner,
.popover-header,
.popover-body {
  font-family: var(--font-ui);
}