/* ===========================================================================
   Fritz ist Frieda Fotografie - Design Tokens
   Single accent system: Petrol #028375. No black, no harsh angles.
   =========================================================================== */

:root {
  /* --- Brand: Petrol -------------------------------------------------- */
  --brand-petrol:      #028375;
  --brand-petrol-deep: #016558;
  --brand-petrol-soft: #4ea59a;
  --brand-petrol-tint: #e6f1ef;
  --brand-petrol-wash: #f4f8f7;

  /* --- Ink: warm slate, never black ---------------------------------- */
  --ink-1: #3d4a48;   /* headlines */
  --ink-2: #586663;   /* body */
  --ink-3: #788481;   /* secondary */
  --ink-4: #9aa3a0;   /* meta */
  --ink-5: #c2c8c5;   /* disabled */

  /* --- Paper: warm off-white ----------------------------------------- */
  --paper-0: #ffffff;
  --paper-1: #fbfaf7;
  --paper-2: #f4f1ec;
  --paper-3: #ebe7e0;
  --paper-4: #d8d3ca;

  /* --- Status: muted, earthy ---------------------------------------- */
  --ok:   #5a7a4a;
  --warn: #b07a2a;
  --err:  #a64646;

  /* --- Typography: scale --------------------------------------------- */
  --t-display-xl: clamp(3.5rem, 7vw,   6rem);     /* 56 → 96 */
  --t-display-lg: clamp(2.75rem, 5.5vw, 4.5rem);  /* 44 → 72 */
  --t-display-md: clamp(2.25rem, 4.2vw, 3.5rem);  /* 36 → 56 */

  --t-h1: clamp(2rem,   3.4vw, 2.75rem);  /* 32 → 44 */
  --t-h2: clamp(1.625rem, 2.6vw, 2.125rem); /* 26 → 34 */
  --t-h3: 1.375rem;  /* 22 */
  --t-h4: 1.125rem;  /* 18 */

  --t-body-lg: 1.125rem;  /* 18 - lede */
  --t-body:    1rem;      /* 16 */
  --t-body-sm: 0.875rem;  /* 14 */
  --t-meta:    0.8125rem; /* 13 */
  --t-eyebrow: 0.75rem;   /* 12 */

  /* --- Font families -------------------------------------------------- */
  --ff-sans:   "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-serif:  "Cormorant Garamond", "Hoefler Text", Garamond, serif;

  /* --- Spacing: 4-px grid --------------------------------------------- */
  --s-1:  0.25rem;   /* 4 */
  --s-2:  0.5rem;    /* 8 */
  --s-3:  0.75rem;   /* 12 */
  --s-4:  1rem;      /* 16 */
  --s-5:  1.5rem;    /* 24 */
  --s-6:  2rem;      /* 32 */
  --s-7:  3rem;      /* 48 */
  --s-8:  4rem;      /* 64 */
  --s-9:  6rem;      /* 96 */
  --s-10: 8rem;      /* 128 */

  /* --- Radii: soft ---------------------------------------------------- */
  --r-1:    6px;
  --r-2:    10px;
  --r-3:    16px;
  --r-pill: 999px;

  /* --- Shadows: warm, slate-green (never blue) ----------------------- */
  --shadow-1: 0 1px 2px rgba(88, 102, 99, 0.05);
  --shadow-2: 0 6px 24px rgba(88, 102, 99, 0.08);
  --shadow-3: 0 20px 50px rgba(88, 102, 99, 0.12);
  --shadow-portrait: 0 28px 60px rgba(88, 102, 99, 0.18);

  /* --- Motion -------------------------------------------------------- */
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- Layout -------------------------------------------------------- */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
  --section-y:     clamp(3rem, 8vw, 6rem);
  --header-h:      72px;
}