/* ================================== */
/* CLEARSTEP BRAND SYSTEM — LOGO BASED */
/* ================================== */

:root {

  /* ================================== */
  /* BACKGROUND — Richer Teal (Not White) */
  /* ================================== */

  --cs-bg: linear-gradient(
    135deg,
    #c6ebe3 0%,
    #a9ddd0 50%,
    #c0e8dc 100%
  );

  --cs-bg-alt: rgba(255,255,255,0.88);

  /* ================================== */
  /* BRAND COLORS (From Logo) */
  /* ================================== */

  --cs-teal: #0e6b73;
  --cs-teal-dark: #0b565c;

  --cs-green: #2fa46f;
  --cs-green-soft: #6ccf8d;

  --cs-yellow-accent: #f1c85b;

  /* ================================== */
  /* TEXT */
  /* ================================== */

  --cs-text: #163338;
  --cs-text-muted: #2d4f55;
  --cs-text-dim: rgba(22,51,56,0.65);

  /* ================================== */
  /* BORDERS */
  /* ================================== */

  --cs-border: rgba(14,107,115,0.18);
  --cs-divider: rgba(14,107,115,0.10);

  /* ================================== */
  /* BUTTONS */
  /* ================================== */

  --cs-btn-primary-bg: linear-gradient(135deg, #0e6b73, #2fa46f);
  --cs-btn-primary-hover: linear-gradient(135deg, #0b565c, #279160);

  --cs-btn-text: #ffffff;

  /* ================================== */
  /* RADIUS */
  /* ================================== */

  --cs-radius-sm: 10px;
  --cs-radius-md: 14px;
  --cs-radius-lg: 18px;

  /* ================================== */
  /* LAYOUT */
  /* ================================== */

  --cs-container-max: 1100px;
  --cs-section-pad-y: 100px;

  /* ================================== */
  /* TYPOGRAPHY */
  /* ================================== */

  --cs-h1-size: clamp(2rem, 3.2vw, 3rem);
  --cs-h2-size: 1.6rem;
  --cs-h3-size: 1.2rem;
  --cs-body-size: 1rem;
  --cs-lede-size: 1.2rem;
  --cs-line: 1.75;
}