/* ============================================================
   Cloud Create — Colors & Type (shared tokens)
   Source: Cloud Create Design System / colors_and_type.css
   NOTE: GT Alpina files below are TRIAL license fonts — swap for
   the licensed webfont files before real launch.
   ============================================================ */

/* ─── FONTS ─────────────────────────────────────────────────── */

@font-face {
  font-family: 'GT Alpina';
  src: url('/wp-content/uploads/2025/11/GT-Alpina-Standard-Light-Trial.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Alpina';
  src: url('/wp-content/uploads/2025/11/GT-Alpina-Standard-Light-Italic-Trial.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Sans companion — DM Sans from Google Fonts.
   Brand spec calls for Neuzeit Grotesk as the primary sans; DM Sans
   is the closest free substitute and matches the geometric warmth.
   Swap to a Neuzeit license file when available. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400&display=swap');


/* ─── COLOR TOKENS ──────────────────────────────────────────── */

:root {
  /* Primary palette */
  --cc-cream:           #FAEDD9;
  --cc-teal:            #86BDBA;
  --cc-charcoal:        #383838;
  --cc-white:           #FFFFFF;

  /* Extended palette */
  --cc-teal-light:      #B8D8D6;
  --cc-teal-dark:       #5E9996;
  --cc-cream-dark:      #F0D9B5;
  --cc-charcoal-mid:    #666666;
  --cc-charcoal-light:  #999999;

  /* Surface & line */
  --cc-surface:         #FFFFFF;
  --cc-surface-alt:     #FAFAFA;
  --cc-surface-cream:   #FAEDD9;
  --cc-surface-dark:    #383838;
  --cc-hairline:        #EBEBEB;
  --cc-hairline-soft:   #F2F2F2;
  --cc-chip-bg:         #F7F7F7;

  /* Semantic foregrounds */
  --cc-fg:              #383838;
  --cc-fg-muted:        #666666;
  --cc-fg-subtle:       #999999;
  --cc-fg-on-dark:      #FAEDD9;
  --cc-fg-on-dark-soft: #B8D8D6;
  --cc-fg-on-teal:      #FFFFFF;

  /* Semantic accent */
  --cc-accent:          #86BDBA;
  --cc-accent-strong:   #5E9996;
  --cc-link:            #383838;
  --cc-link-underline:  #383838;

  /* ─── TYPE FAMILIES ─────────────────────────────────────── */
  --cc-font-serif:      'GT Alpina', Georgia, 'Times New Roman', serif;
  --cc-font-sans:       'DM Sans', 'Neuzeit Grotesk', system-ui, -apple-system, sans-serif;
  --cc-font-mono:       'Courier New', ui-monospace, monospace;

  /* ─── RADII ─────────────────────────────────────────────── */
  --cc-radius-xs:        4px;
  --cc-radius-sm:        8px;
  --cc-radius-md:        10px;
  --cc-radius-lg:        12px;
  --cc-radius-pill:      100px;

  /* ─── MOTION ────────────────────────────────────────────── */
  --cc-ease:             cubic-bezier(0.22, 0.61, 0.36, 1);
  --cc-ease-out:         cubic-bezier(0.16, 1, 0.30, 1);
  --cc-dur-fast:         150ms;
  --cc-dur:              250ms;
  --cc-dur-slow:         450ms;
}

/* Manual <br class="cc-break"> in headlines: keeps the designed desktop
   line break, but lets text reflow naturally once it's too narrow for
   that break to make sense. */
@media (max-width: 720px) {
  .cc-break { display: none; }
}