/* ═══════════════════════════════════════════════════════════════════
   Asal Design System — Tokens
   ═══════════════════════════════════════════════════════════════════
   Source-of-Truth fuer Farben, Schatten, Radius, Typo, Spacing.
   Alle Asal-Apps (asal-hub, crm, paketversand, aufgaben, rundgang)
   sollen diese Tokens verwenden. Aenderungen IMMER hier zuerst —
   dann manuell in alle App-Repos kopieren.

   Einbindung in einer App:
     <link rel="stylesheet" href="/shared-design/tokens.css">
   ODER (in lokaler style.css):
     @import url("/shared-design/tokens.css");

   Stand: 2026-05-03
   ═══════════════════════════════════════════════════════════════════ */

/* ── Inter-Font (gleiche Schrift in allen Apps) ─────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Light-Theme (Default) ──────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:              #fafaf9;
  --bg-raised:       #ffffff;
  --surface:         #ffffff;
  --surface-sunken:  #f4f4f2;
  --border:          #e8e8e6;
  --border-strong:   #d5d5d1;

  /* Ink (Schrift) */
  --ink:    #0b0b0a;
  --ink-2:  #2a2a28;
  --ink-3:  #6b6b67;
  --ink-4:  #9a9a95;

  /* Akzent: Asal-Gruen */
  --accent:        oklch(0.52 0.14 155);
  --accent-hover:  oklch(0.47 0.15 155);
  --accent-tint:   oklch(0.96 0.03 155);
  --accent-fg:     #ffffff;

  /* Status */
  --warn:        oklch(0.55 0.18 25);
  --warn-tint:   oklch(0.96 0.04 25);
  --amber:       oklch(0.65 0.14 75);
  --amber-tint:  oklch(0.96 0.04 75);
  --info:        oklch(0.55 0.11 240);
  --info-tint:   oklch(0.96 0.03 240);

  /* Schatten */
  --shadow-xs: 0 1px 1px rgba(11,11,10,0.04);
  --shadow-sm: 0 1px 2px rgba(11,11,10,0.05), 0 1px 3px rgba(11,11,10,0.04);
  --shadow-md: 0 4px 12px rgba(11,11,10,0.06), 0 2px 4px rgba(11,11,10,0.04);
  --shadow-lg: 0 12px 32px rgba(11,11,10,0.08), 0 4px 12px rgba(11,11,10,0.04);

  /* Radius */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-full: 9999px;

  /* Typografie */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Layout */
  --safe-top:    env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
  --tap:         44px;       /* Standard-Tap-Target */
  --tap-lg:      48px;       /* Lager-Tablet (Paketversand) — bewusst groesser */
  --nav-height:  64px;       /* Hoehe der Bottom-Nav */
  --topbar-h:    56px;       /* Hoehe der App-Topbar */

  /* Container-Breiten + Container-Padding — identisch Paketversand-Override
     + Bootstrap-Container-Default. Werte in rem (16px Base). */
  --container-max-md: 1480px;   /* >=1200px */
  --container-max-lg: 1720px;   /* >=1600px */
  --container-pad-x:  0.75rem;  /* 12px L+R, Bootstrap-Container-Standard */
  --container-pad-y:  1.5rem;   /* 24px T+B, Bootstrap py-4 */

  /* Motion */
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 360ms;
  --ease:   cubic-bezier(0.2, 0, 0, 1);
}

/* ── Dark-Theme ─────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:              #0a0a0b;
  --bg-raised:       #141416;
  --surface:         #141416;
  --surface-sunken:  #0f0f11;
  --border:          #26262a;
  --border-strong:   #36363b;

  --ink:    #fafafa;
  --ink-2:  #e4e4e7;
  --ink-3:  #a1a1aa;
  --ink-4:  #6b6b71;

  --accent:        oklch(0.74 0.16 155);
  --accent-hover:  oklch(0.80 0.15 155);
  --accent-tint:   oklch(0.34 0.09 155 / 0.35);
  --accent-fg:     #0a0a0b;

  --warn:        oklch(0.72 0.17 25);
  --warn-tint:   oklch(0.34 0.09 25 / 0.35);
  --amber:       oklch(0.78 0.15 75);
  --amber-tint:  oklch(0.34 0.09 75 / 0.35);
  --info:        oklch(0.72 0.13 240);
  --info-tint:   oklch(0.34 0.09 240 / 0.35);

  --shadow-xs: 0 1px 1px rgba(0,0,0,0.4);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.65), 0 4px 12px rgba(0,0,0,0.3);
}