/* (c) 2024-2026 ASSISTUK Lars Tiedemann. All Rights Reserved.
   =========================================================================
   dp-tokens.css — central design tokens for DigitalPainters (2026-05-19).

   ONE place for every visual constant. Every other component (gallery,
   confirm, share, hubs, mal-apps) reads from these CSS variables.
   Override at :root for a different theme without touching component CSS.

   Sizing strategy:
     The base unit is `--dp-tile-h` = "height of one row in a 10×6 grid"
     ≈ (100vh − footer − 2×gutter) / 6. Everything else is a multiplier
     of that, so font + icon + padding all scale together when the
     viewport changes OR when the user picks 8×5 / 6×4 grid in Settings.

     Anything labelled "*-px" is the clamped, ready-to-use pixel value.
   ========================================================================= */

:root {
  /* ---- 0. Geometry: one tile cell ------------------------------------- */
  --dp-grid-cols: 10;
  --dp-grid-rows: 6;
  --dp-footer-height: 32px;
  --dp-tile-h: calc((100dvh - var(--dp-footer-height) - 12px) / var(--dp-grid-rows));
  --dp-tile-w: calc((100vw - 12px) / var(--dp-grid-cols));
  /* Fallback for browsers without dvh — falls back to vh-1lh approximation */
  @supports not (height: 1dvh) {
    --dp-tile-h: calc((100vh - var(--dp-footer-height) - 12px) / var(--dp-grid-rows));
  }

  /* ---- 1. Spacing ------------------------------------------------------ */
  --dp-gap:        clamp(3px, 0.7vw, 8px);
  --dp-padding:    clamp(4px, 0.9vw, 12px);
  --dp-radius:     clamp(10px, 1.4vw, 18px);
  --dp-radius-sm:  clamp(6px, 0.8vw, 12px);
  --dp-radius-lg:  clamp(14px, 1.8vw, 24px);

  /* ---- 2. Typography (proportional to tile height) -------------------- */
  /* Main button label — visible in every tile */
  --dp-tile-label-size: clamp(13px, calc(var(--dp-tile-h) * 0.18), 30px);
  /* Title bar text — e.g. "Einstellungen", "Teilen", "Galerie" */
  --dp-title-size:      clamp(18px, calc(var(--dp-tile-h) * 0.30), 44px);
  /* Sub-label / description under main label */
  --dp-tile-desc-size:  clamp(11px, calc(var(--dp-tile-h) * 0.12), 20px);
  /* Body text inside content areas */
  --dp-body-size:       clamp(13px, calc(var(--dp-tile-h) * 0.14), 22px);
  /* Footer (the global legal footer) */
  --dp-footer-size:     clamp(10px, 1.1vw, 13px);

  /* ---- 3. Icon / image sizes inside tiles ----------------------------- */
  /* Square icon at the center of a tile (Lucide SVGs, app emojis, …) */
  --dp-tile-icon-size:  clamp(32px, calc(var(--dp-tile-h) * 0.42), 96px);
  /* Smaller toolbar icons (e.g. flag in lang-tile, X in close-tile) */
  --dp-tile-icon-sm:    clamp(20px, calc(var(--dp-tile-h) * 0.26), 56px);
  /* Logo / preview image — fills more of the tile */
  --dp-tile-img-max:    85%;

  /* ---- 4. Colors — semantic ------------------------------------------- */
  --dp-bg:              #0a0a1a;
  --dp-bg-card:         linear-gradient(135deg, #1a1a2e, #2a2a45);
  --dp-bg-overlay:      #0a0a14;
  --dp-text:            #ffffff;
  --dp-text-dim:        rgba(255, 255, 255, 0.70);
  --dp-text-muted:      rgba(255, 255, 255, 0.45);
  --dp-border:          rgba(255, 255, 255, 0.10);
  --dp-border-strong:   rgba(255, 255, 255, 0.25);

  /* Accent palette */
  --dp-accent:          #0a84ff;          /* primary blue */
  --dp-accent-pink:     #ff6b9d;
  --dp-accent-violet:   #c44dff;
  --dp-accent-cyan:     #6ec6ff;
  --dp-accent-gold:     #ffd700;          /* canonical title color */
  --dp-accent-gold-soft:#f6c84c;
  --dp-ok:              #4caf50;
  --dp-cancel:          #f44336;
  --dp-warn:            #ff9800;

  /* ---- 5. Semantic role colors --------------------------------------- */
  /* Titles ALWAYS use this (Galerie main + Settings + all overlays). */
  --dp-title-color:     var(--dp-accent-gold);
  /* Tile-state colors */
  --dp-tile-bg:         var(--dp-bg-card);
  --dp-tile-border:     var(--dp-border);
  --dp-tile-text:       var(--dp-text);
  --dp-tile-text-dim:   var(--dp-text-muted);
  --dp-tile-active-border: var(--dp-accent);
  --dp-tile-active-glow:   rgba(10,132,255,0.22);

  /* ---- 6. Z-index lanes ---------------------------------------------- */
  --dp-z-footer:        50;
  --dp-z-toolbar:       100;
  --dp-z-overlay-base:  9000;
  --dp-z-overlay-modal: 49000;
  --dp-z-overlay-top:   99000;
  --dp-z-dwell-dot:     2147483640;

  /* ---- 7. Typography family + weights (Phase A, 2026-05-19) ---------- */
  --dp-font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont,
                    'Helvetica Neue', Arial, sans-serif;
  --dp-font-mono:   'SF Mono', Consolas, Monaco, 'Courier New', monospace;
  --dp-font-weight-normal: 400;
  --dp-font-weight-medium: 600;
  --dp-font-weight-bold:   700;

  /* ---- 8. Motion / Transitions -------------------------------------- */
  --dp-transition-fast:    0.12s;
  --dp-transition-default: 0.20s;
  --dp-transition-slow:    0.40s;
  --dp-ease:               cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- 9. Shadows ---------------------------------------------------- */
  --dp-shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.30);
  --dp-shadow:       0 4px 14px rgba(0, 0, 0, 0.40);
  --dp-shadow-lg:    0 8px 40px rgba(0, 0, 0, 0.50);
  --dp-shadow-glow:  0 0 12px var(--dp-tile-active-glow);

  /* ---- 10. A11y ----------------------------------------------------- */
  --dp-focus-ring:        3px solid var(--dp-accent-gold);
  --dp-focus-ring-offset: 2px;
  --dp-min-touch-target:  44px;  /* WCAG 2.5.5 */

  /* ---- 11. Branding (replaceable URLs) ------------------------------ */
  --dp-logo-url:         url('/assets/assistuk-logo.png');
  --dp-logo-url-small:   url('/assets/icons/icon-192x192.png');
  --dp-favicon-url:      url('/assets/icons/icon-192x192.png');

  /* ---- 12. Cursor styles -------------------------------------------- */
  --dp-cursor:        auto;
  --dp-cursor-button: pointer;

  /* ---- 13. Backdrop blur intensity ---------------------------------- */
  --dp-backdrop-blur: blur(8px);
}

/* ===================================================================== */
/* Apply font-family globally (every component uses it unless overridden) */
/* ===================================================================== */
html, body, button, input, textarea, select {
  font-family: var(--dp-font-family);
}
button {
  cursor: var(--dp-cursor-button);
}
/* Accessibility: visible focus ring on every interactive element */
button:focus-visible,
a:focus-visible,
input:focus-visible,
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible {
  outline: var(--dp-focus-ring);
  outline-offset: var(--dp-focus-ring-offset);
}

/* =============================================================
   GLOBAL DEFAULTS — opt-in via element-class.
   These apply when a component DOESN'T have its own override.
   ============================================================= */

/* Title bar — gold everywhere */
.dp-title,
.g-settings-title,
.dp-confirm-title,
.dp-select-title,
.lang-title,
.mu-title-tile,
.dpw-tile-title {
  color: var(--dp-title-color) !important;
  background: transparent !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: var(--dp-title-color) !important;
  background-clip: initial !important;
  font-size: var(--dp-title-size);
  font-weight: 700;
}

/* Default tile sizing — components that want this opt in via .dp-tile */
.dp-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.6vh, 8px);
  padding: var(--dp-padding);
  background: var(--dp-tile-bg);
  border: 2px solid var(--dp-tile-border);
  border-radius: var(--dp-radius);
  color: var(--dp-tile-text);
  font-family: inherit;
  font-size: var(--dp-tile-label-size);
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}
.dp-tile:hover  { transform: scale(1.03); box-shadow: 0 4px 14px rgba(0,0,0,0.4); }
.dp-tile.active { border-color: var(--dp-tile-active-border); box-shadow: 0 0 12px var(--dp-tile-active-glow); }

.dp-tile .dp-tile-icon,
.dp-tile svg.dp-tile-icon,
.dp-tile .dp-tile-icon svg {
  width:  var(--dp-tile-icon-size);
  height: var(--dp-tile-icon-size);
  flex-shrink: 0;
  display: block;
}
.dp-tile .dp-tile-label  { font-size: var(--dp-tile-label-size); line-height: 1.15; text-align: center; }
.dp-tile .dp-tile-desc   { font-size: var(--dp-tile-desc-size);  line-height: 1.15; text-align: center; color: var(--dp-tile-text-dim); }