/* ════════════════════════════════════════════════════════════════
   tovaglia-design-tokens.css

   Globale Editorial-Design-Sprache für alle UI-Komponenten des
   Plan-Rethinks (Wizard, Context-Bar, Pricing-Modal, Upsell-Modal,
   Post-Publish, Hub-Checklist).

   Kein Reset, kein Layout — NUR Custom-Properties.
   Spec: 2026-04-24-plan-rethink-und-onboarding-design.md Sektion 9.

   In jedes Modul VOR den modul-spezifischen Stylesheets einbinden.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ── Farben ───────────────────────────────────────────────── */
  --t-bordeaux-deep: #1C050D;
  --t-bordeaux: #2B0710;
  --t-bordeaux-up: #3A0010;
  --t-wine: #7A1F2E;
  --t-cream: #F4EBDC;
  --t-cream-soft: #EADFCC;

  /* Akzent: GOLD — der einzige Akzent-Farbton, never italic. */
  --t-gold: #C9A063;
  --t-gold-soft: #B8925A;
  --t-gold-glow: rgba(201, 160, 99, 0.4);

  /* Sekundär: Sage für Success-Momente (Post-Publish-Siegel) */
  --t-sage: #7A9478;

  /* Cream-Stufen für Text auf Bordeaux */
  --t-text: rgba(244, 235, 220, 1.00);
  --t-text-2: rgba(244, 235, 220, 0.75);
  --t-text-3: rgba(244, 235, 220, 0.55);
  --t-text-mute: rgba(244, 235, 220, 0.40);
  --t-text-ghost: rgba(244, 235, 220, 0.25);

  /* Lines & Rules */
  --t-line: rgba(244, 235, 220, 0.08);
  --t-line-strong: rgba(244, 235, 220, 0.14);
  --t-line-gold: rgba(201, 160, 99, 0.30);

  /* ── Typografie ───────────────────────────────────────────── */
  --t-font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --t-font-body: 'Inter Tight', system-ui, -apple-system, sans-serif;

  /* Gewichte */
  --t-w-light: 300;
  --t-w-regular: 400;
  --t-w-medium: 500;
  --t-w-semibold: 600;

  /* Letter-Spacing-Stufen */
  --t-ls-tight: -0.015em;
  --t-ls-snug: -0.005em;
  --t-ls-normal: 0;
  --t-ls-wide: 0.04em;
  --t-ls-wider: 0.18em;
  --t-ls-widest: 0.30em;

  /* ── Marginalia (Modal-Header) ───────────────────────────── */
  --t-marg-num-color: var(--t-gold);
  --t-marg-label-color: var(--t-text-mute);
  --t-marg-divider: linear-gradient(
    90deg,
    rgba(201, 160, 99, 0.5) 0%,
    rgba(201, 160, 99, 0.05) 40%,
    transparent 100%
  );

  /* ── Backgrounds ─────────────────────────────────────────── */
  --t-bg-modal: linear-gradient(
    180deg,
    radial-gradient(ellipse 80% 50% at 10% 0%, rgba(138, 32, 64, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(107, 0, 24, 0.32) 0%, transparent 60%),
    linear-gradient(180deg, var(--t-bordeaux) 0%, var(--t-bordeaux-deep) 100%)
  );
  /* Note: Browser-CSS-Vars unterstützen kein zusammengesetztes background-shorthand
     mit mehreren radial-gradients innerhalb eines linear-gradients. In den Modul-CSS
     wird --t-bg-modal *nicht* direkt verwendet — die Komposition wird dort wiederholt
     (siehe context-bar.css und pricing-modal.css). Diese Variable ist als Doku/Anker.
     Für Single-Layer-Backgrounds nutze die einzelnen --t-bordeaux-* Variablen. */

  /* Grain-Overlay als data-uri SVG (gemeinsame Quelle) */
  --t-grain-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");

  /* ── Spacing-Skala ───────────────────────────────────────── */
  --t-space-1: 4px;
  --t-space-2: 8px;
  --t-space-3: 12px;
  --t-space-4: 16px;
  --t-space-5: 20px;
  --t-space-6: 24px;
  --t-space-8: 32px;
  --t-space-10: 40px;
  --t-space-12: 48px;
  --t-space-16: 64px;

  /* ── Component-Höhen ─────────────────────────────────────── */
  --t-context-bar-height: 44px;
  --t-modal-radius: 2px;          /* editorial → flach, kein Rounded-Card-Look */

  /* ── Easing & Transition ─────────────────────────────────── */
  --t-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --t-trans-fast: 150ms var(--t-ease);
  --t-trans-base: 250ms var(--t-ease);
}

/* Plan-spezifische Token-Aliasse für Plan-Chip-Farben.
   Aligned mit Editor-Stil (css/shared-ui.css .plan-badge--*) — Wein/Bordeaux
   für paid plans statt Gold. Gold bleibt für editorial Hub/Modale (Spec § 9). */
:root[data-plan="free"] {
  --t-plan-color: var(--t-text-2);
  --t-plan-bg: rgba(244, 235, 220, 0.06);
  --t-plan-border: var(--t-line-strong);
  --t-plan-dot: var(--t-text-3);
}
:root[data-plan="pro"],
:root[data-plan="business"] {
  --t-plan-color: var(--t-text);                  /* cream — Lesbarkeit auf Wein-BG */
  --t-plan-bg: rgba(122, 31, 46, 0.20);            /* var(--t-wine) = #7A1F2E */
  --t-plan-border: rgba(122, 31, 46, 0.45);
  --t-plan-dot: var(--t-wine);
}