/* Mazzolaluce Design System v0.1.3 (2025-09-04)
   Purpose: centralize style tokens (colors, spacing, typography, radii, shadows) and a few primitive utility classes.
   Usage: import this file before theme/component styles and replace hard-coded values with CSS variables.
*/

:root {
  /* Brand colors */
  --color-brand-primary: #265B87; /* used in links, buttons primary */
  --color-brand-secondary: #243238; /* dark base (headers, footers) */
  --color-brand-accent: #f2b705; /* callouts, highlights */

  /* Semantic colors */
  --color-bg: #ffffff;
  --color-surface: #f7f9fb;
  --color-text: #243238;
  --color-text-muted: #6b7b86;
  --color-border: #e1e8ef;
  --color-success: #2e7d32;
  --color-warning: #ed6c02;
  --color-danger: #c62828;

  /* Area-specific (theme) */
  --color-footer-bg: #EEF3F6;
  --color-footer-text: #0B2D42;

  /* Typography */
  --font-family-base: "Montserrat", sans-serif;
  --font-family-heading: "Montserrat", sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --line-height-base: 1.5;

  /* Spacing scale (4-based) */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radii */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-round: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 10px rgba(0,0,0,0.12);
  --shadow-lg: 0 10px 24px rgba(0,0,0,0.18);

  /* Z-index scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
}

/* Typography primitives */
body { color: var(--color-text); background: var(--color-bg); font-family: var(--font-family-base); line-height: var(--line-height-base); }
h1, h2, h3, h4, h5, h6 { color: var(--color-text); font-family: var(--font-family-heading); }

/* Links */
a { color: var(--color-brand-primary); }
a:hover { color: #1f4d72; }

/* Buttons primitive (opt-in utility) */
.btn, .button-1, .button-2 { 
  background-color: var(--color-brand-primary); 
  color: #fff; 
  border: 1px solid var(--color-brand-primary);
  border-radius: var(--radius-md);
}
.btn:hover, .button-1:hover, .button-2:hover { 
  background-color: #1f4d72; 
  border-color: #1f4d72; 
}

/* Utility spacing helpers (opt-in) */
.u-mt-4{ margin-top: var(--space-4);} .u-mb-4{ margin-bottom: var(--space-4);} .u-pt-4{ padding-top: var(--space-4);} .u-pb-4{ padding-bottom: var(--space-4);} 
.u-mt-8{ margin-top: var(--space-8);} .u-mb-8{ margin-bottom: var(--space-8);} .u-pt-8{ padding-top: var(--space-8);} .u-pb-8{ padding-bottom: var(--space-8);} 

/* Border and surface helpers */
.u-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }

/* Forms */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select, textarea {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-brand-primary); box-shadow: 0 0 0 3px rgba(38,91,135,0.15); }

/* Tokens mapping for existing hard-coded values (progressively adopt) */
.main-pager ul a, .main-pager ul span { background-color: var(--color-brand-secondary); }
.main-pager ul a:hover, .main-pager ul .current-page span { background-color: var(--color-brand-primary); }

/* v0.1.1 additions: secondary/outline buttons, alerts, badges, container, extended spacing */

/* Buttons - secondary and outline variants (opt-in) */
.button-secondary {
  background-color: var(--color-brand-secondary);
  color: #fff;
  border: 1px solid var(--color-brand-secondary);
  border-radius: var(--radius-md);
}
.button-secondary:hover {
  background-color: #1b262b; /* slightly darker of secondary */
  border-color: #1b262b;
}
.button-outline {
  background-color: transparent;
  color: var(--color-brand-primary);
  border: 1px solid var(--color-brand-primary);
  border-radius: var(--radius-md);
}
.button-outline:hover {
  background-color: rgba(38,91,135,0.08);
}

/* Alerts */
.alert { padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.alert-success { background: #e8f5e9; color: var(--color-success); border-color: #c8e6c9; }
.alert-warning { background: #fff3e0; color: var(--color-warning); border-color: #ffe0b2; }
.alert-danger  { background: #ffebee; color: var(--color-danger);  border-color: #ffcdd2; }

/* Badges */
.badge { display: inline-block; padding: 2px 8px; font-size: var(--font-size-sm); border-radius: var(--radius-round); background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); }
.badge-primary { background: var(--color-brand-primary); color: #fff; border-color: var(--color-brand-primary); }
.badge-accent  { background: var(--color-brand-accent); color: #0b0b0b; border-color: var(--color-brand-accent); }

/* Container width tokens (for layout helpers, no direct application) */
:root {
  --container-max: 1200px;
  --container-padding: 20px;
}
.container-max { max-width: var(--container-max); padding-left: var(--container-padding); padding-right: var(--container-padding); margin-left: auto; margin-right: auto; }

/* More spacing helpers */
.u-mt-2{ margin-top: var(--space-2);} .u-mb-2{ margin-bottom: var(--space-2);} .u-pt-2{ padding-top: var(--space-2);} .u-pb-2{ padding-bottom: var(--space-2);} 
.u-mt-10{ margin-top: var(--space-10);} .u-mb-10{ margin-bottom: var(--space-10);} .u-pt-10{ padding-top: var(--space-10);} .u-pb-10{ padding-bottom: var(--space-10);} 
.u-mt-12{ margin-top: var(--space-12);} .u-mb-12{ margin-bottom: var(--space-12);} .u-pt-12{ padding-top: var(--space-12);} .u-pb-12{ padding-bottom: var(--space-12);} 
.u-mt-16{ margin-top: var(--space-16);} .u-mb-16{ margin-bottom: var(--space-16);} .u-pt-16{ padding-top: var(--space-16);} .u-pb-16{ padding-bottom: var(--space-16);} 


/* Typography utilities: white text and headings (opt-in) */
/* Use .heading-white on a specific heading element (h1..h6) to make it white */
.heading-white { color: #fff !important; }
/* Use .u-text-white to make any element's text white */
.u-text-white { color: #fff !important; }
/* Use .h-white on a container to make all h1..h6 inside white */
.h-white h1, .h-white h2, .h-white h3, .h-white h4, .h-white h5, .h-white h6 { color: #fff !important; }