/* ─────────────────────────────────────────────────────────────────
   Design tokens — colors, typography, shape, layout
   Single source of truth. Consumed by every other stylesheet.
   ─────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ─── Brand ─── */
  --primary:        #009688;
  --primary-light:  #00b09e;
  --primary-dark:   #007a70;
  --primary-a8:     rgba(0, 150, 136, 0.08);
  --primary-a16:    rgba(0, 150, 136, 0.16);

  --secondary:      #6D788D;

  /* ─── Surfaces ─── */
  --bg-body:        #F7F7F9;
  --bg-paper:       #FFFFFF;
  --dark-body:      #282A42;
  --dark-paper:     #30334E;

  /* ─── Text ─── */
  --text-primary:   rgba(76, 78, 100, 0.87);
  --text-secondary: rgba(76, 78, 100, 0.60);
  --text-on-dark:        rgba(255, 255, 255, 0.92);
  --text-on-dark-soft:   rgba(255, 255, 255, 0.78);
  --text-on-dark-muted:  rgba(255, 255, 255, 0.50);
  --text-on-dark-faint:  rgba(255, 255, 255, 0.35);

  /* ─── Shape ─── */
  --radius:         10px;
  --radius-btn:     8px;

  /* ─── Effects ─── */
  --shadow:         0 2px 10px 0 rgba(76, 78, 100, 0.22);
  --shadow-card:    0 2px 12px rgba(76, 78, 100, 0.10);
  --shadow-cta:     0 8px 24px -6px rgba(0, 150, 136, 0.50);

  /* ─── Typography ─── */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ─── Layout ─── */
  --nav-height:        64px;
  --nav-height-mobile: 60px;
  --content-max:       1160px;
}