/* ============================================================
   FONITEX — Child theme of Classic
   Design tokens + overrides inspirés de parapharmacie.tn
   ============================================================ */

:root {
  /* === BRAND COLORS === */
  --fx-primary:        #008872;
  --fx-primary-dark:   #00755f;
  --fx-primary-light:  #00947c;
  --fx-accent:         #e2047b;
  --fx-accent-dark:    #b0035f;
  --fx-accent-light:   #f06bb0;

  /* === NEUTRAL === */
  --fx-text:           #252525;
  --fx-text-muted:     #757575;
  --fx-border:         #e6e6e6;
  --fx-border-light:   #f0f0f0;
  --fx-bg:             #ffffff;
  --fx-bg-alt:         #f8f9fa;
  --fx-bg-dark:        #252525;

  /* === FEEDBACK === */
  --fx-success:        #28a745;
  --fx-danger:         #dc3545;
  --fx-warning:        #ffc107;
  --fx-info:           #17a2b8;

  /* === TYPOGRAPHY === */
  --fx-font-body:      "Roboto", "Helvetica Neue", Arial, sans-serif;
  --fx-font-heading:   "Roboto", "Helvetica Neue", Arial, sans-serif;
  --fx-fs-base:        14px;
  --fx-fs-sm:          12px;
  --fx-fs-lg:          16px;
  --fx-fs-h1:          28px;
  --fx-fs-h2:          22px;
  --fx-fs-h3:          18px;
  --fx-lh:             1.5;
  --fx-fw-regular:     400;
  --fx-fw-medium:      500;
  --fx-fw-bold:        700;

  /* === LAYOUT === */
  --fx-radius-sm:      4px;
  --fx-radius:         6px;
  --fx-radius-lg:      12px;
  --fx-radius-pill:    999px;
  --fx-shadow-sm:      0 1px 2px rgba(0,0,0,.06);
  --fx-shadow:         0 2px 8px rgba(0,0,0,.08);
  --fx-shadow-lg:      0 6px 24px rgba(0,0,0,.12);
  --fx-transition:     all .2s ease;
  --fx-container-max:  1280px;
}

/* ============================================================
   GLOBAL
   ============================================================ */

body {
  font-family: var(--fx-font-body);
  color: var(--fx-text);
  background: var(--fx-bg);
  font-size: var(--fx-fs-base);
  line-height: var(--fx-lh);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fx-font-heading);
  color: var(--fx-text);
  font-weight: var(--fx-fw-bold);
}

a {
  color: var(--fx-primary);
  transition: var(--fx-transition);
}
a:hover,
a:focus {
  color: var(--fx-primary-dark);
  text-decoration: none;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn-primary {
  background-color: var(--fx-primary);
  border-color: var(--fx-primary);
  border-radius: var(--fx-radius);
  font-weight: var(--fx-fw-medium);
  transition: var(--fx-transition);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--fx-primary-dark);
  border-color: var(--fx-primary-dark);
}

.btn-secondary {
  background-color: var(--fx-accent);
  border-color: var(--fx-accent);
  color: #fff;
  border-radius: var(--fx-radius);
  font-weight: var(--fx-fw-medium);
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--fx-accent-dark);
  border-color: var(--fx-accent-dark);
  color: #fff;
}

/* ============================================================
   UTILITIES
   ============================================================ */

.fx-bg-primary  { background-color: var(--fx-primary) !important; color: #fff; }
.fx-bg-accent   { background-color: var(--fx-accent)  !important; color: #fff; }
.fx-text-primary{ color: var(--fx-primary) !important; }
.fx-text-accent { color: var(--fx-accent)  !important; }