/* ============================================================
 * ISOPI · Design Tokens (Single Source of Truth)
 *
 * Phase 2.8 / ADR 007: Reine Design-Tokens leben hier, getrennt von
 * Bootstrap-Variable-Overrides (die in css/isopi-bootstrap-theme.css
 * verbleiben). So sind Theme-Switches (Background, Font, Density)
 * per einzelner Variable möglich — ohne CSS-Edit.
 *
 * Ladereihenfolge in HTML:
 *   <link href="bootstrap.min.css" rel="stylesheet">
 *   <link href="/css/isopi-tokens.css" rel="stylesheet">     ← VOR Theme
 *   <link href="/css/isopi-bootstrap-theme.css" rel="stylesheet">
 *
 * Theme-Switch-Beispiel:
 *   document.body.style.setProperty('--isopi-bg', '#fff');
 *   document.body.style.setProperty('--isopi-font-display', 'Inter');
 *   document.body.dataset.density = 'compact';
 *
 * Dark-Mode-Hook (CLAUDE.md: aktuell deaktiviert, aber Architektur
 * vorbereitet):
 *   [data-theme="dark"] { --isopi-bg: #1a1814; --isopi-ink: #e8e4da; … }
 * ============================================================ */

:root {
  /* Brand palette */
  --isopi-sand:          #fbf9f3;
  --isopi-sand-light:    #ffffff;
  --isopi-sand-dark:     #eeeae0;
  --isopi-ink:           #141410;
  --isopi-ink-soft:      #3a3a2e;
  --isopi-muted:         #5a5750;
  --isopi-red:           #d60101;
  --isopi-green:         #2d5016;
  --isopi-gold:          #d4a017;   /* Akzent für Favoriten-Stern, Highlights */
  --isopi-border:        rgba(20,20,16,0.16);
  --isopi-border-strong: rgba(20,20,16,0.35);
  --font-brandon:        'Brandon', sans-serif;
  --transition:          0.25s ease;

  /* ==========================================
     Layout system — alignment anchors, scale,
     touch targets (iPhone / iPad / Elo / Desktop)
     ========================================== */

  /* Brand-row anchors — match .navbar-brand structure
     (logo image + gap + divider + gap + app-name).
     Any row that wants to align with the "D" of the
     app-name sets its first column to --brand-text-start
     (minus the row's own gap). */
  --brand-logo-w:        75px;
  --brand-gap:           1rem;
  --brand-divider:       1px;
  --brand-text-start:    calc(var(--brand-logo-w) + var(--brand-gap) + var(--brand-divider) + var(--brand-gap));

  /* Row gap — default horizontal gap between filter
     triggers, buttons in toolbars etc. */
  --col-gap:             0.5rem;

  /* Content width tiers */
  --w-reading:           720px;   /* forms, prose */
  --w-standard:          960px;   /* lists (current default) */
  --w-wide:              1200px;  /* dashboards, tables */

  /* Touch-target minimum — grows on Elo-class touch
     screens (see @media below). */
  --tap-min:             44px;

  /* ==========================================
     Z-Index-Skala — semantische Ebenen für
     overlapping UI. Nur diese Tokens nutzen,
     keine Magic-Numbers im Component-CSS.
     ========================================== */
  --z-sticky:           100;   /* sticky tab bars, sticky table headers */
  --z-dropdown:         1000;  /* native-style dropdown overlay */
  --z-fab:              1050;  /* floating action button */
  --z-modal-backdrop:   1070;  /* modal/sheet backdrop + dialog */
  --z-toast:            1080;  /* toast notifications */
  --z-popover:          1300;  /* custom ISOPI dropdown menu */
}

/* Elo-class touch screens (coarse pointer + wide viewport):
   finger-at-distance use case — bump touch targets + base font. */
@media (pointer: coarse) and (min-width: 1200px) {
  :root {
    --tap-min:  56px;
    font-size:  17px;
  }
}

/* Density-Modi (data-density attribute auf body oder shell-root).
   Phase 2.8 Stub — Implementation folgt wenn Bedarf konkret wird. */
/*
[data-density="kds"]         { … }
[data-density="comfortable"] { … }
[data-density="compact"]     { … }
*/

/* Theme-Slots (vorbereitet, aktuell ungenutzt — siehe ADR 007 §
   Verworfene Alternativen, Dark-Mode bleibt deaktiviert) */
/*
[data-theme="dark"] { … }
*/