/**
 * theme.css — Design-Tokens der App (Gold-Theme, ursprünglich vom iPad-App-Design übernommen)
 * ----------------------------------------------------------------------------------
 * Spiegelt Theme.swift der iPad-App. ALLE Hex-Werte gehören hierher, nicht in die Views.
 * Wird in index.php NACH main.css geladen → :root gewinnt die Kaskade und neutralisiert
 * den alten kollidierenden zweiten :root-Block in main.css (Zeile ~1700).
 *
 * Visual-only. Keine Funktions-/API-Änderung.
 */

/* Vers-Editor-Fonts (Quill): 'Adobe Caslon Pro' für kursive Vers-Texte,
   'Liturgy' für liturgische Symbole (℟ ℣ …, siehe archive-helpers.js).
   Ohne diese @font-face-Regeln rendern die Fonts nicht (Fallback auf Serif). */
@font-face {
  font-family: 'Adobe Caslon Pro';
  src: url('/assets/fonts/AdobeCaslonProItalic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Liturgy';
  src: url('/assets/fonts/liturgy.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand (St. Ignatius: Gold) ----
     Eine Instanz setzt ihre Markenfarbe mit APP_BRAND_COLOR (index.php überschreibt dann ALLE
     Token dieses Blocks, z. B. OLQA-Blau). Die Werte hier sind exakt das bisherige Gold — fest
     eingetragene Gold-Töne im Code verweisen seit 21.09.2026 auf diese Token.
     Nicht dazu: Warnfarben (Amber/Gelb), liturgisches Weihnachts-Gold, Chorfarben (Daten). */
  --brand-rgb:     204 149 0;
  --brand-gold:    #CC9500;             /* Header, primäre Buttons, aktive Nav, Logo-Backing */
  --brand-gold-86: rgb(var(--brand-rgb) / .86); /* Gold meist mit 86% Deckkraft */
  --brand-gold-18: rgb(var(--brand-rgb) / .18); /* Pill-Hintergründe (Rollen-Badge) */
  --brand-gold-12: rgb(var(--brand-rgb) / .12); /* zarte Chips / Jahres-Pille */
  --brand-darker:  #B88600;             /* Hover auf vollen Brand-Knöpfen */
  --brand-dark:    #A88A1F;             /* Brand-Schrift / Hover auf hellem Grund */
  --brand-deep:    #7A5C00;             /* dunkle Schrift auf Cream */
  --brand-mid:     #E0B53D;
  --brand-mid2:    #E2C76A;
  --brand-mid3:    #E6C869;
  --brand-line:    #F0E2B8;             /* zarte Rahmen */
  --brand-soft:    #FBF3DC;             /* helle Flächen */
  --brand-cream:   #FDF6E3;
  --brand-softer:  #FDF9EE;

  /* ---- Text / Akzente ---- */
  --navy:  #1E3A5F;   /* Überschriften, Beträge, Card-Titel */
  --slate: #475569;   /* sekundärer Text, Datums-Labels */

  /* ---- Semantik ---- */
  --blue:      #2563EB;  --blue-bg:   rgba(59,130,246,.10);   /* Service, Approved */
  --green:     #059669;  --green-bg:  rgba(16,185,129,.12);   /* Remaining ≥0, Income, Rehearsal */
  --red:       #DC2626;                                       /* Remaining <0, negativ */
  --amber:     #D97706;  --amber-bg:  rgba(245,158,11,.15);   /* Spent, Outstanding, Extra */
  --amber-text:#92400E;                                       /* Text auf Outstanding-Badge */
  --purple:    #7C3AED;  --purple-bg: rgba(139,92,246,.10);   /* Cantor */

  /* ---- Flächen (iOS grouped backgrounds) ---- */
  --page-bg:   #F2F2F7;          /* Seitenhintergrund */
  --card-bg:   #FFFFFF;          /* Cards */
  --nested-bg: #F7F7FA;          /* verschachtelte Zeilen / Tabellenköpfe */
  --hairline:  rgba(0,0,0,.08);  /* Divider */

  /* ---- Liturgische Farben (Dienste.Farbe → Anzeige, wie Theme.liturgical) ---- */
  --lit-green:  #16A34A;  --lit-green-on:  #ffffff;
  --lit-white:  #E5E7EB;  --lit-white-on:  #000000;   /* white = schwarzer Text */
  --lit-violet: #7C3AED;  --lit-violet-on: #ffffff;
  --lit-red:    #DC2626;  --lit-red-on:    #ffffff;
  --lit-rose:   #EC4899;  --lit-rose-on:   #ffffff;
  --lit-gold:   #CC9500;  --lit-gold-on:   #ffffff;

  /* ---- Typografie (Annäherung an die SF-Pro-Textstyles) ---- */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-title:       20px;  --fw-title:       700;   /* Seitentitel */
  --fs-headline:    17px;  --fw-headline:    600;   /* Card-Titel, Beträge */
  --fs-subheadline: 15px;  --fw-subheadline: 400;   /* normaler Text */
  --fs-caption:     12px;  --fw-caption:     400;   /* Labels, Datum */
  --fs-caption2:    11px;  --fw-caption2:    600;   /* Spaltenköpfe, Card-Labels (UPPERCASE) */

  /* ---- Form (Radien, Abstände) ---- */
  --radius-card:    12px;
  --radius-nested:  10px;
  --radius-chip:    8px;
  --radius-pill:    9999px;
  --radius-logo:    9px;
  --lit-stripe-w:   6px;
  --lit-stripe-r:   3px;
  --pad-content:    16px;
  --gap-row:        10px;
  --gap-grid:       12px;

  /* ============================================================
     REMAP der Legacy --color-* Tokens auf die iPad-Palette,
     damit die bestehende Shell + alle var(--color-*)-Nutzungen
     ohne Einzel-Edit auf das neue Design umschwenken.
     ============================================================ */
  --color-primary:        #1E3A5F;            /* navy */
  --color-primary-light:  #2d5a87;
  --color-primary-dark:   #152a45;
  --color-primary-rgb:    30, 58, 95;

  --color-accent:         var(--brand-gold);  /* iPad-Gold (bzw. Markenfarbe der Instanz) */
  --color-accent-light:   var(--brand-mid);
  --color-accent-dark:    var(--brand-dark);

  --color-bg:           #F2F2F7;              /* page-bg */
  --color-bg-elevated:  #FFFFFF;              /* card */
  --color-bg-subtle:    #F7F7FA;             /* nested */
  --color-bg-hover:     rgb(var(--brand-rgb) / .06);
  --color-bg-active:    rgb(var(--brand-rgb) / .12);

  --color-border:        rgba(0,0,0,.08);     /* hairline */
  --color-border-light:  rgba(0,0,0,.05);
  --color-border-focus:  var(--brand-gold);

  --color-text:           #1E293B;
  --color-text-secondary: #475569;            /* slate */
  --color-text-muted:     #94A3B8;
  --color-text-inverse:   #FFFFFF;

  --color-success: #059669;  --color-success-bg: rgba(16,185,129,.12);
  --color-error:   #DC2626;  --color-error-bg:   rgba(220,38,38,.10);
  --color-warning: #D97706;  --color-warning-bg: rgba(245,158,11,.15);
  --color-info:    #2563EB;  --color-info-bg:    rgba(59,130,246,.10);

  /* Props aus dem alten zweiten :root (main.css ~1700) — hier neutralisiert */
  --color-bg-soft:   #F7F7FA;
  --color-bg-card:   #FFFFFF;
  --color-text-soft: #6B7280;
  --color-input-bg:  #FFFFFF;

  /* Card-Radius an iPad angleichen (12px statt 14px) */
  --radius-lg: 12px;
}

/* Default-Seitenhintergrund auf das iOS-Grouped-Grau ziehen */
body { background: var(--page-bg); }