/* Tragsam Design-Tokens */
:root {
  /* Flächen */
  --tg-bg: #FBF6EE;
  --tg-surface: #FFFDF9;
  --tg-surface-warm: #F6EEE2;
  --tg-deco-sand: #F1E2CF;
  --tg-deco-sage: #DDE8DF;

  /* Linien */
  --tg-line: #EADFCF;
  --tg-line-strong: #D9CBB8;

  /* Text */
  --tg-text: #2B2622;
  --tg-text-2: #4E443B;
  --tg-text-3: #6B5F55;

  /* Akzente / Personen */
  --tg-primary: #B54823;          /* Terrakotta, Person A */
  --tg-primary-hover: #8E3719;
  --tg-person-a: #B54823;
  --tg-person-b: #4F7A6A;         /* Salbei, Person B (Flächen, Balken) */
  --tg-person-b-strong: #3E6556;  /* Salbei mit weißer Schrift / als Text */
  --tg-sage-deep: #2F4A40;
  --tg-planen: #8E6A3E;
  --tg-on-accent: #FFFFFF;

  /* Schrift */
  --tg-font-display: 'Fraunces', Georgia, serif;
  --tg-font-text: 'DM Sans', system-ui, sans-serif;

  /* Radien */
  --tg-radius-pill: 999px;
  --tg-radius-input-app: 16px;
  --tg-radius-card: 20px;
  --tg-radius-card-lg: 24px;
  --tg-radius-card-xl: 32px;
  --tg-radius-chip: 14px;

  /* Größen */
  --tg-control-h: 56px;
  --tg-touch-min: 44px;
  --tg-container: 1160px;
  --tg-gutter: 24px;
  --tg-section-y: 96px;

  /* Schatten */
  --tg-shadow-device: 0 30px 60px -30px rgba(43, 38, 34, 0.45);
  --tg-shadow-fab: 0 12px 24px -10px rgba(181, 72, 35, 0.6);
}