@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap");
/* ========================================
   TEMA DEFAULT — HORIZON
   Warm amber/terracotta, modern wellness

   CONTRATTO VARIABILI CSS:
   Ogni tema DEVE definire tutte le variabili
   in :root. I CSS applicativi usano SOLO var().
   ======================================== */

:root {
    /* ══ COLORI BASE ══ */
    --color-bg: #fffbf7;
    --color-bg-secondary: #faf5f0;
    --color-bg-tertiary: #f5ede4;
    --color-bg-alt: #fff7ed;
    --color-bg-card: #ffffff;
    --color-surface: #ffffff;
    --color-text: #1c1917;
    --color-text-muted: #57534e;
    --color-text-light: #766f6a;
    --color-text-secondary: #57534e;

    /* ══ BRAND ══ */
    --color-primary: #c2410c;
    --color-primary-hover: #9a3412;
    --color-primary-light: #fff7ed;
    --color-primary-rgb: 194, 65, 12;
    --color-accent: #0d7377;

    /* ══ SEMANTICI ══ */
    --color-success: #15803d;
    --color-success-bg: #b9d9c5;
    --color-success-text: #14532d;
    --color-warning: #b45309;
    --color-warning-bg: #e8cbb5;
    --color-warning-text: #78350f;
    --color-warning-light: #fef3c7;
    --color-warning-dark: #92400e;
    --color-danger: #dc2626;
    --color-danger-bg: #f4bdbd;
    --color-danger-text: #7f1d1d;
    --color-danger-hover: #b91c1c;
    --color-info: #0369a1;
    --color-info-bg: #b3d2e2;
    --color-info-text: #0c4a6e;

    /* ══ BORDI ══ */
    --color-border: #e7e0d8;
    --color-border-light: #f2ece5;

    /* ══ SIDEBAR ══ */
    --color-bg-sidebar: #1c1917;
    --color-text-sidebar: rgba(255, 255, 255, 0.8);

    /* ══ SCALA GRIGI ══ */
    --gray-50: #fafaf9;
    --gray-100: #f5f5f4;
    --gray-200: #e7e5e4;
    --gray-300: #d6d3d1;
    --gray-400: #a8a29e;
    --gray-500: #78716c;
    --gray-600: #57534e;
    --gray-700: #44403c;
    --gray-800: #292524;
    --gray-900: #1c1917;

    /* ══ ALIAS (retrocompatibilità) ══ */
    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-hover);
    --primary-light: var(--color-primary-light);
    --color-background: var(--color-bg);
    --color-card-bg: var(--color-bg-card);
    --border-color: var(--color-border);
    --bg-info-light: var(--color-info-bg);
    --info-color: var(--color-info);
    --text-muted: var(--color-text-muted);
    --shadow: var(--shadow-md);

    /* ══ TIPOGRAFIA ══ */
    --font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-heading: var(--font-family);
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ══ SPAZIATURA ══ */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* ══ BORDI & RAGGI ══ */
    --radius: 4px;
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 4px;
    --radius-xl: 6px;
    --radius-full: 4px;

    /* ══ OMBRE ══ */
    --shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.06);
    --shadow-md: 0 4px 12px rgba(28, 25, 23, 0.08);
    --shadow-lg: 0 12px 24px rgba(28, 25, 23, 0.1);
    --shadow-xl: 0 20px 40px rgba(28, 25, 23, 0.12);

    /* ══ TRANSIZIONI ══ */
    --transition: 0.2s ease;
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* ══ LAYOUT ══ */
    --container-max: 1200px;
    --navbar-height: 72px;
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 64px;
    --topbar-height: 60px;

    /* ══ Z-INDEX ══ */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-tooltip: 600;
}

/* ══ RESET ══ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: var(--font-family); font-size: var(--font-size-base); color: var(--color-text); background-color: var(--color-bg); line-height: var(--line-height-normal); }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-hover); }
img { max-width: 100%; height: auto; }

/* ══ CONTAINER ══ */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--spacing-lg); }

/* ══ TEXT UTILITIES ══ */
.text-muted { color: var(--color-text-muted); }
.text-light { color: var(--color-text-light); }
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }

/* ══ FORM ══ */
.form-control {
    width: 100%; padding: 12px 16px; border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md); font-family: var(--font-family);
    font-size: var(--font-size-base); color: var(--color-text);
    background: var(--color-bg); transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12); }
.form-control::placeholder { color: var(--color-text-light); }

/* ══ BUTTONS ══ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 20px; border: none; border-radius: var(--radius-md);
    font-family: var(--font-family); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
    cursor: pointer; transition: all var(--transition); text-decoration: none;
}
.btn-primary { background: var(--color-primary); color: white; }
.btn-primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-secondary { background: var(--color-bg); color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.btn-secondary:hover { background: var(--color-primary-light); }
.btn-danger { background: var(--color-danger); color: white; }
.btn-danger:hover { background: var(--color-danger-hover); }

/* ══ ALERTS ══ */
.alert { padding: 14px 20px; border-radius: var(--radius-md); margin-bottom: var(--spacing-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.alert-success { background: var(--color-success-bg); color: var(--color-success-text); border-left: 4px solid var(--color-success); }
.alert-error, .alert-danger { background: var(--color-danger-bg); color: var(--color-danger-text); border-left: 4px solid var(--color-danger); }
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning-text); border-left: 4px solid var(--color-warning); }
.alert-info { background: var(--color-info-bg); color: var(--color-info-text); border-left: 4px solid var(--color-info); }

/* ══ CARD ══ */
.card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-lg); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition); }
.card:hover { box-shadow: var(--shadow-md); }

/* ══ MESSAGES CONTAINER ══ */
.messages-container { max-width: 800px; margin: 100px auto var(--spacing-lg); padding: 0 var(--spacing-lg); }

/* ══ SCROLLBAR ══ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-light); }

/* ══ WCAG: option elements ══ */
select option,
.filter-select option,
.form-select option {
    background: var(--color-bg-card);
    color: var(--color-text);
}

/* ══ GRADIENTI DECORATIVI ══ */
:root {
    --gradient-stat-1: linear-gradient(135deg, #f093fb 0%, var(--color-danger) 100%);
    --gradient-stat-2: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-stat-3: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --gradient-badge-yoga: linear-gradient(135deg, #fa709a 0%, var(--color-warning) 100%);
    --gradient-badge-pilates: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
    --gradient-badge-dance: linear-gradient(135deg, #a8edea 0%, #fbc2eb 100%);
    --gradient-badge-crossfit: linear-gradient(135deg, #a6c1ee 0%, #fbc2eb 100%);
    --gradient-credits-bar: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%);
    --color-accent-bg: #e0e7ff;
    --gradient-badge-aerial: linear-gradient(135deg, #a8edea 0%, var(--color-danger-bg) 100%);
    --gradient-badge-meditation: linear-gradient(135deg, #d299c2 0%, var(--color-warning-light) 100%);
    --gradient-badge-treatment: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%);
    --gradient-badge-consultation: linear-gradient(135deg, #fdcbf1 0%, var(--color-border) 100%);
    --gradient-instagram: linear-gradient(45deg, #f09433 0%, var(--color-primary) 25%, var(--color-danger) 50%, var(--color-danger) 75%, var(--color-accent) 100%);
}