/* =====================================================================
 * Curaçao Business Magazine — Design Tokens
 * colors_and_type.css
 *
 * Import this once per HTML file:
 *   <link rel="stylesheet" href="colors_and_type.css">
 *
 * Provides:
 *   - Brand colour variables (--cbm-blue, etc) + semantic aliases
 *   - Type scale variables + element defaults
 *   - Spacing / radius / shadow / motion tokens
 *   - Utility classes for common brand patterns (.cbm-eyebrow,
 *     .cbm-section-rule, .cbm-button-primary, etc.)
 * ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&family=Montserrat:wght@300;400;500;600;700;800&display=swap');

/* ---------------------------------------------------------------------
 * 1. Tokens
 * ------------------------------------------------------------------- */
:root {
  /* --- Brand palette (canonical, from brand board) --- */
  --cbm-blue:        #08345E;     /* primary */
  --cbm-blue-dark:   #062A4D;     /* hover */
  --cbm-blue-press:  #04223F;     /* press */
  --cbm-gold:        #FFC20E;     /* accent */
  --cbm-gold-hover:  #F5B600;
  --cbm-gold-press:  #E0A600;
  --cbm-on-accent:   #08345E;     /* foreground on top of the accent; overridden by tweaks */
  --cbm-white:       #FFFFFF;
  --cbm-silver:      #E6E8EB;     /* dividers, "Silver" tier, card surfaces */
  --cbm-silver-2:    #F4F5F7;     /* tinted page bg (derived) */
  --cbm-charcoal:    #1A2333;     /* body text on light */

  /* --- Derived / neutrals --- */
  --cbm-ink:         #0F1A2A;     /* slightly cooler than charcoal, for very long copy */
  --cbm-muted:       #5C6675;     /* secondary text */
  --cbm-faint:       #9AA3B0;     /* tertiary / captions */
  --cbm-rule:        rgba(8, 52, 94, 0.12);  /* hairline on light */
  --cbm-rule-dark:   rgba(255, 255, 255, 0.18);  /* hairline on blue */
  --cbm-scrim:       rgba(8, 52, 94, 0.60);  /* photo overlay */

  /* --- Foreground / background semantic --- */
  --fg-1: var(--cbm-charcoal);    /* primary text */
  --fg-2: var(--cbm-muted);       /* secondary text */
  --fg-3: var(--cbm-faint);       /* tertiary text */
  --fg-inv: var(--cbm-white);     /* on dark surfaces */
  --fg-accent: var(--cbm-blue);
  --fg-gold: var(--cbm-gold);

  --bg-page:    var(--cbm-white);
  --bg-tint:    var(--cbm-silver-2);
  --bg-card:    var(--cbm-white);
  --bg-dark:    var(--cbm-blue);
  --bg-darker:  var(--cbm-charcoal);

  /* --- Typography --- */
  --font-display: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --font-body:    'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (1.250 — major third), display tier exaggerated */
  --type-display-xl: clamp(56px, 8vw, 120px);
  --type-display-l:  clamp(40px, 5.5vw, 72px);
  --type-display-m:  clamp(32px, 3.5vw, 48px);
  --type-h1:         clamp(28px, 3vw, 40px);
  --type-h2:         clamp(22px, 2.2vw, 28px);
  --type-h3:         clamp(18px, 1.6vw, 22px);
  --type-body-l:     18px;
  --type-body:       16px;
  --type-body-s:     14px;
  --type-caption:    12px;
  --type-label:      11px;   /* ALL CAPS labels */

  --lh-tight:    1.05;
  --lh-display:  1.1;
  --lh-heading:  1.2;
  --lh-body:     1.55;
  --lh-loose:    1.7;

  --tracking-display: -0.01em;
  --tracking-tight:   -0.005em;
  --tracking-body:    0;
  --tracking-label:   0.08em;     /* ALL CAPS labels */
  --tracking-wide:    0.14em;     /* very-small ALL CAPS */

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

  /* --- Radius --- */
  --radius-0:  0px;
  --radius-1:  2px;
  --radius-2:  4px;       /* default button / chip */
  --radius-3:  8px;       /* web cards */
  --radius-4:  16px;      /* large hero card */
  --radius-pill: 999px;   /* avoid in CBM — reserved for non-CBM contexts */
  --radius-app:  24px;    /* the rounded-square app/profile lockup */

  /* --- Borders --- */
  --border-hairline: 1px solid var(--cbm-rule);
  --border-hairline-strong: 1px solid var(--cbm-silver);
  --border-on-dark: 1px solid var(--cbm-rule-dark);
  --border-gold: 2px solid var(--cbm-gold);

  /* --- Shadows (web only — print should have none) --- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(8, 52, 94, 0.04);
  --shadow-2: 0 2px 8px rgba(8, 52, 94, 0.06);
  --shadow-3: 0 8px 24px rgba(8, 52, 94, 0.10);

  /* --- Motion --- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-med:     280ms;
  --dur-slow:    420ms;

  /* --- Layout --- */
  --container-max: 1200px;
  --container-pad: clamp(20px, 4vw, 64px);
  --grid-gutter:   24px;
}

/* ---------------------------------------------------------------------
 * 2. Base elements
 * ------------------------------------------------------------------- */

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- Headings: display tier uses Playfair, the rest sans --- */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-h2);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-3);
}
h3, .h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--type-h3);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-3);
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--type-body-l);
  margin: 0 0 var(--space-2);
}

/* Display variants — for hero text and magazine covers */
.display-xl,
.display-l,
.display-m {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  margin: 0;
}
.display-xl { font-size: var(--type-display-xl); }
.display-l  { font-size: var(--type-display-l); }
.display-m  { font-size: var(--type-display-m); }

p {
  margin: 0 0 var(--space-4);
  max-width: 65ch;
}

a {
  color: var(--cbm-blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
a:hover { border-bottom-color: var(--cbm-blue); }
a:focus-visible {
  outline: 2px solid var(--cbm-gold);
  outline-offset: 2px;
  border-radius: var(--radius-1);
}

small { font-size: var(--type-body-s); color: var(--fg-2); }

hr {
  border: 0;
  border-top: 1px solid var(--cbm-silver);
  margin: var(--space-8) 0;
}

code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--cbm-silver-2);
  padding: 0.12em 0.4em;
  border-radius: var(--radius-1);
}

/* ---------------------------------------------------------------------
 * 3. Brand utilities
 * ------------------------------------------------------------------- */

/* ALL-CAPS eyebrow label — used everywhere in CBM */
.cbm-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--cbm-blue);
  display: inline-block;
  margin: 0 0 var(--space-3);
}
.cbm-eyebrow--on-dark { color: var(--cbm-white); }
.cbm-eyebrow--gold    { color: var(--cbm-gold); }

/* The signature gold rule beneath a section header */
.cbm-section-rule {
  display: block;
  width: 56px;
  height: 3px;
  background: var(--cbm-gold);
  margin: var(--space-3) 0 var(--space-6);
  border: 0;
}

/* Section header pattern: eyebrow + rule + title */
.cbm-section-header { margin-bottom: var(--space-8); }
.cbm-section-header .cbm-section-rule { margin-top: var(--space-2); }

/* Container */
.cbm-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-pad);
}

/* Surfaces */
.cbm-surface-dark {
  background: var(--bg-dark);
  color: var(--fg-inv);
}
.cbm-surface-dark a { color: var(--cbm-gold); }
.cbm-surface-dark a:hover { border-bottom-color: var(--cbm-gold); }
.cbm-surface-tint { background: var(--bg-tint); }

/* Card */
.cbm-card {
  background: var(--bg-card);
  border: 1px solid var(--cbm-silver);
  border-radius: var(--radius-2);
  padding: var(--space-6);
}
.cbm-card--lifted { box-shadow: var(--shadow-2); }

/* ---------------------------------------------------------------------
 * 4. Buttons
 * ------------------------------------------------------------------- */
.cbm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 22px;
  min-height: 44px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--type-body-s);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  border: 0;
  border-radius: var(--radius-2);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  user-select: none;
}
.cbm-btn:focus-visible {
  outline: 2px solid var(--cbm-gold);
  outline-offset: 2px;
}
.cbm-btn[disabled],
.cbm-btn--disabled {
  opacity: 1;
  cursor: not-allowed;
  background: var(--cbm-silver);
  color: var(--cbm-charcoal);
}

/* Primary — navy */
.cbm-btn--primary {
  background: var(--cbm-blue);
  color: var(--cbm-white);
}
.cbm-btn--primary:hover  { background: var(--cbm-blue-dark); }
.cbm-btn--primary:active { background: var(--cbm-blue-press); }

/* Gold — accent */
.cbm-btn--gold {
  background: var(--cbm-gold);
  color: var(--cbm-on-accent);
}
.cbm-btn--gold:hover  { background: var(--cbm-gold-hover); }
.cbm-btn--gold:active { background: var(--cbm-gold-press); }

/* Ghost — for use on white */
.cbm-btn--ghost {
  background: transparent;
  color: var(--cbm-blue);
  box-shadow: inset 0 0 0 2px var(--cbm-blue);
}
.cbm-btn--ghost:hover {
  background: var(--cbm-blue);
  color: var(--cbm-white);
}

/* Ghost — for use on navy */
.cbm-btn--ghost-inv {
  background: transparent;
  color: var(--cbm-white);
  box-shadow: inset 0 0 0 2px var(--cbm-white);
}
.cbm-btn--ghost-inv:hover {
  background: var(--cbm-white);
  color: var(--cbm-blue);
}

/* ---------------------------------------------------------------------
 * 5. Form fields
 * ------------------------------------------------------------------- */
.cbm-field {
  display: block;
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: var(--type-body);
  color: var(--fg-1);
  background: var(--cbm-white);
  border: 1px solid var(--cbm-silver);
  border-radius: var(--radius-2);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.cbm-field::placeholder { color: var(--cbm-faint); }
.cbm-field:hover  { border-color: #C9CDD3; }
.cbm-field:focus  {
  outline: none;
  border-color: var(--cbm-blue);
  box-shadow: 0 0 0 3px rgba(8, 52, 94, 0.12);
}

.cbm-label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--type-body-s);
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}

/* ---------------------------------------------------------------------
 * 6. Misc patterns
 * ------------------------------------------------------------------- */

/* Triplet headline pattern — “Connect. Inspire. Grow.” */
.cbm-triplet {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-display-m);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--cbm-blue);
}
.cbm-triplet--on-dark .cbm-triplet-3,
.cbm-triplet--on-dark { color: var(--cbm-white); }
.cbm-triplet-3 { color: var(--cbm-gold); }

/* Wordmark — used inside the logo lockup; not for body type */
.cbm-wordmark {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.005em;
  line-height: 1;
  color: var(--cbm-white);
  background: var(--cbm-blue);
  padding: 14px 22px 16px;
}
.cbm-wordmark__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.18em;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--cbm-gold);
  text-transform: uppercase;
  margin-bottom: 0.05em;
}
.cbm-wordmark__name {
  display: block;
  font-size: 1em;
  line-height: 0.95;
}
.cbm-wordmark__sub {
  display: inline-block;
  margin-left: 0.4em;
  font-size: 0.18em;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--cbm-gold);
  vertical-align: 0.6em;
}

/* Diagonal stripe accent (blue / gold / white) — used on banners */
.cbm-stripe {
  display: inline-block;
  width: 64px;
  height: 8px;
  background:
    linear-gradient(
      90deg,
      var(--cbm-blue)  0%, var(--cbm-blue) 33%,
      var(--cbm-gold) 33%, var(--cbm-gold) 66%,
      var(--cbm-silver) 66%, var(--cbm-silver) 100%
    );
  transform: skewX(-20deg);
}

/* Chip / tag */
.cbm-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--cbm-blue);
  background: var(--cbm-silver-2);
  border-radius: var(--radius-1);
}
.cbm-chip--gold {
  color: var(--cbm-on-accent);
  background: var(--cbm-gold);
}
.cbm-chip--dark {
  color: var(--cbm-white);
  background: var(--cbm-blue);
}

/* Photo scrim — for legibility of white text on photos */
.cbm-scrim::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cbm-scrim);
  pointer-events: none;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}