/*
 * CHONGQING JOURNEY DESIGN CONTROLS
 * ---------------------------------
 * Change the values in this file to adjust the whole website.
 * Desktop values are first. Mobile overrides are at the bottom.
 */

:root {
  /* Brand colours */
  --cj-cyber-porcelain: #f0fcff;
  --cj-neon-orange: #fd9800;
  --cj-neon-orange-hover: #ffad22;
  --cj-neon-blue: #17ddff;
  --cj-deep-navy: #07192d;
  --cj-warm-ivory: #f7f4ee;

  /* Supporting colours derived from the brand palette */
  --cj-deep-navy-soft: #0a223b;
  --cj-deep-navy-raised: #0d2b47;
  --cj-porcelain-muted: rgba(240, 252, 255, 0.74);
  --cj-porcelain-subtle: rgba(240, 252, 255, 0.54);
  --cj-line: rgba(23, 221, 255, 0.32);
  --cj-shadow-neon-blue: 0 0 1.5rem rgba(23, 221, 255, 0.14);
  --cj-shadow-neon-orange: 0 0.75rem 2rem rgba(253, 152, 0, 0.2);

  /* Typography */
  --cj-font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cj-font-size-body: 16px;
  --cj-font-size-small: 13px;
  --cj-font-size-nav: 15px;
  --cj-font-size-hero-title: 72px;
  --cj-font-size-hero-intro: 19px;
  --cj-font-size-section-title: 48px;
  --cj-font-size-card-title: 22px;
  --cj-line-height-body: 1.65;
  --cj-line-height-heading: 1.05;

  /* Layout */
  --cj-content-width: 1140px;
  --cj-reading-width: 760px;
  --cj-page-gutter: 32px;
  --cj-header-height: 78px;
  --cj-section-space: 112px;

  /* Shapes and movement */
  --cj-radius-small: 10px;
  --cj-radius-medium: 18px;
  --cj-radius-large: 28px;
  --cj-transition-fast: 160ms ease;
  --cj-transition-standard: 260ms ease;

  /* Future mobile carousel rule: two complete cards per screen */
  --cj-mobile-carousel-columns: 2;
  --cj-mobile-carousel-gap: 12px;
}

  /* Mobile typography and spacing controls */
@media (max-width: 767px) {
  :root {
    --cj-font-size-body: 16px;
    --cj-font-size-small: 13px;
    --cj-font-size-nav: 16px;
    /* Hero title scales between 27px on small phones and 40px on wide phones. */
    --cj-font-size-hero-title: clamp(27px, 7.2vw, 40px);
    --cj-font-size-hero-intro: 16px;
    --cj-font-size-section-title: 30px;
    --cj-font-size-card-title: 16px;
    --cj-page-gutter: 18px;
    --cj-header-height: 68px;
    --cj-section-space: 72px;
  }
}