/* ============================================================
 * TechnicalGuider — shared design tokens
 * ============================================================
 * Placeholder for shared CSS variables, fonts, and base resets
 * used across the homepage and service landing pages.
 *
 * Add tokens here as the multi-page system matures.
 * ============================================================ */

:root {
  /* Brand palette */
  --tg-cyan: #3ECFFF;
  --tg-blue: #0a66c2;
  --tg-violet: #7B6FFF;
  --tg-rose: #EC4899;
  --tg-green: #00E5A0;
  --tg-amber: #F59E0B;

  /* Text */
  --tg-text: #0A0A0A;
  --tg-text-muted: #4B5563;
  --tg-text-subtle: #6B7280;
  --tg-text-faint: #9CA3AF;

  /* Surfaces */
  --tg-bg: #FFFFFF;
  --tg-bg-soft: #FAFBFF;
  --tg-bg-muted: #F1F5F9;
  --tg-border: rgba(15, 23, 42, 0.06);
  --tg-border-strong: rgba(15, 23, 42, 0.12);

  /* Radii */
  --tg-radius-sm: 8px;
  --tg-radius-md: 12px;
  --tg-radius-lg: 20px;
  --tg-radius-pill: 100px;

  /* Shadows */
  --tg-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --tg-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.06);
  --tg-shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.08);

  /* Animation */
  --tg-easing: cubic-bezier(0.16, 1, 0.3, 1);
}