/* CaribCore Technologies N.V. — web type scale
   Ratio 1.25 (major third). Base 16px = 1rem.
   Fluid between a 360px and a 1280px viewport. */

:root {
  --cc-font-heading: 'Poppins', 'Trebuchet MS', Arial, sans-serif;
  --cc-font-body:    'Lato', Calibri, Arial, Helvetica, sans-serif;

  /* size */
  --cc-size-display: clamp(2.5rem, 2.207rem + 1.3vw, 3.25rem);
  --cc-size-h1:      clamp(2rem, 1.804rem + 0.87vw, 2.5rem);
  --cc-size-h2:      clamp(1.5rem, 1.402rem + 0.435vw, 1.75rem);
  --cc-size-h3:      1.25rem;
  --cc-size-h4:      1.125rem;
  --cc-size-lead:    clamp(1.125rem, 1.076rem + 0.217vw, 1.25rem);
  --cc-size-body:    1rem;
  --cc-size-small:   0.875rem;
  --cc-size-caption: 0.8125rem;
  --cc-size-eyebrow: 0.75rem;

  /* line height */
  --cc-lh-display:   1.08;
  --cc-lh-h1:        1.15;
  --cc-lh-h2:        1.25;
  --cc-lh-h3:        1.35;
  --cc-lh-h4:        1.4;
  --cc-lh-lead:      1.6;
  --cc-lh-body:      1.6;
  --cc-lh-small:     1.5;
  --cc-lh-caption:   1.45;
  --cc-lh-eyebrow:   1.3;

  /* measure — never let a text column exceed this */
  --cc-measure: 68ch;

  /* spacing rhythm, 4px base */
  --cc-space-1: 0.25rem;
  --cc-space-2: 0.5rem;
  --cc-space-3: 0.75rem;
  --cc-space-4: 1.0rem;
  --cc-space-5: 1.5rem;
  --cc-space-6: 2.0rem;
  --cc-space-7: 3.0rem;
  --cc-space-8: 4.0rem;
  --cc-space-9: 6.0rem;
}

/* breakpoints — mobile first */
/* @media (min-width: 480px) { ... }  sm */
/* @media (min-width: 768px) { ... }  md */
/* @media (min-width: 1024px) { ... }  lg */
/* @media (min-width: 1280px) { ... }  xl */

body { font-family: var(--cc-font-body); font-size: var(--cc-size-body);
       line-height: var(--cc-lh-body); color: #22303A; }
h1, h2, h3, h4 { font-family: var(--cc-font-heading); color: #062236;
                 max-width: var(--cc-measure); }
h1 { font-size: var(--cc-size-h1); line-height: var(--cc-lh-h1); font-weight: 700; }
h2 { font-size: var(--cc-size-h2); line-height: var(--cc-lh-h2); font-weight: 700; color: #0C4D76; }
h3 { font-size: var(--cc-size-h3); line-height: var(--cc-lh-h3); font-weight: 500; color: #118470; }
h4 { font-size: var(--cc-size-h4); line-height: var(--cc-lh-h4); font-weight: 500; }
p  { max-width: var(--cc-measure); margin-block: 0 var(--cc-space-4); }
.cc-lead    { font-size: var(--cc-size-lead); line-height: var(--cc-lh-lead); color: #0C4D76; }
.cc-small   { font-size: var(--cc-size-small); line-height: var(--cc-lh-small); }
.cc-caption { font-size: var(--cc-size-caption); line-height: var(--cc-lh-caption);
              font-style: italic; color: #506472; }
.cc-eyebrow { font-size: var(--cc-size-eyebrow); line-height: var(--cc-lh-eyebrow);
              font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
              color: #118470; }
a { color: #118470; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }