/*
 * tokens.css — единственный источник правды для веб-слоя.
 * Значения зеркалят THorizon/Extensions/Color+Hex.swift.
 * Меняете фирменный цвет — меняете здесь один раз.
 */
:root {
  /* Палитра приложения (Color.th*) */
  --accent: #A9750E;          /* thAccent — Deep Amber */
  --accent-soft: #D8A83F;     /* thAccentSoft */
  --accent-wash: rgba(169, 117, 14, 0.10);
  --accent-line: rgba(169, 117, 14, 0.22);

  --bg-top: #FFFFFF;          /* thBackgroundTop */
  --bg-bottom: #EDEBE6;       /* thBackgroundBottom */

  --text-primary: #1C1B18;    /* thPrimaryText */
  --text-secondary: #6E6A61;  /* thSecondaryText */
  --text-tertiary: #97938A;

  --positive: #2F7D4F;        /* thPositive */
  --negative: #B3402E;        /* thNegative */

  --card: rgba(255, 255, 255, 0.85);   /* thCardSurface */
  --card-solid: #FFFFFF;
  --hairline: rgba(28, 27, 24, 0.08);
  --hairline-strong: rgba(28, 27, 24, 0.14);

  /* Геометрия — крупный радиус «жидкого стекла» из GlassCard */
  --radius-card: 28px;
  --radius-inner: 18px;
  --radius-control: 14px;
  --radius-pill: 999px;

  /* Отступы */
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Тени — мягкие и тёплые, как thElevation */
  --shadow-card: 0 8px 28px rgba(28, 27, 24, 0.07);
  --shadow-raised: 0 18px 48px rgba(28, 27, 24, 0.13);
  --shadow-accent: 0 14px 36px rgba(169, 117, 14, 0.28);

  /* Типографика — SF Pro Rounded, как design: .rounded в приложении */
  --font-display: ui-rounded, "SF Pro Rounded", -apple-system, "SF Pro Display",
                  system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, monospace;
}

/* Фон во всю страницу: белый → жемчужный с тёплым свечением сверху справа.
   Повторяет GradientBackground со свечением thAccentSoft. */
.app-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(760px circle at 88% -8%, rgba(216, 168, 63, 0.20), transparent 62%),
    radial-gradient(620px circle at 6% 12%, rgba(169, 117, 14, 0.07), transparent 60%),
    linear-gradient(180deg, var(--bg-top) 0%, #F7F5F1 46%, var(--bg-bottom) 100%);
}