/* ============================================================
   SharingChips — Design Tokens
   Fonte di verità per colori, tipografia, spaziature, radius,
   ombre, z-index. I file Razor/CSS consumano questi token via
   var(--sc-*), mai valori letterali.
   Doc: /docs/design-system/
   ============================================================ */

:root {
    /* ----------------------------------------------------------
       1. Brand
       ---------------------------------------------------------- */
    --sc-lime: #a6d228;
    --sc-lime-hover: #93bb23;
    --sc-lime-active: #7d9f1e;
    --sc-olive: #5e7916;
    --sc-deep: #043b27;
    --sc-deep-elevated: #0a5238;

    /* ----------------------------------------------------------
       2. Neutrals (light surface — app interna)
       ---------------------------------------------------------- */
    --sc-surface: #ffffff;
    --sc-surface-alt: #f7f9f5;
    --sc-surface-sunken: #eef1ea;
    --sc-border: #e3e8e0;
    --sc-border-strong: #c8d1c3;
    --sc-text: #0f1f17;
    --sc-text-muted: #5a6b61;
    --sc-text-subtle: #8a9990;

    /* ----------------------------------------------------------
       3. Neutrals (dark surface — landing/auth)
       ---------------------------------------------------------- */
    --sc-dark-text: #ffffff;
    --sc-dark-text-muted: #b8d0c2;
    --sc-dark-border: rgba(255, 255, 255, 0.14);
    --sc-dark-surface-card: #ffffff;

    /* ----------------------------------------------------------
       4. Semantic colors (armonizzati col brand)
       ---------------------------------------------------------- */
    --sc-success: #2f7a3c;
    --sc-success-soft: #e4efe0;
    --sc-warning: #c38b2a;
    --sc-warning-soft: #f7ead0;
    --sc-danger: #b04a3c;
    --sc-danger-soft: #f3dcd6;
    --sc-info: #2a6d8c;
    --sc-info-soft: #d6e6ee;

    /* ----------------------------------------------------------
       5. Interactive states
       ---------------------------------------------------------- */
    --sc-focus-ring: 0 0 0 3px rgba(166, 210, 40, 0.4);
    --sc-overlay: rgba(15, 31, 23, 0.5);

    /* ----------------------------------------------------------
       6. Typography — font stacks
       ---------------------------------------------------------- */
    --sc-font-display: 'Merriweather', Georgia, 'Times New Roman', serif;
    --sc-font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --sc-font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

    /* ----------------------------------------------------------
       7. Typography — font sizes (base 16px)
       ---------------------------------------------------------- */
    --sc-fs-micro: 0.75rem;   /* 12px */
    --sc-fs-small: 0.875rem;  /* 14px */
    --sc-fs-body: 1rem;       /* 16px */
    --sc-fs-lead: 1.125rem;   /* 18px */
    --sc-fs-h5: 1.25rem;      /* 20px */
    --sc-fs-h4: 1.5rem;       /* 24px */
    --sc-fs-h3: 1.875rem;     /* 30px */
    --sc-fs-h2: 2.5rem;       /* 40px */
    --sc-fs-h1: 3.25rem;      /* 52px */

    /* ----------------------------------------------------------
       8. Typography — line heights
       ---------------------------------------------------------- */
    --sc-lh-display: 1.2;
    --sc-lh-heading: 1.3;
    --sc-lh-body: 1.6;
    --sc-lh-tight: 1.4;

    /* ----------------------------------------------------------
       9. Typography — font weights
       ---------------------------------------------------------- */
    --sc-fw-light: 300;
    --sc-fw-regular: 400;
    --sc-fw-medium: 500;
    --sc-fw-semibold: 600;
    --sc-fw-bold: 700;
    --sc-fw-black: 900;

    /* ----------------------------------------------------------
       10. Typography — letter-spacing
       ---------------------------------------------------------- */
    --sc-tracking-tight: -0.01em;
    --sc-tracking-normal: 0;
    --sc-tracking-wide: 0.04em;

    /* ----------------------------------------------------------
       11. Spacing (base 4px)
       ---------------------------------------------------------- */
    --sc-sp-0: 0;
    --sc-sp-1: 0.25rem;  /* 4px */
    --sc-sp-2: 0.5rem;   /* 8px */
    --sc-sp-3: 0.75rem;  /* 12px */
    --sc-sp-4: 1rem;     /* 16px */
    --sc-sp-5: 1.5rem;   /* 24px */
    --sc-sp-6: 2rem;     /* 32px */
    --sc-sp-7: 3rem;     /* 48px */
    --sc-sp-8: 4rem;     /* 64px */
    --sc-sp-9: 6rem;     /* 96px */

    /* ----------------------------------------------------------
       12. Radius
       ---------------------------------------------------------- */
    --sc-r-sm: 4px;
    --sc-r-md: 6px;
    --sc-r-lg: 8px;
    --sc-r-xl: 12px;
    --sc-r-full: 9999px;

    /* ----------------------------------------------------------
       13. Elevation (light surface)
       ---------------------------------------------------------- */
    --sc-sh-0: none;
    --sc-sh-1: 0 1px 2px rgba(15, 31, 23, 0.06), 0 1px 1px rgba(15, 31, 23, 0.04);
    --sc-sh-2: 0 2px 4px rgba(15, 31, 23, 0.08), 0 4px 8px rgba(15, 31, 23, 0.04);
    --sc-sh-3: 0 4px 8px rgba(15, 31, 23, 0.1), 0 8px 16px rgba(15, 31, 23, 0.06);
    --sc-sh-4: 0 8px 16px rgba(15, 31, 23, 0.12), 0 16px 32px rgba(15, 31, 23, 0.08);
    /* Ombra specifica per elementi che fluttuano su superfici scure (landing/auth).
       Le --sc-sh-1..4 sono calibrate su light e spariscono sul deep green. */
    --sc-sh-dark-float: 0 8px 24px rgba(0, 0, 0, 0.35);

    /* ----------------------------------------------------------
       14. Z-index scale (allineata a Bootstrap 5)
       ---------------------------------------------------------- */
    --sc-z-base: 0;
    --sc-z-elevated: 10;
    --sc-z-sticky: 100;
    --sc-z-dropdown: 1000;
    --sc-z-overlay: 1040;
    --sc-z-modal: 1050;
    --sc-z-toast: 1080;
    --sc-z-tooltip: 1090;

    /* ----------------------------------------------------------
       15. Motion (transizioni standard)
       ---------------------------------------------------------- */
    --sc-transition-fast: 120ms ease-out;
    --sc-transition-base: 200ms ease-out;
    --sc-transition-slow: 320ms ease-out;
}

/* ============================================================
   Responsive — display sizes su mobile
   Sotto 768px, h1/h2 scendono per evitare overflow e peso eccessivo.
   ============================================================ */
@media (max-width: 767.98px) {
    :root {
        --sc-fs-h1: 2.5rem;   /* 40px */
        --sc-fs-h2: 1.875rem; /* 30px */
        --sc-fs-h3: 1.5rem;   /* 24px */
    }
}

/* ============================================================
   Utility classes di base — minime e composabili
   ============================================================ */

/* Typography primitives */
.sc-display {
    font-family: var(--sc-font-display);
    font-weight: var(--sc-fw-black);
    letter-spacing: var(--sc-tracking-tight);
    line-height: var(--sc-lh-display);
}

.sc-heading {
    font-family: var(--sc-font-body);
    font-weight: var(--sc-fw-bold);
    line-height: var(--sc-lh-heading);
}

.sc-body {
    font-family: var(--sc-font-body);
    font-weight: var(--sc-fw-regular);
    font-size: var(--sc-fs-body);
    line-height: var(--sc-lh-body);
}

.sc-mono {
    font-family: var(--sc-font-mono);
}

/* Surface primitives */
.sc-surface-dark {
    background-color: var(--sc-deep);
    color: var(--sc-dark-text);
}

.sc-surface-light {
    background-color: var(--sc-surface);
    color: var(--sc-text);
}

/* Card standard (light) */
.sc-card {
    background-color: var(--sc-surface);
    border-radius: var(--sc-r-xl);
    box-shadow: var(--sc-sh-1);
    padding: var(--sc-sp-5);
}

/* Focus ring globale */
:focus-visible {
    outline: none;
    box-shadow: var(--sc-focus-ring);
}