/* ============================================================
   WOMEN OF INFLUENCE — DESIGN TOKENS
   Übernommen 1:1 aus dem Design-System-Handoff
   (tokens/colors.css, typography.css, spacing.css, base.css)
   ============================================================ */

:root {
  /* ---- TEAL · primary brand scale --------------------------- */
  --teal-950: #0D1A1A;
  --teal-900: #102525;
  --teal-800: #14534F;
  --teal-700: #2F6E6E;
  --teal-600: #4E8A8A;
  --teal-500: #7FB5B5;
  --teal-400: #A8CCCC;
  --teal-300: #C7DEDE;
  --teal-200: #E8F4F4;
  --teal-100: #F2F9F9;

  /* ---- SAND / GOLD · precious accent ------------------------ */
  --gold-700: #A8854F;
  --gold-600: #C9A87C;
  --gold-500: #D8BD97;
  --gold-200: #F5EDE0;
  --gold-100: #FAF5EC;

  /* ---- NEUTRALS · ink & cream -------------------------------- */
  --ink-900: #1A2A2A;
  --ink-700: #3D5252;
  --ink-500: #5E7373;
  --ink-400: #7A9494;
  --cream-100: #F7F8EE;
  --white: #FFFFFF;

  /* ---- lines & shadows --------------------------------------- */
  --line: rgba(78,138,138,0.12);
  --line-strong: rgba(78,138,138,0.28);
  --line-gold: rgba(201,168,124,0.45);
  --shadow-sm: 0 2px 10px rgba(78,138,138,0.06);
  --shadow-md: 0 8px 40px rgba(78,138,138,0.07);
  --shadow-lg: 0 18px 60px rgba(26,42,42,0.10);
  --shadow-gold: 0 6px 28px rgba(201,168,124,0.18);
  --focus-ring: rgba(127,181,181,0.55);

  /* ---- families ------------------------------------------- */
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'DM Sans', system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --font-script: 'Playfair Display Italic', 'Cormorant Garamond', serif;

  /* ---- display / editorial serif scale -------------------- */
  --display-2xl: 300 clamp(3.8rem, 9vw, 7.5rem)/0.96 var(--font-serif);
  --display-xl:  300 clamp(3rem, 6vw, 5rem)/1.02 var(--font-serif);
  --display-lg:  300 clamp(2.2rem, 4.5vw, 3.6rem)/1.08 var(--font-serif);
  --display-md:  400 clamp(1.8rem, 3.2vw, 2.6rem)/1.18 var(--font-serif);
  --display-sm:  400 1.6rem/1.25 var(--font-serif);

  /* ---- body sans scale ------------------------------------ */
  --text-lg: 400 1.125rem/1.8 var(--font-sans);
  --text-base: 400 1rem/1.8 var(--font-sans);
  --text-sm: 400 0.875rem/1.7 var(--font-sans);
  --text-xs: 400 0.75rem/1.6 var(--font-sans);

  /* ---- eyebrow / label -------------------------------------- */
  --eyebrow: 500 0.68rem/1.2 var(--font-sans);
  --eyebrow-tracking: 0.24em;
  --label: 500 0.78rem/1.2 var(--font-sans);
  --label-tracking: 0.15em;
  --tracking-display: -0.01em;

  /* ---- spacing / layout ------------------------------------ */
  --section-pad: clamp(4rem, 8vw, 8rem);
  --max-content: 75rem;

  /* ---- radii ---------------------------------------------- */
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- motion ------------------------------------------------ */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}