/* ============================================================
   SELINA FERRARI PSYCHOTHERAPIE — Colors & Type Foundations
   ------------------------------------------------------------
   Fonts are loaded from Google Fonts (nearest matches to the
   logo lettering — see README "Typography substitution").
   Display  : Playfair Display  (the "Selina Ferrari" wordmark)
   Text/UI  : Mulish            (the "Psychotherapie" subtitle)
   ============================================================ */

/* Fonts self-hosted locally (DSGVO — kein externer Google-Fonts-Aufruf). See fonts/fonts.css */
@import url('fonts/fonts.css');

:root {
  /* ---- Brand core ---------------------------------------- */
  --brand-teal: #31677D;   /* petrol — head linework + wordmark */
  --brand-rust: #963E25;   /* terracotta — "Psychotherapie"     */

  /* ---- Petrol teal scale --------------------------------- */
  --teal-900: #16323F;
  --teal-800: #1F4456;
  --teal-700: #275668;
  --teal-600: #31677D;     /* PRIMARY */
  --teal-500: #4A7C90;
  --teal-400: #6E97A8;
  --teal-300: #9BB8C4;
  --teal-200: #C6D8DF;
  --teal-100: #E4ECEF;
  --teal-50:  #F1F6F7;

  /* ---- Terracotta / rust scale --------------------------- */
  --rust-900: #4E2113;
  --rust-800: #6E2C18;
  --rust-700: #7E331C;
  --rust-600: #963E25;     /* ACCENT */
  --rust-500: #B0553A;
  --rust-400: #C47A60;
  --rust-300: #D9A48E;
  --rust-200: #EBCEC1;
  --rust-100: #F4E4DC;
  --rust-50:  #FAF1EC;

  /* ---- Warm neutrals (paper & ink) ----------------------- */
  --warm-900: #2A2218;
  --warm-800: #3E3327;
  --warm-700: #5C4E3F;
  --warm-600: #756554;
  --warm-500: #93826D;
  --warm-400: #B2A28A;
  --warm-300: #CFC1AA;
  --warm-200: #E4D8C5;
  --warm-100: #EFE7DA;
  --warm-50:  #F6EFE3;
  --paper:    #FBF3E9;     /* default canvas — warm terracotta-tinted cream */
  --white:    #FFFFFF;

  /* ---- Semantic surfaces & text -------------------------- */
  --bg:             var(--paper);
  --bg-deep:        var(--teal-800);     /* dark sections / footer */
  --bg-warm:        var(--rust-900);     /* warm dark band (quote)   */
  --surface:        #FFFDFA;             /* warm white for cards     */
  --surface-sunken: var(--warm-50);
  --surface-tinted: var(--rust-50);      /* warm section tint        */
  --surface-cool:   var(--teal-50);      /* cool section tint        */

  --fg:        #2E251C;                  /* primary body text — warm ink */
  --fg-heading: var(--teal-800);         /* serif headings     */
  --fg-muted:  #5C4E3F;                  /* secondary text     */
  --fg-subtle: #756554;                  /* captions, meta \u2014 AA 5.1:1 on paper */
  --fg-on-dark: #EAF1F3;                 /* text on petrol bg  */
  --fg-on-dark-muted: #A9C2CC;

  --primary:        var(--teal-600);
  --primary-hover:  var(--teal-700);
  --primary-press:  var(--teal-800);
  --accent:         var(--rust-600);
  --accent-hover:   var(--rust-700);

  --border:        #E7DCCB;              /* warm hairline            */
  --border-strong: var(--warm-300);
  --border-tinted: var(--rust-100);
  --focus-ring:    var(--teal-400);

  /* ---- Type families ------------------------------------- */
  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-text:    'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Type scale (rem on 16px base) --------------------- */
  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-md:   1.125rem;   /* 18 */
  --text-lg:   1.375rem;   /* 22 */
  --text-xl:   1.75rem;    /* 28 */
  --text-2xl:  2.25rem;    /* 36 */
  --text-3xl:  3rem;       /* 48 */
  --text-4xl:  4rem;       /* 64 */
  --text-5xl:  5.25rem;    /* 84 */

  --leading-tight: 1.1;
  --leading-snug:  1.25;
  --leading-normal:1.5;
  --leading-relaxed:1.7;

  --tracking-wide:  0.04em;
  --tracking-wider: 0.14em;   /* eyebrows / labels */

  /* ---- Radii --------------------------------------------- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- Spacing (4px base) -------------------------------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;

  /* ---- Elevation (soft, warm-tinted) --------------------- */
  --shadow-xs: 0 1px 2px rgba(78, 33, 19, 0.06);
  --shadow-sm: 0 2px 8px rgba(78, 33, 19, 0.08);
  --shadow-md: 0 8px 26px rgba(78, 33, 19, 0.10);
  --shadow-lg: 0 18px 50px rgba(78, 33, 19, 0.14);
  --shadow-focus: 0 0 0 3px rgba(196, 122, 96, 0.40);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — opt-in via .ds-prose or utilities
   ============================================================ */
.ds-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--fg-heading);
}
.ds-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.005em;
  color: var(--fg-heading);
}
.ds-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--fg-heading);
}
.ds-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg-heading);
}
.ds-lead {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-muted);
}
.ds-body {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg);
}
.ds-small {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}
.ds-caption {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg-subtle);
}
.ds-eyebrow {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--text-xs);
  line-height: 1;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent);
}