/* ============================================
   poroCity — Design Tokens
   Stile allineato a itistudio.com + accenti poroCity
   ============================================ */

:root {
    color-scheme: light;

    /* Palette poroCity (accenti) */
    --color-orange: #FF9D5B;
    --color-sage: #7C8F6E;
    --color-ivory: #F5EDE4;

    /* Palette ITIstudio */
    --color-ardesia: #454A66;
    --color-ardesia-dark: #32373c;
    --color-azzurro: #A3C1D7;
    --color-viola: #929EC4;
    --color-opale: #F9D3C9;

    /* Neutrals */
    --color-black: #1A1A1A;
    --color-grey: #888888;
    --color-grey-light: #e8e8e8;
    --color-white: #FFFFFF;

    /* Functional aliases — stile ITIstudio (bianco, alto contrasto) */
    --color-bg: var(--color-white);
    --color-text: var(--color-black);
    --color-text-secondary: var(--color-grey);
    --color-accent: var(--color-orange);
    --color-heading: var(--color-sage);
    --color-footer-bg: var(--color-ardesia-dark);

    /* Typography */
    --font-family: 'Manrope', sans-serif;
    --font-weight-light: 200;
    --font-weight-bold: 800;

    /* Spacing scale */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 3.5rem;
    --space-xl: 5rem;

    /* Layout */
    --content-max: 1200px;
    --content-narrow: 720px;
    --header-height: 72px;

    /* Border radius — bottoni arrotondati come ITIstudio */
    --radius-pill: 9999px;
    --radius-sm: 4px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
}