/* ═══════════════════════════════════════════════════════════
   IgelWerk Design Tokens
   Präzise. Handwerklich. Vertrauenswürdig. Modern-regional.
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ── PRIMARY (Warm-Türkis – Markenfarbe, Hue 172-176) ── */
    --color-primary-50:  #F0FAF9;
    --color-primary-100: #D6F2EF;
    --color-primary-200: #ADE3DD;
    --color-primary-300: #7DD4CB;
    --color-primary-400: #62C5BB;
    --color-primary-500: #4FB6AD; /* Haupt-Türkis (Markenfarbe – unverändert) */
    --color-primary-600: #3E9B93;
    --color-primary-700: #2F7C75;
    --color-primary-800: #245F5A;
    --color-primary-900: #1C4643;
    --color-primary-950: #102D2B;

    /* ── SECONDARY (Warmes Slate, Hue ~180) ── */
    --color-secondary-50:  #F5F7F7;
    --color-secondary-100: #E7ECEB;
    --color-secondary-200: #D0D8D6;
    --color-secondary-300: #A8B5B2;
    --color-secondary-400: #7B8D89;
    --color-secondary-500: #586B67;
    --color-secondary-600: #465553;
    --color-secondary-700: #364240;
    --color-secondary-800: #2A3332;
    --color-secondary-900: #212928;
    --color-secondary-950: #151C1B;

    /* ── ACCENT (Terracotta/Kupfer – Handwerk, Erde, Wärme) ── */
    --color-accent-50:  #FDF5F0;
    --color-accent-100: #FAEBE0;
    --color-accent-200: #F4D2BC;
    --color-accent-300: #ECB496;
    --color-accent-400: #E09670;
    --color-accent-500: #C87B52;
    --color-accent-600: #A86440;
    --color-accent-700: #8B4F32;
    --color-accent-800: #703D27;
    --color-accent-900: #5A301F;
    --color-accent-950: #3D1F12;

    /* ── NEUTRAL (Leicht warm getönt, Hue ~165, Sat 3-5%) ── */
    --color-neutral-0:   #FFFFFF;
    --color-neutral-50:  #F9FAFA;
    --color-neutral-100: #F2F4F3;
    --color-neutral-200: #E4E7E6;
    --color-neutral-300: #D0D4D3;
    --color-neutral-400: #9AA3A0;
    --color-neutral-500: #6A7371;
    --color-neutral-600: #4B5553;
    --color-neutral-700: #37413F;
    --color-neutral-800: #212A28;
    --color-neutral-900: #131B19;
    --color-neutral-950: #050C0B;

    /* ── SEMANTISCHE FARBEN (Harmonisiert – Info nutzt Primary statt Blau) ── */
    --color-success:       #1A9A5B;
    --color-success-light: #DDF6E7;
    --color-success-dark:  #157D4A;

    --color-warning:       #E8A308;
    --color-warning-light: #FDF2C7;
    --color-warning-dark:  #C97D06;

    --color-error:         #D93030;
    --color-error-light:   #FDE3E3;
    --color-error-dark:    #B52222;

    --color-info:          #3E9B93; /* Primary-600 – kein konkurrierendes Blau mehr */
    --color-info-light:    #E6F4F2;
    --color-info-dark:     #2F7C75; /* Primary-700 */

    /* ── RESERVATION STATUS FARBEN (Brand-abgeleitet) ── */
    --color-status-planned:          rgba(79, 182, 173, 0.50);  /* Primary */
    --color-status-planned-border:   rgba(62, 155, 147, 0.80);
    --color-status-seated:           rgba(26, 154, 91, 0.55);   /* Success */
    --color-status-seated-border:    rgba(26, 154, 91, 0.80);
    --color-status-completed:        rgba(154, 163, 160, 0.50); /* Neutral */
    --color-status-completed-border: rgba(154, 163, 160, 0.70);
    --color-status-noshow:           rgba(232, 163, 8, 0.55);   /* Warning */
    --color-status-noshow-border:    rgba(232, 163, 8, 0.80);
    --color-status-requested:        rgba(200, 123, 82, 0.55);  /* Accent */
    --color-status-requested-border: rgba(200, 123, 82, 0.80);
    --color-status-cancelled:        rgba(217, 48, 48, 0.40);   /* Error */
    --color-status-cancelled-border: rgba(217, 48, 48, 0.65);

    /* ── SPACING TOKENS ── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* ── TYPOGRAPHY TOKENS ── */
    --font-size-xs:  0.75rem;   /* 12px */
    --font-size-sm:  0.875rem;  /* 14px */
    --font-size-md:  1rem;      /* 16px */
    --font-size-lg:  1.125rem;  /* 18px */
    --font-size-xl:  1.25rem;   /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */

    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --line-height-tight:   1.2;
    --line-height-normal:  1.5;
    --line-height-relaxed: 1.75;

    /* ── BORDER & RADIUS TOKENS ── */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    --border-width-thin:   1px;
    --border-width-medium: 2px;
    --border-width-thick:  3px;

    /* ── SHADOW TOKENS (Türkis-tinted) ── */
    --shadow-sm:  0 1px 2px rgba(79, 182, 173, 0.05), 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md:  0 2px 6px rgba(79, 182, 173, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06);
    --shadow-lg:  0 4px 12px rgba(79, 182, 173, 0.10), 0 8px 16px rgba(0, 0, 0, 0.08);
    --shadow-xl:  0 8px 32px rgba(79, 182, 173, 0.12), 0 12px 24px rgba(0, 0, 0, 0.10);

    /* ── LAYOUT TOKENS ── */
    --container-sm:  640px;
    --container-md:  768px;
    --container-lg:  1024px;
    --container-xl:  1280px;
    --container-2xl: 1440px;

    --layout-gutter:      var(--space-6);
    --layout-section-gap: var(--space-16);
    --layout-timeline-tablecol-width: 140px;
}