/* ============================================
   GRUPPO CRIPPA — Design Tokens / Brand Palette
   Estratti da gruppocrippa.com — Aprile 2026
   ============================================ */

:root {
  /* ── Colori Primari ── */
  --crippa-green:          #008D36;
  --crippa-green-light:    #33A45E;
  --crippa-green-dark:     #006B29;
  --crippa-green-50:       #E6F5ED;
  --crippa-green-100:      #B3E2C8;
  --crippa-green-200:      #66C591;
  --crippa-green-400:      #008D36;
  --crippa-green-600:      #006B29;
  --crippa-green-800:      #004A1C;
  --crippa-green-900:      #00290F;

  --crippa-navy:           #001659;
  --crippa-navy-light:     #1D263F;
  --crippa-navy-dark:      #0A1229;
  --crippa-navy-50:        #E6E8F0;
  --crippa-navy-100:       #B3B8D1;
  --crippa-navy-200:       #6670A3;
  --crippa-navy-400:       #22365C;
  --crippa-navy-600:       #001659;
  --crippa-navy-800:       #0A1229;
  --crippa-navy-900:       #060D1C;

  /* ── Colori Secondari ── */
  --crippa-indigo:         #2D2E83;
  --crippa-indigo-light:   #4A4BA6;
  --crippa-indigo-dark:    #1E1F5C;
  --crippa-indigo-50:      #EAEAF5;
  --crippa-indigo-100:     #C0C0E2;
  --crippa-indigo-200:     #8080B8;
  --crippa-indigo-400:     #2D2E83;
  --crippa-indigo-600:     #222365;
  --crippa-indigo-800:     #1E1F5C;
  --crippa-indigo-900:     #121340;

  --crippa-orange:         #FF5E14;
  --crippa-orange-light:   #FF8B52;
  --crippa-orange-dark:    #CC4B10;
  --crippa-orange-50:      #FFF0E8;
  --crippa-orange-100:     #FFD1B8;
  --crippa-orange-200:     #FFA374;
  --crippa-orange-400:     #FF5E14;
  --crippa-orange-600:     #CC4B10;
  --crippa-orange-800:     #993808;
  --crippa-orange-900:     #662504;

  /* ── Neutri ── */
  --crippa-black:          #0A1229;   /* mai usare #000, sempre nero-blu */
  --crippa-gray-900:       #111111;
  --crippa-gray-800:       #222222;
  --crippa-gray-700:       #333333;
  --crippa-gray-600:       #545A5F;
  --crippa-gray-500:       #565969;
  --crippa-gray-400:       #878787;
  --crippa-gray-300:       #9CA5AF;
  --crippa-gray-200:       #AAAAAA;
  --crippa-gray-100:       #CFD3E5;
  --crippa-gray-50:        #E8E8E9;
  --crippa-white-warm:     #F5F6F7;
  --crippa-white-pure:     #F9F9F9;
  --crippa-white:          #FFFFFF;

  /* ── Ruoli Semantici ── */
  --color-brand-primary:   var(--crippa-green);
  --color-brand-secondary: var(--crippa-navy);
  --color-brand-accent:    var(--crippa-indigo);
  --color-cta:             var(--crippa-orange);
  --color-cta-hover:       var(--crippa-orange-dark);

  --color-text-heading:    var(--crippa-navy-dark);    /* #0A1229 */
  --color-text-body:       var(--crippa-gray-500);     /* #565969 */
  --color-text-muted:      var(--crippa-gray-300);     /* #9CA5AF */
  --color-text-on-dark:    var(--crippa-white);
  --color-text-on-green:   var(--crippa-white);
  --color-text-link:       var(--crippa-indigo);
  --color-text-link-hover: var(--crippa-green);

  --color-bg-page:         var(--crippa-white);
  --color-bg-surface:      var(--crippa-white-warm);   /* #F5F6F7 */
  --color-bg-card:         var(--crippa-white);
  --color-bg-header:       var(--crippa-navy);         /* #001659 */
  --color-bg-footer:       var(--crippa-navy-dark);    /* #0A1229 */
  --color-bg-hero:         var(--crippa-navy);
  --color-bg-section-alt:  var(--crippa-gray-50);      /* #E8E8E9 */

  --color-border-default:  var(--crippa-gray-50);
  --color-border-input:    var(--crippa-gray-300);
  --color-border-focus:    var(--crippa-green);

  /* ── Bottoni ── */
  --btn-primary-bg:        var(--crippa-green);
  --btn-primary-text:      var(--crippa-white);
  --btn-primary-hover:     var(--crippa-green-dark);

  --btn-secondary-bg:      transparent;
  --btn-secondary-text:    var(--crippa-green);
  --btn-secondary-border:  var(--crippa-green);
  --btn-secondary-hover:   var(--crippa-green-50);

  --btn-cta-bg:            var(--crippa-orange);
  --btn-cta-text:          var(--crippa-white);
  --btn-cta-hover:         var(--crippa-orange-dark);

  /* ── Tipografia ── */
  --font-heading:          'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-body:             'Inter', 'Segoe UI', system-ui, sans-serif;

  /* ── Spaziatura & Arrotondamenti ── */
  --radius-sm:             4px;
  --radius-md:             8px;
  --radius-lg:             12px;
  --radius-xl:             16px;
  --radius-full:           9999px;

  /* ── Ombre ── */
  --shadow-sm:             0 1px 3px rgba(10, 18, 41, 0.08);
  --shadow-md:             0 4px 12px rgba(10, 18, 41, 0.10);
  --shadow-lg:             0 8px 24px rgba(10, 18, 41, 0.12);
}

/* ── Dark mode (opzionale, per portali B2B/industriali) ── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text-heading:   var(--crippa-white);
    --color-text-body:      var(--crippa-gray-300);
    --color-text-muted:     var(--crippa-gray-400);
    --color-bg-page:        var(--crippa-navy-dark);
    --color-bg-surface:     var(--crippa-navy);
    --color-bg-card:        var(--crippa-navy-light);
    --color-border-default: rgba(255, 255, 255, 0.1);
    --color-border-input:   rgba(255, 255, 255, 0.2);
  }
}