/*
 * TYCETOOLZ Design Tokens v2 — Apple-Anmutung in Dark/Gold
 * Stand 2026-05-14
 *
 * Architektur:
 *   - @layer-Reihenfolge: tokens < components < sections < utilities
 *   - style.css + woocommerce-premium.css bleiben UNLAYERED (höchste Prio, Migration läuft schrittweise)
 *   - Custom-Properties in :root sind ebenfalls unlayered, damit global verfügbar
 *
 * Markenkern: Dark (#0a0a0a) + Gold (#D4A853). Gold strikt nur als Aktion-Akzent.
 * Schutz: Anti-Pattern-Regeln aus docs/senior-designer-rules.md + gelernte-fehler.md respektiert.
 */

@layer tokens, components, sections, utilities;

/*
 * Font-Loading: Inter wird als Variable Font (font-weight: 100–900) via
 * tycetoolz_local_fonts() in functions.php geladen — kein separater
 * Inter-Display-Schnitt nötig. --tc-font-display nutzt also dieselbe
 * Family, nur mit anderen Tracking/Weight-Tokens (siehe components.css).
 */

:root {
  /* === Farben === */
  --tc-color-bg-base: #0a0a0a;
  --tc-color-bg-surface: #111111;
  --tc-color-bg-elevated: #1a1a1a;

  --tc-bg-0: #0a0a0a;
  --tc-bg-1: #111111;
  --tc-bg-2: #161616;

  --tc-color-text-primary: #f0f0f0;
  --tc-color-text-secondary: #888888;
  --tc-color-text-tertiary: #5c5c5c;

  --tc-color-accent: #D4A853;
  --tc-color-accent-hover: #c49740;
  --tc-color-accent-text: #0a0a0a;

  --tc-color-border-subtle: #1f1f1f;
  --tc-color-border: #2a2a2a;
  --tc-color-border-strong: #3a3a3a;

  --tc-color-danger: #e05c5c;
  --tc-color-success: #4caf7d;

  --tc-color-selection: rgba(212, 168, 83, 0.3);

  /* === Spacing (8px-Raster) === */
  --tc-space-1: 8px;
  --tc-space-2: 16px;
  --tc-space-3: 24px;
  --tc-space-4: 32px;
  --tc-space-5: 40px;
  --tc-space-6: 48px;
  --tc-space-8: 64px;
  --tc-space-10: 80px;
  --tc-space-12: 96px;
  --tc-space-16: 128px;
  --tc-space-20: 160px;
  --tc-space-24: 192px;

  --tc-space-section-desktop: 160px;
  --tc-space-section-mobile: 72px;
  --tc-space-hero-desktop: 192px;

  /* === Typografie === */
  --tc-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --tc-font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --tc-type-display: clamp(2.5rem, 5vw + 1rem, 5rem);
  --tc-type-h1: clamp(2rem, 3.5vw + 1rem, 3.5rem);
  --tc-type-h2: clamp(1.5rem, 2vw + 0.5rem, 2.25rem);
  --tc-type-h3: clamp(1.25rem, 1.2vw + 0.5rem, 1.5rem);
  --tc-type-body: 1rem;
  --tc-type-body-large: 1.125rem;
  --tc-type-caption: 0.875rem;
  --tc-type-eyebrow: 0.75rem;

  --tc-leading-display: 1.05;
  --tc-leading-h1: 1.10;
  --tc-leading-h2: 1.20;
  --tc-leading-body: 1.65;
  --tc-leading-tight: 1.30;

  --tc-tracking-display: -0.022em;
  --tc-tracking-h1: -0.022em;
  --tc-tracking-h2: -0.011em;
  --tc-tracking-eyebrow: 0.2em;
  --tc-tracking-body: 0;

  --tc-weight-regular: 400;
  --tc-weight-medium: 500;
  --tc-weight-semibold: 600;
  --tc-weight-bold: 700;

  /* === Easing & Motion === */
  --tc-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --tc-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --tc-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --tc-ease-emphasis: cubic-bezier(0.2, 0, 0, 1);

  --tc-dur-instant: 100ms;
  --tc-dur-fast: 200ms;
  --tc-dur-base: 250ms;
  --tc-dur-slow: 300ms;

  /* === Radii === */
  --tc-radius-sm: 4px;
  --tc-radius-md: 8px;
  --tc-radius-lg: 12px;
  --tc-radius-full: 9999px;

  /* === Schatten (subtil, Apple-konform) === */
  --tc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --tc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);

  /* === Layout-Container === */
  --tc-container-max: 1200px;
  --tc-container-narrow: 800px;
  --tc-content-max: 65ch;

  /* === Z-Index-Hierarchie === */
  --tc-z-sticky-header: 999;
  --tc-z-modal: 1500;
  --tc-z-mobile-cta: 9999;

  /* === Focus-Ring (A11y) === */
  --tc-focus-ring-width: 2px;
  --tc-focus-ring-offset: 3px;
  --tc-focus-ring-color: var(--tc-color-accent);
}

/*
 * ::selection wird bereits in style.css:311 definiert (rgba(212,168,83,0.3) / #fff).
 * Token --tc-color-selection bleibt für Phase 4 (Token-Bereinigung style.css).
 */

/* ===========================================================
 * A11y-Pflicht: prefers-reduced-motion
 * Schaltet alle Animationen ab, lässt aber reveal-Elemente sichtbar.
 * =========================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-tc-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}