/* ============================================
   CAPRICE PRODUCTION - TYPOGRAPHY SYSTEM
   Centralisation de tous les styles de texte
   ============================================ */

/* ========================= */
/*   VARIABLES TYPOGRAPHIE   */
/* ========================= */
:root {
  /* Font Families */
  --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-mono: 'Courier New', Courier, monospace;

  /* Font Sizes */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.85rem;      /* 13.6px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.1rem;       /* 17.6px */
  --text-xl: 1.2rem;       /* 19.2px */
  --text-2xl: 1.3rem;      /* 20.8px */
  --text-3xl: 1.6rem;      /* 25.6px */
  --text-4xl: 1.8rem;      /* 28.8px */
  --text-5xl: 2rem;        /* 32px */
  --text-6xl: 2.5rem;      /* 40px */

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line Heights */
  --leading-tight: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  --leading-loose: 1.8;

  /* Letter Spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
}

/* ========================= */
/*      HEADINGS             */
/* ========================= */

/* Page Title (h1) - Main page heading */
h1, .h1, .page-title {
  font-size: var(--text-6xl);
  font-weight: var(--font-bold);
  background: linear-gradient(135deg, var(--rose-fuchsia), var(--rouge-passion));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 15px 0;
  line-height: var(--leading-tight);
}

/* Section Title (h2) - Major section headings */
h2, .h2, .section-title {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--rose-fuchsia);
  margin: 35px 0 15px 0;
  line-height: var(--leading-tight);
  padding-bottom: 10px;
}

/* Subsection Title (h3) - Minor section headings */
h3, .h3, .subsection-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--blanc-pur);
  margin: 25px 0 12px 0;
  line-height: var(--leading-tight);
}

/* Small Heading (h4) */
h4, .h4 {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--blanc-pur);
  margin: 20px 0 10px 0;
  line-height: var(--leading-normal);
}

/* Tiny Heading (h5, h6) */
h5, .h5, h6, .h6 {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--gris-perle);
  margin: 15px 0 8px 0;
  line-height: var(--leading-normal);
}

/* ========================= */
/*      BODY TEXT            */
/* ========================= */

/* Default paragraph styling */
p, .text-base {
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--gris-perle);
  margin: 0 0 15px 0;
}

/* Large text */
.text-lg {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

/* Small text */
.text-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* Extra small text */
.text-xs {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

/* ========================= */
/*      TEXT COLORS          */
/* ========================= */

.text-primary {
  color: var(--rose-fuchsia) !important;
}

.text-secondary {
  color: var(--rouge-passion) !important;
}

.text-white {
  color: var(--blanc-pur) !important;
}

.text-gray {
  color: var(--gris-perle) !important;
}

.text-muted {
  color: #999 !important;
}

.text-dark {
  color: #333 !important;
}

.text-success {
  color: #4caf50 !important;
}

.text-warning {
  color: #ff9800 !important;
}

.text-error, .text-danger {
  color: #f44336 !important;
}

/* Gradient text effect */
.text-gradient {
  background: linear-gradient(135deg, var(--rose-fuchsia), var(--rouge-passion));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ========================= */
/*      FONT WEIGHTS         */
/* ========================= */

.font-normal {
  font-weight: var(--font-normal);
}

.font-medium {
  font-weight: var(--font-medium);
}

.font-semibold {
  font-weight: var(--font-semibold);
}

.font-bold {
  font-weight: var(--font-bold);
}

/* ========================= */
/*      TEXT ALIGNMENT       */
/* ========================= */

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

/* ========================= */
/*      FORM LABELS          */
/* ========================= */

label, .label, .form-label {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--blanc-pur);
  margin-bottom: 8px;
}

.label-sm {
  font-size: var(--text-sm);
}

.label-required::after {
  content: " *";
  color: var(--rouge-passion);
}

/* Helper text for forms */
.field-help, .form-help {
  display: block;
  font-size: var(--text-sm);
  color: #999;
  margin-top: 5px;
  line-height: var(--leading-normal);
}

/* ========================= */
/*      LISTS                */
/* ========================= */

ul, ol {
  margin: 0 0 15px 20px;
  padding: 0;
  line-height: var(--leading-relaxed);
}

li {
  margin: 5px 0;
  color: var(--gris-perle);
}

/* Unstyled list */
.list-unstyled {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ========================= */
/*      TABLES               */
/* ========================= */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

th {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--blanc-pur);
  text-align: left;
  padding: 10px;
  background: rgba(255, 255, 255, 0.05);
}

td {
  font-size: var(--text-base);
  color: var(--gris-perle);
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

th.text-center, td.text-center {
  text-align: center;
}

th.text-right, td.text-right {
  text-align: right;
}

/* ========================= */
/*      SPECIAL TEXT         */
/* ========================= */

/* Subtitle / Lead text */
.subtitle, .lead {
  font-size: var(--text-lg);
  color: var(--gris-perle);
  line-height: var(--leading-relaxed);
  margin: 0 0 20px 0;
}

/* Form subtitle */
.form-subtitle {
  text-align: center;
  color: var(--gris-perle);
  margin-bottom: 30px;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

/* Muted text */
.text-muted {
  color: #999;
  opacity: 0.8;
}

/* Uppercase text */
.text-uppercase {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Monospace text */
.text-mono, code, pre {
  font-family: var(--font-mono);
}

/* Truncate text with ellipsis */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========================= */
/*      STATUS TEXT          */
/* ========================= */

.status-text {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  padding: 5px 12px;
  border-radius: 20px;
  display: inline-block;
}

.status-pending {
  color: #ff9800;
  background: rgba(255, 152, 0, 0.1);
}

.status-accepted, .status-success {
  color: #4caf50;
  background: rgba(76, 175, 80, 0.1);
}

.status-in-progress {
  color: #2196f3;
  background: rgba(33, 150, 243, 0.1);
}

.status-delivered, .status-completed {
  color: #9c27b0;
  background: rgba(156, 39, 176, 0.1);
}

.status-rejected, .status-cancelled, .status-error {
  color: #f44336;
  background: rgba(244, 67, 54, 0.1);
}

/* ========================= */
/*      BADGES & PILLS       */
/* ========================= */

.badge, .pill {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--blanc-pur);
  background: var(--rose-fuchsia);
  padding: 4px 10px;
  border-radius: 12px;
  line-height: 1;
}

.badge-sm {
  font-size: 0.7rem;
  padding: 3px 8px;
}

.badge-lg {
  font-size: var(--text-sm);
  padding: 6px 14px;
}

/* ========================= */
/*      LINKS                */
/* ========================= */

a {
  color: var(--rose-fuchsia);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--rouge-passion);
  text-decoration: underline;
}

a.link-muted {
  color: var(--gris-perle);
}

a.link-muted:hover {
  color: var(--blanc-pur);
}

/* ========================= */
/*      STATS VALUES         */
/* ========================= */

.stat-value, .stat-number {
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  color: var(--blanc-pur);
  line-height: 1;
}

.stat-label {
  font-size: var(--text-sm);
  color: var(--gris-perle);
  font-weight: var(--font-normal);
  margin-top: 5px;
}

/* ========================= */
/*      PRICE / MONEY        */
/* ========================= */

.price, .money {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--rose-fuchsia);
}

.price-sm {
  font-size: var(--text-2xl);
}

.price-lg {
  font-size: var(--text-6xl);
}

.currency {
  font-size: 0.7em;
  font-weight: var(--font-normal);
  opacity: 0.8;
}

/* ========================= */
/*      RESPONSIVE           */
/* ========================= */

@media (max-width: 768px) {
  /* Reduce heading sizes on mobile */
  h1, .h1, .page-title {
    font-size: var(--text-5xl);
  }

  h2, .h2, .section-title {
    font-size: var(--text-3xl);
  }

  h3, .h3, .subsection-title {
    font-size: var(--text-lg);
  }

  .stat-value, .stat-number {
    font-size: var(--text-4xl);
  }

  .price, .money {
    font-size: var(--text-3xl);
  }

  .price-lg {
    font-size: var(--text-5xl);
  }
}

@media (max-width: 560px) {
  /* Further reduce on small mobile */
  h1, .h1, .page-title {
    font-size: var(--text-4xl);
  }

  h2, .h2, .section-title {
    font-size: var(--text-2xl);
  }

  h3, .h3, .subsection-title {
    font-size: var(--text-base);
  }

  .subtitle, .lead {
    font-size: var(--text-base);
  }

  .stat-value, .stat-number {
    font-size: var(--text-3xl);
  }
}

/* ========================= */
/*      DARK THEME           */
/* ========================= */

/* Light background variants (for manage.html, plans.html) */
.light-theme h1, .light-theme .h1 {
  color: #333;
  background: none;
  -webkit-text-fill-color: inherit;
}

.light-theme h2, .light-theme .h2 {
  color: #667eea;
  border-bottom-color: rgba(102, 126, 234, 0.3);
}

.light-theme p, .light-theme .text-base {
  color: #555;
}

.light-theme .text-muted {
  color: #666;
}

.light-theme label {
  color: #333;
}

.light-theme th {
  color: #333;
  background: #f0f0f0;
}

.light-theme td {
  color: #555;
  border-bottom-color: #eee;
}