/* ==========================================================
   WESTERWALD BETREUUNG – Material-inspired tokens
   Schiefer (primary) · Kupfer (secondary) · Moos (tertiary)
   ========================================================== */

:root {
    /* ---- PALETTE: Schiefer (slate blue-grey) ---- */
    --p-0:  #F4F6F8;
    --p-50: #E8EDF1;
    --p-100:#C9D4DC;
    --p-200:#A4B4C0;
    --p-300:#7A8F9E;
    --p-400:#546A79;
    --p-500:#3E5361;   /* primary */
    --p-600:#2E3B47;   /* primary-strong */
    --p-700:#1F2A33;
    --p-800:#131C23;
    --p-900:#0A1015;

    /* ---- SECONDARY: Kupfer (copper) ---- */
    --s-50: #FBF1EA;
    --s-100:#F3DCC9;
    --s-200:#E6BA9A;
    --s-300:#D39B72;
    --s-400:#C28659;
    --s-500:#B5744C;   /* secondary */
    --s-600:#975F3C;
    --s-700:#774A2E;
    --s-800:#553522;
    --s-900:#3A2517;

    /* ---- TERTIARY: Moos (moss green, Westerwald) ---- */
    --t-50: #EEF1EC;
    --t-100:#C4CEBD;  /* darker moss for band-moss contrast */
    --t-200:#B3C0AA;
    --t-300:#8C9F82;
    --t-400:#6B8060;
    --t-500:#52614D;
    --t-600:#3F4C3A;
    --t-700:#2D3829;

    /* ---- NEUTRALS / SURFACES ---- */
    --n-0:  #FFFFFF;
    --n-25: #FAF8F4;
    --n-50: #F4F1EC;  /* surface */
    --n-100:#EBE7DF;  /* surface-variant */
    --n-200:#DAD3C6;
    --n-300:#B8AF9E;
    --n-400:#8E8779;
    --n-500:#635D52;
    --n-600:#433F38;
    --n-700:#2A2824;
    --n-800:#1A1916;
    --n-900:#0E0D0B;

    /* ---- STATE ---- */
    --error:   #B3261E;
    --success: #2E7D5B;
    --warning: #C27803;
    --info:    #1E6091;

    /* ---- SEMANTIC (Material role tokens) ---- */
    --primary:            var(--p-600);
    --on-primary:         #FFFFFF;
    --primary-container:  #DCE5ED;
    --on-primary-container: var(--p-700);

    --secondary:          var(--s-500);
    --on-secondary:       #FFFFFF;
    --secondary-container:#F3DCC9;
    --on-secondary-container: var(--s-800);

    --tertiary:           var(--t-500);
    --on-tertiary:        #FFFFFF;
    --tertiary-container: #D7DED1;
    --on-tertiary-container: var(--t-700);

    --surface:             var(--n-50);
    --surface-bright:      var(--n-25);
    --surface-dim:         var(--n-100);
    --surface-container:   var(--n-0);
    --surface-container-low:  var(--n-25);
    --surface-container-high: var(--n-100);
    --surface-container-highest: var(--n-200);
    --on-surface:          var(--n-800);
    --on-surface-variant:  var(--n-600);
    --outline:             var(--n-300);
    --outline-variant:     var(--n-200);

    --inverse-surface:     var(--p-700);
    --on-inverse-surface:  var(--n-25);

    /* ---- ELEVATION (Material 5-level tonal + shadow) ---- */
    --elev-1: 0 1px 2px rgba(14,20,25,.06), 0 1px 3px 1px rgba(14,20,25,.04);
    --elev-2: 0 1px 2px rgba(14,20,25,.08), 0 2px 6px 2px rgba(14,20,25,.06);
    --elev-3: 0 4px 8px 3px rgba(14,20,25,.07), 0 1px 3px rgba(14,20,25,.08);
    --elev-4: 0 6px 10px 4px rgba(14,20,25,.08), 0 2px 3px rgba(14,20,25,.10);
    --elev-5: 0 8px 12px 6px rgba(14,20,25,.09), 0 4px 4px rgba(14,20,25,.12);

    /* ---- SHAPE (Material M3-ish, rounded, expressive) ---- */
    --sh-xs: 4px;
    --sh-sm: 8px;
    --sh-md: 12px;
    --sh-lg: 16px;
    --sh-xl: 28px;
    --sh-xxl: 36px;
    --sh-pill: 9999px;

    /* ---- MOTION ---- */
    --mo-fast: 150ms;
    --mo-base: 220ms;
    --mo-slow: 380ms;
    --ease-standard: cubic-bezier(.2,0,0,1);
    --ease-emphasized: cubic-bezier(.2,0,0,1);
    --ease-decelerated: cubic-bezier(0,0,0,1);

    /* ---- LAYOUT ---- */
    --container: 1240px;
    --gutter: 1rem;
    --header-h: 76px;

    /* ---- TYPE ---- */
    --font-display: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

    /* ---- TYPE SCALE (Material-inspired, display serif) ---- */
    --t-display-lg: clamp(3rem, 7vw, 5.75rem);
    --t-display-md: clamp(2.5rem, 5.5vw, 4.5rem);
    --t-display-sm: clamp(2rem, 4.2vw, 3.25rem);
    --t-headline-lg: clamp(1.75rem, 3vw, 2.5rem);
    --t-headline-md: clamp(1.5rem, 2.4vw, 2rem);
    --t-headline-sm: clamp(1.25rem, 1.8vw, 1.5rem);
    --t-title-lg: 1.375rem;
    --t-title-md: 1.125rem;
    --t-title-sm: 1rem;
    --t-body-lg: 1.0625rem;
    --t-body-md: 0.9375rem;
    --t-body-sm: 0.8125rem;
    --t-label-lg: 0.875rem;
    --t-label-md: 0.75rem;
    --t-label-sm: 0.6875rem;
}