/* Design-Tokens — übernommen aus dem Claude-Design „Smartcard App.dc.html"
   (iOS-26 Liquid Glass, Light Mode, monochrom). */

:root {
  color-scheme: light;

  /* ---- Farbwelt (schwarz-weiß, warmes Off-White) ---- */
  --bg: #F4F4F2;
  --ink: #0D0D0D;
  --sec-30: rgba(60, 60, 67, 0.3);
  --sec-45: rgba(60, 60, 67, 0.45);
  --sec-55: rgba(60, 60, 67, 0.55);
  --sec-60: rgba(60, 60, 67, 0.6);
  --sec-70: rgba(60, 60, 67, 0.7);
  --hairline: rgba(60, 60, 67, 0.12);
  --surface: #FFFFFF;
  --surface-dim: #F0F0EE;
  --surface-pressed: #F7F7F5;
  --toggle-off: rgba(120, 120, 128, 0.28);
  --danger: #C43D3D;

  /* ---- Schatten ---- */
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --sheet-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
  --float-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);

  /* ---- Radien ---- */
  --r-card: 22px;
  --r-panel: 24px;
  --r-sheet: 38px;
  --r-input: 14px;
  --r-seg: 12px;
  --r-tile: 14px;
  --r-pill: 999px;

  /* ---- Motion (aus dem Design) ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-bubble: cubic-bezier(0.22, 2.1, 0.36, 0.85);

  /* ---- Typo ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, Menlo, Monaco, monospace;

  /* ---- Layout ---- */
  --page-pad: 20px;
  --content-max: 640px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tab-clearance: calc(116px + var(--safe-bottom));
  --tap-min: 44px;
}