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

:root {
    /* ── PRIMARY (Goldbraun / Warm Amber – Markenfarbe, Hue ~40) ── */
    --color-primary-50:  #FDF8EE;
    --color-primary-100: #F8ECCF;
    --color-primary-200: #F0D89E;
    --color-primary-300: #E6BF67;
    --color-primary-400: #D4A348;
    --color-primary-500: #C49032; /* Goldbraun (Markenfarbe) */
    --color-primary-600: #A67828;
    --color-primary-700: #845F20;
    --color-primary-800: #684A1A;
    --color-primary-900: #503814;
    --color-primary-950: #33230C;

    /* ── SECONDARY (Warmes Braun-Grau, Hue ~30) ── */
    --color-secondary-50:  #F8F5F0;
    --color-secondary-100: #F0EBE3;
    --color-secondary-200: #DDD6CB;
    --color-secondary-300: #B5AFA8;
    --color-secondary-400: #8C847B;
    --color-secondary-500: #635B53;
    --color-secondary-600: #504942;
    --color-secondary-700: #3D3832;
    --color-secondary-800: #2D2722;
    --color-secondary-900: #241F1A;
    --color-secondary-950: #1A1510;

    /* ── 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 (Warm getönt, Hue ~35, Sat 8-12%) ── */
    --color-neutral-0:   #FEFDFB;
    --color-neutral-50:  #FBF9F5;
    --color-neutral-100: #F5F2EC;
    --color-neutral-200: #EBE6DE;
    --color-neutral-300: #D9D2C8;
    --color-neutral-400: #A69E92;
    --color-neutral-500: #716C66;
    --color-neutral-600: #53504A;
    --color-neutral-700: #3F3C38;
    --color-neutral-800: #282624;
    --color-neutral-900: #191816;
    --color-neutral-950: #0A0908;

    /* ── 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:          #5B7F95; /* Warmes Stahlblau – gedämpft, passt zu Goldbraun */
    --color-info-light:    #E8EFF4;
    --color-info-dark:     #486A7D;

    /* ── RESERVATION STATUS FARBEN (Brand-abgeleitet) ── */
    --color-status-planned:          rgba(196, 144, 50, 0.82);  /* Primary / Goldbraun */
    --color-status-planned-border:   rgba(166, 120, 40, 0.90);
    --color-status-seated:           rgba(26, 154, 91, 0.82);   /* Success */
    --color-status-seated-border:    rgba(26, 154, 91, 0.90);
    --color-status-completed:        rgba(154, 163, 160, 0.80); /* Neutral */
    --color-status-completed-border: rgba(154, 163, 160, 0.85);
    --color-status-noshow:           rgba(232, 163, 8, 0.82);   /* Warning */
    --color-status-noshow-border:    rgba(232, 163, 8, 0.90);
    --color-status-requested:        rgba(200, 123, 82, 0.82);  /* Accent */
    --color-status-requested-border: rgba(200, 123, 82, 0.90);
    --color-status-cancelled:        rgba(217, 48, 48, 0.75);   /* Error */
    --color-status-cancelled-border: rgba(217, 48, 48, 0.85);

    /* ── 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 (Gold-tinted) ── */
    --shadow-sm:  0 1px 2px rgba(196, 144, 50, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md:  0 2px 6px rgba(196, 144, 50, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06);
    --shadow-lg:  0 4px 12px rgba(196, 144, 50, 0.10), 0 8px 16px rgba(0, 0, 0, 0.08);
    --shadow-xl:  0 8px 32px rgba(196, 144, 50, 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;
}