/* ==========================================================================
   Design tokens
   Single source of truth for colour, layout, motion and type values.
   Every other stylesheet consumes these through var().
   ========================================================================== */

:root {
  /* Brand ---------------------------------------------------------------- */
  --accent: #00a884;
  --accent-hover: #008f73;
  --accent-soft: rgba(0, 168, 132, 0.12);
  --accent-border: rgba(0, 168, 132, 0.32);
  --secondary: #227093;

  /* Surfaces ------------------------------------------------------------- */
  --app-bg: #f3f7f8;
  --app-bg-soft: #eaf1f3;
  --surface: #fbfdfe;
  --surface-raised: #ffffff;
  --surface-muted: #eef5f6;

  /* Text ----------------------------------------------------------------- */
  --text: #253241;
  --text-muted: #64748b;
  --text-subtle: #91a1b2;

  /* Lines, states and feedback ------------------------------------------- */
  --border: rgba(37, 50, 65, 0.12);
  --border-strong: rgba(37, 50, 65, 0.2);
  --warning: #f59e0b;
  --danger: #e4574f;
  --focus-ring: 0 0 0 3px rgba(0, 168, 132, 0.18);

  /* Layout --------------------------------------------------------------- */
  --page-gutter: clamp(1.1rem, 3vw, 3rem);
  --content: 1280px;
  --radius-card: 18px;
  --radius-control: 12px;
  --shadow-soft: 0 24px 70px rgba(34, 112, 147, 0.13);

  /* Motion --------------------------------------------------------------- */
  --ease-out: cubic-bezier(.2, .8, .2, 1);

  /* Type scale ----------------------------------------------------------- */
  --type-xs: .8125rem;
  --type-sm: .9375rem;
  --type-body: 1.0625rem;
  --type-card-title: clamp(1.3rem, 1.5vw, 1.65rem);
  --type-section: clamp(2.4rem, 3.5vw, 3.5rem);
}

@media (max-width: 720px) {
  :root { --page-gutter: 1rem; }
}