/* =============================================================================
   SEDNA DESIGN SYSTEM - SIZE UTILITIES
   Utility classes per gestione centralizzata dimensioni
   ============================================================================= */

/* =============================================================================
   SIZE VARIANTS - Ridefinizione CSS Variables
   ============================================================================= */

/* ✅ SMALL SIZE: 87.5% delle dimensioni base */
.sedna-app.sedna-size-sm {
    /* Typography scale ridotta */
    --sedna-text-xs: 0.6563rem;    /* 10.5px (era 12px) */
    --sedna-text-sm: 0.7656rem;    /* 12.25px (era 14px) */
    --sedna-text-base: 0.875rem;   /* 14px (era 16px) */
    --sedna-text-lg: 0.9844rem;    /* 15.75px (era 18px) */
    --sedna-text-xl: 1.0938rem;    /* 17.5px (era 20px) */
    --sedna-text-2xl: 1.3125rem;   /* 21px (era 24px) */
    --sedna-text-3xl: 1.6406rem;   /* 26.25px (era 30px) */
    --sedna-text-4xl: 1.9688rem;   /* 31.5px (era 36px) */
    --sedna-text-5xl: 2.625rem;    /* 42px (era 48px) */

    /* Control heights ridotte */
    --sedna-control-height-sm: 1.75rem;  /* 28px (era 32px) */
    --sedna-control-height-md: 2.1875rem; /* 35px (era 40px) */
    --sedna-control-height-lg: 2.625rem;  /* 42px (era 48px) */

    /* Spacing ridotto (opzionale - commentato per ora) */
    /* 
    --sedna-space-1: 0.21875rem;
    --sedna-space-2: 0.4375rem;
    --sedna-space-3: 0.65625rem;
    --sedna-space-4: 0.875rem;
    */
}

/* ✅ MEDIUM SIZE: 100% (default) - no changes needed */
.sedna-app.sedna-size-md {
    /* Usa valori di default da sedna.tokens.css */
}

/* ✅ LARGE SIZE: 112.5% delle dimensioni base */
.sedna-app.sedna-size-lg {
    /* Typography scale ingrandita */
    --sedna-text-xs: 0.8438rem;    /* 13.5px (era 12px) */
    --sedna-text-sm: 0.9844rem;    /* 15.75px (era 14px) */
    --sedna-text-base: 1.125rem;   /* 18px (era 16px) */
    --sedna-text-lg: 1.2656rem;    /* 20.25px (era 18px) */
    --sedna-text-xl: 1.4063rem;    /* 22.5px (era 20px) */
    --sedna-text-2xl: 1.6875rem;   /* 27px (era 24px) */
    --sedna-text-3xl: 2.1094rem;   /* 33.75px (era 30px) */
    --sedna-text-4xl: 2.5313rem;   /* 40.5px (era 36px) */
    --sedna-text-5xl: 3.375rem;    /* 54px (era 48px) */

    /* Control heights ingrandite */
    --sedna-control-height-sm: 2.25rem;  /* 36px (era 32px) */
    --sedna-control-height-md: 2.8125rem; /* 45px (era 40px) */
    --sedna-control-height-lg: 3.375rem;  /* 54px (era 48px) */

    /* Spacing aumentato (opzionale - commentato per ora) */
    /*
    --sedna-space-1: 0.28125rem;
    --sedna-space-2: 0.5625rem;
    --sedna-space-3: 0.84375rem;
    --sedna-space-4: 1.125rem;
    */
}

/* =============================================================================
   SIZE SCALE — 5 taglie (XS/S/M/L/XL) come SET di variabili.
   Classe BARE: funziona sul root .sedna-app (taglia globale, applicata dal ThemeProvider)
   E su un wrapper annidato (override locale, es. Prima Nota forzata XS — la variabile cascada
   per prossimità DOM). Imposta le variabili lette dall'override input
   (sedna.devexpress.overrides.css): --sedna-control-height-md, --sedna-text-sm, --sedna-input-padding-*.
   ============================================================================= */
.sedna-size-xs {
    --sedna-control-height-sm: 1.5rem;
    --sedna-control-height-md: 1.75rem;    /* 28 — altezza input */
    --sedna-control-height-lg: 2.125rem;
    --sedna-text-xs: 0.6875rem;
    --sedna-text-sm: 0.8125rem;            /* 13 — font input */
    --sedna-input-padding-y: 0.1875rem;
    --sedna-input-padding-x: 0.5rem;
}
.sedna-size-s {
    --sedna-control-height-sm: 1.625rem;
    --sedna-control-height-md: 1.9375rem;  /* 31 */
    --sedna-control-height-lg: 2.375rem;
    --sedna-text-xs: 0.71875rem;
    --sedna-text-sm: 0.8125rem;            /* 13 */
    --sedna-input-padding-y: 0.25rem;
    --sedna-input-padding-x: 0.5625rem;
}
.sedna-size-m {
    --sedna-control-height-sm: 1.75rem;
    --sedna-control-height-md: 2.125rem;   /* 34 */
    --sedna-control-height-lg: 2.625rem;
    --sedna-text-xs: 0.75rem;
    --sedna-text-sm: 0.875rem;             /* 14 */
    --sedna-input-padding-y: 0.375rem;
    --sedna-input-padding-x: 0.625rem;
}
.sedna-size-l {
    --sedna-control-height-sm: 2rem;
    --sedna-control-height-md: 2.5rem;     /* 40 */
    --sedna-control-height-lg: 3rem;
    --sedna-text-xs: 0.8125rem;
    --sedna-text-sm: 0.9375rem;            /* 15 */
    --sedna-input-padding-y: 0.5rem;
    --sedna-input-padding-x: 0.75rem;
}
.sedna-size-xl {
    --sedna-control-height-sm: 2.375rem;
    --sedna-control-height-md: 2.875rem;   /* 46 */
    --sedna-control-height-lg: 3.5rem;
    --sedna-text-xs: 0.875rem;
    --sedna-text-sm: 1rem;                 /* 16 */
    --sedna-input-padding-y: 0.625rem;
    --sedna-input-padding-x: 0.875rem;
}

/* =============================================================================
   TEXT SIZE UTILITIES (Override esplicito)
   ============================================================================= */
.sedna-text-xs { font-size: var(--sedna-text-xs) !important; }
.sedna-text-sm { font-size: var(--sedna-text-sm) !important; }
.sedna-text-base { font-size: var(--sedna-text-base) !important; }
.sedna-text-lg { font-size: var(--sedna-text-lg) !important; }
.sedna-text-xl { font-size: var(--sedna-text-xl) !important; }
.sedna-text-2xl { font-size: var(--sedna-text-2xl) !important; }
.sedna-text-3xl { font-size: var(--sedna-text-3xl) !important; }
.sedna-text-4xl { font-size: var(--sedna-text-4xl) !important; }
.sedna-text-5xl { font-size: var(--sedna-text-5xl) !important; }

/* =============================================================================
   CONTROL HEIGHT UTILITIES
   ============================================================================= */
.sedna-control-sm {
    height: calc(var(--sedna-control-height-sm) * var(--sedna-density));
}

.sedna-control-md {
    height: calc(var(--sedna-control-height-md) * var(--sedna-density));
}

.sedna-control-lg {
    height: calc(var(--sedna-control-height-lg) * var(--sedna-density));
}

/* =============================================================================
   RESPONSIVE TEXT SIZES
   ============================================================================= */
@media (max-width: 640px) {
    .sedna-text-responsive {
        font-size: calc(var(--sedna-text-base) * 0.875);
    }
}