/* ============================================================
   BILDWERK – Fotografie
   Design Tokens – CSS Custom Properties
   ============================================================ */

:root {

  /* ─── COLOR PALETTE ─── */

  /* Dark Backgrounds */
  --clr-dark-900: #111110;
  --clr-dark-800: #1a1917;
  --clr-dark-700: #232220;
  --clr-dark-600: #2d2b28;
  --clr-dark-500: #3a3835;
  --clr-dark-border: rgba(255, 255, 255, 0.10);

  /* Light Backgrounds */
  --clr-light-100: #f7f4ee;
  --clr-light-200: #faf8f5;
  --clr-light-300: #f4f1ec;
  --clr-light-400: #ede9e2;
  --clr-light-500: #e4dfd7;
  --clr-light-border: rgba(0, 0, 0, 0.08);


  /* Green — Primary Accent (darker, more elegant) */
  --clr-gold-light:  #9bc8af;
  --clr-gold:        #75b494;
  --clr-gold-mid:    #23613d;
  --clr-gold-dark:   #133a23;
  --clr-gold-glow:   rgba(35, 97, 61, 0.28);

  /* Steel — Secondary Accent */
  --clr-brown-light: #9a9590;
  --clr-brown:       #7a7570;
  --clr-brown-dark:  #4e4c48;


  /* Industrial Olive — Tertiary Accent (darker) */
  --clr-green-light: #4e7c5e;
  --clr-green:       #23613d;
  --clr-green-dark:  #133a23;
  --clr-green-glow:  rgba(35, 97, 61, 0.24);

  /* Text on Dark */
  --clr-text-primary:   #f0ede8;
  --clr-text-secondary: #b8b0a5;
  --clr-text-muted:     #9b9389;

  /* Text on Light */
  --clr-text-dark:          #252320;
  --clr-text-dark-secondary: #5a554f;
  --clr-text-dark-muted:     #766f67;

  /* Semantic */
  --clr-success: #3f8c5c;
  --clr-error:   #b84040;
  --clr-warning: #c9863a;
  --clr-rust:    #8e4f44;

  /* ─── TYPOGRAPHY ─── */

  --font-serif:     'Prata', Georgia, 'Times New Roman', serif;
  --font-serif-alt: 'Playfair Display', Georgia, serif;
  --font-sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:   'Bebas Neue', 'Impact', 'Arial Narrow', sans-serif;

  /* Scale — clamp(min, fluid, max) */
  --fs-xs:   clamp(0.65rem,  0.6rem + 0.2vw,  0.75rem);
  --fs-sm:   clamp(0.8rem,   0.75rem + 0.25vw, 0.875rem);
  --fs-base: clamp(0.95rem,  0.9rem + 0.25vw,  1rem);
  --fs-md:   clamp(1rem,     0.95rem + 0.3vw,  1.125rem);
  --fs-lg:   clamp(1.1rem,   1rem + 0.4vw,     1.25rem);
  --fs-xl:   clamp(1.3rem,   1.2rem + 0.5vw,   1.5rem);
  --fs-2xl:  clamp(1.6rem,   1.4rem + 0.8vw,   1.875rem);
  --fs-3xl:  clamp(2rem,     1.7rem + 1.2vw,   2.5rem);
  --fs-4xl:  clamp(2.5rem,   2rem + 2vw,       3.5rem);
  --fs-5xl:  clamp(3rem,     2.4rem + 2.8vw,   4.5rem);
  --fs-6xl:  clamp(3.5rem,   2.8rem + 3.5vw,   6rem);
  --fs-hero: clamp(3.5rem,   3rem + 4vw,       7rem);

  /* Line heights */
  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-base:   1.5;
  --lh-relaxed: 1.7;
  --lh-loose:  1.9;

  /* Letter spacing */
  --ls-tight:   -0.03em;
  --ls-snug:    -0.01em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;
  --ls-widest:   0.15em;

  /* ─── SPACING ─── */

  --sp-1:  0.25rem;  /*  4px */
  --sp-2:  0.5rem;   /*  8px */
  --sp-3:  0.75rem;  /* 12px */
  --sp-4:  1rem;     /* 16px */
  --sp-5:  1.25rem;  /* 20px */
  --sp-6:  1.5rem;   /* 24px */
  --sp-8:  2rem;     /* 32px */
  --sp-10: 2.5rem;   /* 40px */
  --sp-12: 3rem;     /* 48px */
  --sp-16: 4rem;     /* 64px */
  --sp-20: 5rem;     /* 80px */
  --sp-24: 6rem;     /* 96px */
  --sp-32: 8rem;     /* 128px */

  /* Responsive section padding */
  --section-y: clamp(5rem, 10vw, 9rem);
  --section-y-sm: clamp(3.5rem, 7vw, 6rem);

  /* ─── LAYOUT ─── */

  --container-sm:  40rem;
  --container-md:  60rem;
  --container-lg:  76rem;
  --container-xl:  90rem;
  --container-pad: clamp(1.25rem, 5vw, 3rem);

  /* ─── BORDER ─── */

  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* ─── SHADOWS ─── */

  --shadow-xs:    0 1px 4px  rgba(0, 0, 0, 0.12);
  --shadow-sm:    0 2px 8px  rgba(0, 0, 0, 0.18);
  --shadow-md:    0 4px 20px rgba(0, 0, 0, 0.25);
  --shadow-lg:    0 8px 40px rgba(0, 0, 0, 0.3);
  --shadow-xl:    0 16px 64px rgba(0, 0, 0, 0.4);
  --shadow-gold:  0 8px 40px rgba(79, 181, 111, 0.32);
  --shadow-green: 0 8px 32px rgba(86, 168, 115, 0.27);

  /* ─── TRANSITIONS ─── */

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:      var(--ease-out-quart);
  --ease-in:       cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --ease-in-out:   cubic-bezier(0.4, 0.0, 0.2, 1.0);
  --ease-spring:   var(--ease-out-quint);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-expo:     var(--ease-out-expo);

  --dur-feedback: 0.16s;
  --dur-instant: 0.12s;
  --dur-fast:    0.22s;
  --dur-state:   0.32s;
  --dur-base:    0.4s;
  --dur-slow:    0.62s;
  --dur-enter:   0.8s;
  --dur-slower:  0.92s;
  --dur-slowest: 1.35s;

  --transition-fast: var(--dur-fast);
  --transition-base: var(--dur-base);

  /* ─── Z-INDEX ─── */

  --z-below:      -1;
  --z-base:        0;
  --z-raised:     10;
  --z-overlay:    50;
  --z-header:    100;
  --z-dropdown:  200;
  --z-modal:     500;
  --z-cursor:    2147483600;
  --z-preloader: 1000;
}