/* ============================================================
   Gabis — Eis & Maroni Mobil: Design Tokens
   Corporate Identity: Warm Orange + Parchment
   Herzlich • Handwerk • Tradition • Gastfreundschaft
   ============================================================ */

:root {
  /* ── Raw Palette: Orange (brand core) ─────────────────── */
  --orange-950: #3D1A00;
  --orange-900: #5C2800;
  --orange-800: #7A3600;
  --orange-700: #964505;
  --orange-600: #C35808;
  --orange-500: #ec6b09;
  --orange-400: #F28B3D;
  --orange-300: #F5A869;
  --orange-200: #F9C99F;
  --orange-100: #FCDEC4;
  --orange-50:  #FEF0E2;

  /* ── Raw Palette: Warm Neutrals ───────────────────────── */
  --warm-950: #0a0a09;
  --warm-900: #1a1918;
  --warm-800: #262625;
  --warm-700: #3d3c3a;
  --warm-600: #57554f;
  --warm-500: #78756e;
  --warm-400: #a8a49c;
  --warm-300: #d6d2c8;
  --warm-200: #e7e4da;
  --warm-100: #f4f3ed;
  --warm-50:  #f3e9c6;
  --white:    #FFFFFF;

  /* ── Raw Palette: Gold (highlight) ────────────────────── */
  --gold-500: #ffe074;
  --gold-400: #ffe99a;
  --gold-300: #fff0b8;
  --gold-200: #fff5d0;
  --gold-100: #fffae8;

  /* ── Raw Palette: Brown (chestnut) ────────────────────── */
  --brown-900: #3D1A00;
  --brown-800: #5C2800;
  --brown-700: #7A3600;
  --brown-600: #964505;
  --brown-500: #A85520;
  --brown-400: #BE6E3D;
  --brown-300: #D4956A;

  /* ── Raw Palette: Status ──────────────────────────────── */
  --green-600: #16a34a;
  --green-50:  #f0fdf4;
  --red-600:   #dc2626;
  --red-50:    #fef2f2;

  /* ── Semantic: Colors ─────────────────────────────────── */
  --color-bg:            var(--warm-50);
  --color-bg-subtle:     var(--warm-100);
  --color-bg-surface:    var(--white);
  --color-bg-dark:       var(--warm-950);
  --color-bg-hero:       var(--warm-950);

  --color-text:          var(--warm-800);
  --color-text-secondary: var(--warm-600);
  --color-text-muted:    var(--warm-500);
  --color-text-inverse:  var(--white);
  --color-text-on-dark:  var(--warm-200);
  --color-text-highlight: var(--gold-500);

  --color-primary:       var(--orange-500);
  --color-primary-hover: var(--orange-700);
  --color-primary-dark:  var(--brown-600);

  --color-accent:        var(--gold-500);
  --color-accent-hover:  var(--gold-400);

  --color-border:        var(--warm-200);
  --color-border-subtle: var(--warm-100);
  --color-border-strong: var(--warm-300);

  --color-link:          var(--brown-600);
  --color-link-hover:    var(--orange-500);

  /* ── Semantic: Typography ─────────────────────────────── */
  --font-display: 'Dancing Script', cursive;
  --font-body:    'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  --text-3xl:  clamp(1.75rem, 1.5rem + 1.25vw, 2.25rem);
  --text-4xl:  clamp(2rem, 1.5rem + 2.5vw, 2.75rem);
  --text-5xl:  clamp(2.5rem, 2rem + 2.5vw, 3.5rem);

  --weight-normal:  400;
  --weight-medium:  500;
  --weight-bold:    700;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* ── Semantic: Spacing ────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Semantic: Layout ─────────────────────────────────── */
  --max-width-content: 72rem;
  --max-width-narrow:  42rem;
  --max-width-wide:    90rem;
  --gutter:            clamp(1rem, 3vw, 2rem);

  /* ── Semantic: Shape ──────────────────────────────────── */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* ── Semantic: Shadow ─────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(10, 10, 9, 0.06), 0 1px 2px rgba(10, 10, 9, 0.04);
  --shadow-md:  0 4px 6px rgba(10, 10, 9, 0.06), 0 2px 4px rgba(10, 10, 9, 0.04);
  --shadow-lg:  0 10px 15px rgba(10, 10, 9, 0.07), 0 4px 6px rgba(10, 10, 9, 0.04);
  --shadow-xl:  0 20px 25px rgba(10, 10, 9, 0.07), 0 8px 10px rgba(10, 10, 9, 0.03);

  /* ── Semantic: Motion ─────────────────────────────────── */
  --ease-out:    cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
}