/* ============================================================
   diekreadiven — design-tokens.css
   Agentur für Kommunikation · München
   Visual style: PLAYFUL · warm · diva · approachable
   The single source of truth. No other file hardcodes values.
   ============================================================ */

:root {

  /* ---------- TYPOGRAPHY: families ---------- */
  /* Display: Fraunces — warm, high-contrast, characterful "diva" serif */
  /* Body:    DM Sans  — clean, friendly, approachable (NOT Inter)       */
  --ff-display: "Fraunces", Georgia, "Times New Roman", serif;
  --ff-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---------- TYPE SCALE (capped at --fs-hero) ---------- */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: clamp(1.75rem, 3.5vw, 2.75rem);
  --fs-4xl: clamp(2.25rem, 4.5vw, 3.75rem);
  --fs-hero: clamp(2.75rem, 5.5vw, 5rem); /* absolute maximum */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-base: 1.6;
  --lh-relaxed: 1.75;

  --ls-tight: -0.03em;
  --ls-snug: -0.015em;
  --ls-normal: 0;
  --ls-wide: 0.06em;
  --ls-wider: 0.12em;

  /* ---------- SPACING ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;
  --section-gap: clamp(4.5rem, 9vw, 8rem);

  /* ---------- RADIUS (Playful → generous, soft) ---------- */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 40px;
  --r-full: 9999px;

  /* ---------- SHADOWS (Playful → soft, diffuse, brand-tinted) ---------- */
  --shadow-sm: 0 1px 2px rgba(42, 24, 19, 0.06),
               0 2px 6px rgba(42, 24, 19, 0.05);
  --shadow-md: 0 6px 16px rgba(42, 24, 19, 0.08),
               0 2px 6px rgba(42, 24, 19, 0.06);
  --shadow-lg: 0 18px 44px rgba(42, 24, 19, 0.14),
               0 6px 16px rgba(42, 24, 19, 0.08);
  --shadow-brand: 0 14px 34px rgba(224, 96, 74, 0.30),
                  0 4px 12px rgba(224, 96, 74, 0.18);

  /* ---------- TRANSITIONS ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 160ms var(--ease-out);
  --t-base: 280ms var(--ease-out);
  --t-slow: 480ms var(--ease-out);

  /* ---------- LAYOUT ---------- */
  --max-w: 1200px;
  --max-w-text: 640px;
  --max-w-sm: 480px;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  /* ---------- COLOR ---------- */
  /* Warmer, less-pink direction: coral-terracotta "Diva" on cream,
     deep-teal accent (creative "rust + teal" contrast), warm espresso darks. */
  /* Backgrounds — warm cream family (never pure #fff) */
  --c-bg: #FCF6EE;          /* warm cream — primary */
  --c-bg-2: #F6EBDD;        /* deeper sand */
  --c-bg-3: #FBE7DE;        /* soft peach (brand-tinted) */
  --c-surface: #FFFDFA;     /* card surface, near-white warm */
  --c-dark: #2A1813;        /* deep warm espresso */
  --c-dark-2: #1C0F0C;      /* deepest cocoa */

  /* Brand — warm coral / terracotta "Diva" */
  --c-brand: #E0604A;
  --c-brand-2: #C24A37;     /* darker, hover */
  --c-brand-3: #EE8064;     /* lighter */
  --c-brand-soft: #F9DDD3;  /* peach tint for avatar circles, soft fills */
  --c-brand-mid: #F2B5A3;   /* mid tint */

  /* Accent — deep teal (contrasts the warm coral, keeps it creative) */
  --c-accent: #168B7D;
  --c-accent-2: #0F6E63;    /* darker teal */

  /* Text */
  --c-text: #2A1813;        /* warm espresso, never pure #000 */
  --c-text-2: #6E564E;      /* muted warm taupe */
  --c-text-3: #9C857C;      /* faint */
  --c-text-inv: #FFFDFA;    /* on dark / on brand */
  --c-text-brand: #C24A37;

  /* Borders */
  --c-border: rgba(42, 24, 19, 0.08);
  --c-border-2: rgba(42, 24, 19, 0.14);

  /* Status */
  --c-success: #2E9E6B;
  --c-success-bg: #E4F4EC;
  --c-error: #D64545;
  --c-error-bg: #FBE6E6;
}