/**
 * Horsequip Calm — Design Tokens (Single Source of Truth)
 *
 * Diese Datei IST die Quelle für alle Calm-Tokens. Jede neue Komponente und
 * jede zukünftige Migration referenziert ausschließlich `--hq-*`-Variablen
 * aus diesem File.
 *
 * Spec: docs/design-language/index.html (Horsequip Calm v3)
 *
 * Wichtig (Calm-Regel ab 2026-05):
 *   - Text ausschließlich in Schwarz, Orange oder Weiß.
 *   - Graustufen sind nur noch für nicht-textuelle Flächen erlaubt
 *     (Borders, Hintergründe, Trennlinien, Hover-Surfaces).
 *   - Brown-Saddle bleibt als Marken-Akzent für Flächen/Icons erhalten,
 *     wird aber nicht mehr als Textfarbe eingesetzt — Akzent-Text = Orange.
 */

:root {
  /* ───────────────────────── Brand / Palette ───────────────────────── */
  --hq-brown-deep:        #4f3e2c;
  --hq-brown-saddle:      #8B4513;
  --hq-brown-sienna:      #A0522D;
  --hq-orange:            #FF9500;
  --hq-orange-alt:        #ff940b;
  --hq-orange-hover:      #E8830A;
  --hq-orange-strong:     #ff6b00;
  --hq-saddle-hover-deep: #7a3e10;
  --hq-slate:             #2c3e50;
  --hq-whatsapp:          #25D366;

  --hq-white:             #ffffff;
  --hq-black:             #000000;

  /* Graustufen — NICHT für Text. Nur für Flächen, Borders, Hover-Surfaces. */
  --hq-gray-50:           #fafafa;
  --hq-gray-100:          #f8f9fa;
  --hq-gray-150:          #f5f0eb;
  --hq-gray-200:          #f0f0f0;
  --hq-gray-300:          #e0e0e0;
  --hq-gray-400:          #cccccc;
  --hq-gray-500:          #999999;
  --hq-gray-600:          #888888;
  --hq-gray-700:          #666666;
  --hq-gray-800:          #555555;
  --hq-gray-900:          #333333;
  --hq-border-legacy:     #dddddd;

  --hq-success-bg:        #d4edda;
  --hq-error-bg:          #f8d7da;
  --hq-warning-bg:        #fff3cd;

  /* ───────────────────────── Text-Tokens ─────────────────────────────
   * Calm 2026-05: Nur noch Schwarz / Orange / Weiß für Textfarben.
   * Komponenten referenzieren ausschließlich --hq-text-*, niemals
   * direkt --hq-gray-* oder --hq-brown-saddle für color: …
   * ----------------------------------------------------------------- */
  --hq-text-default:      var(--hq-black);   /* Standard-Text */
  --hq-text-accent:       var(--hq-orange);  /* Hover, Active, Highlight */
  --hq-text-inverse:      var(--hq-white);   /* Auf dunklem Grund */
  --hq-text-muted:        var(--hq-black);   /* Bewusst kein Grau — Calm 2026 */
  --hq-text-link:         var(--hq-orange);  /* Inhalts-Links */
  --hq-text-link-hover:   var(--hq-orange-hover);

  /* ───────────────────────── Typography ──────────────────────────── */
  --hq-font-primary:      'Roboto', Arial, Helvetica, sans-serif;
  --hq-weight-thin:       100;
  --hq-weight-light:      300;
  --hq-weight-regular:    400;
  --hq-weight-medium:     500;
  --hq-weight-semi:       600;
  --hq-weight-bold:       700;
  --hq-weight-black:      900;

  --hq-size-xs:           0.75rem;
  --hq-size-sm:           0.85rem;
  --hq-size-base:         1rem;
  --hq-size-md:           1.125rem;
  --hq-size-lg:           1.25rem;
  --hq-size-xl:           1.5rem;
  --hq-size-2xl:          2rem;
  --hq-size-3xl:          2.5rem;
  --hq-size-hero:         4rem;

  --hq-leading-tight:     1.1;
  --hq-leading-snug:      1.2;
  --hq-leading-relaxed:   1.6;

  --hq-tracking-tight:    0.08em;
  --hq-tracking-normal:   0.12em;
  --hq-tracking-wide:     0.196em;
  --hq-tracking-wider:    0.25em;
  --hq-tracking-widest:   0.38em;

  /* ───────────────────────── Spacing ─────────────────────────────── */
  --hq-space-2xs:         4px;
  --hq-space-xs:          8px;
  --hq-space-sm:          12px;
  --hq-space-md:          16px;
  --hq-space-lg:          24px;
  --hq-space-xl:          32px;
  --hq-space-2xl:         40px;
  --hq-space-3xl:         60px;
  --hq-space-4xl:         80px;

  /* ───────────────────────── Borders / Shadows ───────────────────── */
  --hq-border-thin:       1px solid var(--hq-gray-300);
  --hq-border-medium:     2px solid var(--hq-gray-900);
  --hq-border-accent:     3px solid var(--hq-orange);

  --hq-shadow-sm:         0 2px 4px rgba(0, 0, 0, 0.1);
  --hq-shadow-md:         0 4px 12px rgba(0, 0, 0, 0.15);
  --hq-shadow-lg:         0 8px 30px rgba(0, 0, 0, 0.2);
  --hq-shadow-xl:         0 12px 40px rgba(0, 0, 0, 0.25);
  --hq-shadow-brand:      0 4px 20px rgba(139, 69, 19, 0.2);

  --hq-overlay-light:     rgba(0, 0, 0, 0.4);
  --hq-overlay-medium:    rgba(0, 0, 0, 0.55);
  --hq-overlay-heavy:     rgba(0, 0, 0, 0.7);
  --hq-overlay-glass:     rgba(255, 255, 255, 0.92);

  /* ───────────────────────── Motion ──────────────────────────────── */
  --hq-ease-fast:         0.2s ease;
  --hq-ease-normal:       0.3s ease;
  --hq-ease-slow:         0.5s ease;
  --hq-ease-hero:         0.6s ease;

  /* ───────────────────────── Layering ────────────────────────────── */
  --hq-z-skip:            999;
  --hq-z-mid:             1000;
  --hq-z-under-header:    9990;
  --hq-z-app-high:        9999;
  --hq-z-header:          10000;
  --hq-z-overlay:         10001;
  --hq-z-modal:           10002;
  --hq-z-admin:           20000;

  /* ───────────────────────── Layout ──────────────────────────────── */
  --hq-max-width:         1200px;
  --hq-header-height:     60px;

  /* ───────────────────────── Section / Akkordeon ─────────────────────
   * Verbindliche Geometrie für ALLE Section-Akkordeons:
   * Startseite, Profil-View, Profil-Edit, Stall, Inserieren,
   * Community-Sektion (Footer).
   *
   * Werte vom 2026-05 mit User abgestimmt:
   *   - Chevron beginnt bei 30 px vom Viewport-Linken
   *   - Title-Text beginnt bei 30 + 20 + 15 = 65 px
   *   - Vertikal: 0 Top-Padding + 50 Bottom-Padding pro Header
   *     → ergibt ~110 px Sektion-Center-to-Center
   *
   * Genutzt von:
   *   - web/themes/custom/horsequip/css/components/section-accordion.css
   *   - web/themes/custom/horsequip/css/style.css (.collapsible-*)
   *   - web/themes/custom/horsequip/css/style.css (.community-*)
   * ----------------------------------------------------------------- */
  --hq-section-padding-x:        30px;   /* Linker/rechter Inset */
  --hq-section-padding-top:      0;      /* Header hat oben kein Padding */
  --hq-section-padding-bottom:   30px;   /* Bottom-Padding des Headers (= vertikaler Sektion-Abstand)
                                            User-Wunsch 2026-05 (Update): kompakter, ~90 px Center-to-Center */
  --hq-section-gap:              15px;   /* Chevron ↔ Title */
  --hq-section-content-pad-x:    30px;   /* Inhalt linker Inset (gleicher X wie Header) */
  --hq-section-content-pad-y:    0;
  --hq-section-content-indent:   65px;   /* = padding-x (30) + chevron (20) + gap (15)  → linksbündig zum Title-Text */

  --hq-section-title-size:       20px;
  --hq-section-title-weight:     var(--hq-weight-light);     /* 300 */
  --hq-section-title-tracking:   var(--hq-tracking-wider);   /* 0.25em — Startseiten-Original */
  --hq-section-title-color:      var(--hq-text-default);     /* schwarz */
  --hq-section-title-color-open: var(--hq-text-accent);      /* orange */

  --hq-section-chevron-size:     20px;
  --hq-section-chevron-color:    var(--hq-text-default);
  --hq-section-chevron-color-open: var(--hq-text-accent);
  --hq-section-chevron-rotate:   90deg;

  /* Top-Abstand der ersten Sektion innerhalb eines Wrappers
     (z. B. erste `.about-us-section` direkt unter dem Profil-Header). */
  --hq-section-first-top:        60px;
}