@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
  /* Primary Colors - CLER Logo Blue (#4b78ab) */
  --color-primary: #4b78ab;
  --color-primary-light: #f0f4f8;
  --color-primary-lighter: #f8fafc;
  --color-primary-dark: #3a5f88;
  --color-primary-border: rgba(75, 120, 171, 0.2);
  --color-primary-border-strong: rgba(75, 120, 171, 0.4);
  --color-primary-shadow: rgba(75, 120, 171, 0.1);

  /* Neutral Colors - Slate Scale */
  --color-text: #1e293b;
  --color-text-light: #475569;
  --color-text-lighter: #64748b;
  --color-text-dark: #0f172a;
  --color-text-darkest: #020617;
  --color-white: #ffffff;
  --color-bg-light: #f8fafc;
  --color-bg-gray: #f1f5f9;
  --color-bg-gray-dark: #e2e8f0;
  --color-border: #f1f5f9;
  --color-border-medium: #e2e8f0;

  /* Accent Colors */
  --color-danger: #ef4444;
  --color-danger-bg: rgba(239, 68, 68, 0.1);
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;

  /* Forecast Colors */
  --color-forecast: #d97706;
  --color-forecast-light: #fffbeb;
  --color-forecast-lighter: #fef3c7;
  --color-forecast-border: #f59e0b;
  --color-forecast-text: #92400e;
  --color-forecast-input: #fcd34d;

  /* Category Colors (Polished for premium look - Matches reference site) */
  --cat-produzione-rgb: 0, 188, 212;   /* Cyan */
  --cat-materiali-rgb: 244, 67, 54;    /* Red */
  --cat-personale-rgb: 76, 175, 80;    /* Green */
  --cat-mezzi-rgb: 233, 30, 99;        /* Pink/Magenta */
  --cat-subappalti-rgb: 255, 193, 7;   /* Amber/Tan */
  --cat-totale-rgb: 189, 189, 189;     /* Gray */
  --cat-alpha-main: 1;
  --cat-alpha-budget: 0.15;

  /* Budget Theme Tokens (Reference Gold) */
  --color-budget-bg: #fff9c4;
  --color-budget-accent: #827717;
  --color-budget-border: #fbc02d;
  --color-budget-text: #33691e;

  /* Typography */
  --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-size-base: 14px;
  --font-size-sm: 0.875rem;
  --font-size-md: 0.9375rem;
  --font-size-lg: 1rem;
  --font-size-xl: 1.125rem;
  --font-size-2xl: 1.25rem;
  --font-size-3xl: 1.5rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;
  --font-weight-black: 800;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;
  --spacing-4xl: 64px;

  /* Borders & Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  --border-width: 1px;

  /* Shadows (More premium) */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 35px -10px rgba(0, 0, 0, 0.16), 0 12px 14px -8px rgba(0, 0, 0, 0.08);
  --shadow-panel: -12px 0 24px -6px rgba(0, 0, 0, 0.12);
  --shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  --shadow-input: 0 0 0 4px var(--color-primary-shadow);

  /* Layout — top-global-nav is position:fixed; body reserves --nav-height automatically
     (see navigation.css). Use --page-inset-top for inner shell padding only. */
  --nav-height: 36px;
  --personale-commessa-bar-height: 52px;
  --page-max-width: 1400px;
  --page-padding-x: var(--spacing-xl);
  --page-padding-y: var(--spacing-xl);
  --page-gap-top: var(--spacing-xl);
  --page-inset-top: var(--page-gap-top);
  --page-offset-top: calc(var(--nav-height) + var(--page-gap-top));
  --glass-header-top: calc(var(--nav-height) + var(--spacing-md));
  --page-content-gap: var(--spacing-lg);
  --page-section-gap: var(--spacing-lg);
  --page-header-gap: var(--spacing-lg);
  --page-header-pb: var(--spacing-lg);
  --page-subtitle-size: var(--font-size-sm);
  --color-text-secondary: var(--color-text-light);
  --analytic-header-height: 272px;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-panel: 0.5s cubic-bezier(0.4, 0, 0.6, 1);

  /* Z-Index Scale */
  --z-dropdown: 100;
  --z-sticky-header: 200;
  --z-sticky-column: 150;
  --z-side-panel: 300;
  --z-analytic-header: 400;
  --z-loading: 500;
  --z-search-dropdown: 600;
  --z-modal: 1000;

  /* Table Styles */
  --table-header-bg: var(--color-text-dark);
  --table-header-text: var(--color-white);
  --table-row-even: var(--color-bg-light);
  --table-row-hover: var(--color-bg-gray);
  --table-border: var(--color-border-medium);
  --table-sticky-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --color-grid-heavy: var(--color-text-darkest);
}

/* Category Semantic Classes */
.produzione { --cat-rgb: var(--cat-produzione-rgb); }
.materiali   { --cat-rgb: var(--cat-materiali-rgb); }
.personale   { --cat-rgb: var(--cat-personale-rgb); }
.mezzi       { --cat-rgb: var(--cat-mezzi-rgb); }
.subappalti  { --cat-rgb: var(--cat-subappalti-rgb); }
.totali      { --cat-rgb: var(--cat-totale-rgb); }

/* Category Color Utility Classes - Reusable alpha variants */
/* Usage: Add class .cat-bg-15, .cat-bg-12, .cat-bg-8 to any element inside a category-scoped parent */
.cat-bg-15 {
  background: rgba(var(--cat-rgb), 0.15) !important;
}

.cat-bg-12 {
  background: rgba(var(--cat-rgb), 0.12) !important;
}

.cat-bg-08 {
  background: rgba(var(--cat-rgb), 0.08) !important;
}

.cat-bg-05 {
  background: rgba(var(--cat-rgb), 0.05) !important;
}

/* Category text colors - Derived darker variants for contrast */
.cat-text-produzione { color: color-mix(in srgb, rgb(var(--cat-produzione-rgb)), #000 40%); }
.cat-text-materiali  { color: color-mix(in srgb, rgb(var(--cat-materiali-rgb)), #000 30%); }
.cat-text-personale  { color: color-mix(in srgb, rgb(var(--cat-personale-rgb)), #000 40%); }
.cat-text-mezzi      { color: color-mix(in srgb, rgb(var(--cat-mezzi-rgb)), #000 30%); }
.cat-text-subappalti { color: color-mix(in srgb, rgb(var(--cat-subappalti-rgb)), #000 40%); }