/* =========================================================
   tokens.css — Design Tokens raw&royal
   ========================================================= */

:root {

  /* -------------------------------------------------------
     FARBEN
  ------------------------------------------------------- */

  --ink:        #0A0A0A;   /* fast-schwarz */
  --paper:      #FAFAF7;   /* warmes Weiß */
  --gold:       #D4AF7F;   /* Champagner – nur bei Heavy-Schnitten */
  --gold-deep:  #B8915C;   /* Hover / Tiefe */
  --muted:      #6B6B68;   /* sekundärer Text */
  --accent:     #5C7A92;   /* gedecktes Blaugrau, sparsam */

  /* Flächen */
  --surface-dark:   #111110;  /* RAW-Sections, dunkle Blöcke */
  --surface-mid:    #1A1A18;  /* leicht aufgehellte dunkle Fläche */
  --surface-light:  #F0EFE9;  /* leicht getöntes Weiß für Cards */

  /* Hairlines */
  --border:         rgba(212, 175, 127, 0.2);   /* Gold-Hairline, dezent */
  --border-strong:  rgba(212, 175, 127, 0.5);

  /* -------------------------------------------------------
     TYPOGRAFIE
  ------------------------------------------------------- */

  /* Familien */
  --font-serif:  'Playfair Display', Georgia, serif;   /* ROYAL-Momente */
  --font-sans:   'Inter', system-ui, sans-serif;        /* Body, UI */

  /* Größen – fluid via clamp(min, preferred, max) */
  --text-xs:    clamp(0.694rem,  0.67rem  + 0.12vw,  0.75rem);
  --text-sm:    clamp(0.833rem,  0.8rem   + 0.17vw,  0.938rem);
  --text-base:  clamp(1rem,      0.95rem  + 0.25vw,  1.125rem);
  --text-md:    clamp(1.125rem,  1.05rem  + 0.38vw,  1.375rem);
  --text-lg:    clamp(1.25rem,   1.1rem   + 0.75vw,  1.75rem);
  --text-xl:    clamp(1.5rem,    1.2rem   + 1.5vw,   2.5rem);
  --text-2xl:   clamp(2rem,      1.5rem   + 2.5vw,   3.5rem);
  --text-3xl:   clamp(2.5rem,    1.8rem   + 3.5vw,   5rem);
  --text-hero:  clamp(3rem,      2rem     + 5vw,      7rem);

  /* Gewichte */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;
  --weight-heavy:   900;   /* Playfair 900 + Gold = ROYAL-Geste */

  /* Zeilenabstände */
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  /* Laufweiten */
  --tracking-tight:  -0.03em;
  --tracking-normal:  0em;
  --tracking-wide:    0.08em;
  --tracking-widest:  0.2em;

  /* -------------------------------------------------------
     SPACING — 4px-Basis
  ------------------------------------------------------- */

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

  /* Section-Padding – fluid */
  --section-padding-y: clamp(var(--space-16), 10vw, var(--space-40));
  --section-padding-x: clamp(var(--space-6),  5vw,  var(--space-16));

  /* -------------------------------------------------------
     CONTAINER
  ------------------------------------------------------- */

  --container-max:    1280px;
  --container-text:    720px;   /* optimale Lesebreite */
  --container-narrow:  560px;
  --container-padding: clamp(var(--space-6), 5vw, var(--space-16));

  /* -------------------------------------------------------
     MOTION
  ------------------------------------------------------- */

  /* Dauern */
  --duration-fast:    150ms;
  --duration-base:    300ms;
  --duration-slow:    600ms;
  --duration-slower:  900ms;
  --duration-crawl:  1200ms;

  /* Easing */
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --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:   cubic-bezier(0.34, 1.56, 0.64, 1.0);  /* leichter Overshoot */
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);       /* für Hero-Entrances */

  /* Scroll-Reveal – Standard-Transition */
  --reveal-transition: opacity var(--duration-slow) var(--ease-cinematic),
                       transform var(--duration-slow) var(--ease-cinematic);

  /* -------------------------------------------------------
     BORDER-RADIUS
  ------------------------------------------------------- */

  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 9999px;

  /* -------------------------------------------------------
     SCHATTEN
  ------------------------------------------------------- */

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.5);

  /* -------------------------------------------------------
     Z-INDEX-LEITER
  ------------------------------------------------------- */

  --z-base:     0;
  --z-raised:   10;
  --z-overlay:  100;
  --z-nav:      200;
  --z-modal:    300;
  --z-toast:    400;

}