/* ============================================================================
 * THE HOLLAND CLINIC — WORKSHOPS — Brand Tokens
 * Source: thc-brand-guidelines skill (April 2026), authoritative
 * ============================================================================ */

:root {
  /* --- Colour: base palette (Chimilla / Casa Manekineko) --- */
  --thc-black:        #000000;
  --thc-teal:         #1e3f3f;   /* Primary */
  --thc-sage:         #c0c7a7;   /* Secondary */
  --thc-magenta:      #f21ea1;   /* Accent — sparingly */
  --thc-cream:        #faf5e7;   /* Background */
  --thc-white:        #ffffff;

  /* --- Colour: tints (Chimilla tint scale) --- */
  --thc-black-80:     #333333;
  --thc-black-60:     #666666;
  --thc-black-40:     #999999;
  --thc-black-20:     #cccccc;

  --thc-teal-80:      #4b6565;
  --thc-teal-60:      #788c8c;
  --thc-teal-40:      #a5b2b2;
  --thc-teal-20:      #d2d9d9;

  --thc-sage-80:      #cdd2b9;
  --thc-sage-60:      #d9ddca;
  --thc-sage-40:      #e6e9dc;
  --thc-sage-20:      #f2f4ed;

  --thc-magenta-80:   #f54bb4;
  --thc-magenta-60:   #f778c7;
  --thc-magenta-40:   #faa5d9;
  --thc-magenta-20:   #fcd2ec;

  /* --- Semantic roles --- */
  --c-bg:             var(--thc-cream);
  --c-bg-deep:        var(--thc-teal);
  --c-surface:        var(--thc-white);
  --c-text:           var(--thc-black-80);
  --c-text-muted:     var(--thc-black-60);
  --c-text-inverse:   var(--thc-cream);
  --c-accent:         var(--thc-teal);
  --c-accent-soft:    var(--thc-sage);
  --c-highlight:      var(--thc-magenta);
  --c-divider:        var(--thc-teal-20);

  /* --- Typography --- */
  --font-head:  'Cormorant', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Type scale (mobile first) --- */
  --fs-xs:      0.8125rem;   /* 13px */
  --fs-sm:      0.9375rem;   /* 15px */
  --fs-base:    1rem;        /* 16px */
  --fs-lg:      1.125rem;    /* 18px */
  --fs-xl:      1.375rem;    /* 22px */
  --fs-2xl:     1.75rem;     /* 28px */
  --fs-3xl:     2.25rem;     /* 36px */
  --fs-4xl:     2.75rem;     /* 44px */
  --fs-5xl:     3.5rem;      /* 56px */

  /* --- Spacing --- */
  --s-1:   0.25rem;
  --s-2:   0.5rem;
  --s-3:   0.75rem;
  --s-4:   1rem;
  --s-5:   1.5rem;
  --s-6:   2rem;
  --s-7:   2.75rem;
  --s-8:   3.5rem;
  --s-9:   5rem;
  --s-10:  7rem;

  /* --- Layout --- */
  --container:        72rem;   /* 1152px */
  --container-narrow: 44rem;   /* 704px */
  --pad-x-mobile:     1.25rem;
  --pad-x-desktop:    2rem;

  /* --- Radius --- */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  14px;
  --r-xl:  20px;

  /* --- Shadow (warm, never cold) --- */
  --shadow-sm: 0 1px 2px rgba(30, 63, 63, 0.06);
  --shadow-md: 0 4px 14px rgba(30, 63, 63, 0.08);
  --shadow-lg: 0 18px 40px rgba(30, 63, 63, 0.12);

  /* --- Motion --- */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    150ms;
  --dur:         260ms;
  --dur-slow:    480ms;
}

/* --- Larger viewport adjustments --- */
@media (min-width: 768px) {
  :root {
    --fs-3xl: 2.75rem;
    --fs-4xl: 3.5rem;
    --fs-5xl: 4.5rem;
  }
}