/* ============================================================================
   DigifyNow Design System  —  TablifyNow App
   Brand language extracted from https://digifynow.de/
   Framework-agnostic, no build step. Loaded globally via base templates.
   ========================================================================== */

/* ---- Fonts ---------------------------------------------------------------- */
/* Space Grotesk (display) + Inter (body) are loaded via <link> in base.html.  */

/* ---- Design tokens -------------------------------------------------------- */
:root {
  /* Brand */
  --dg-primary: 160 100% 19%;          /* #006141 emerald */
  --dg-primary-hover: 160 100% 24%;
  --dg-primary-light: 160 70% 35%;     /* #1b986e */
  --dg-primary-fg: 0 0% 100%;

  /* Surfaces & text (light) */
  --dg-bg: 0 0% 100%;
  --dg-bg-soft: 220 14% 98%;
  --dg-fg: 220 14% 10%;
  --dg-card: 0 0% 100%;
  --dg-muted: 220 14% 94%;
  --dg-muted-fg: 220 10% 45%;
  --dg-border: 220 14% 90%;
  --dg-secondary: 220 14% 96%;
  --dg-destructive: 0 84% 60%;
  --dg-success: 160 84% 39%;
  --dg-ring: 160 100% 19%;

  --dg-radius: 0.75rem;
  --dg-radius-lg: 1.25rem;
  --dg-radius-xl: 2rem;

  /* Gradients */
  --dg-gradient-primary: linear-gradient(135deg, hsl(160 100% 19%) 0%, hsl(160 80% 28%) 100%);
  --dg-gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, hsla(160,100%,19%,.12) 0%, transparent 55%);
  --dg-gradient-light: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(220 14% 98%) 100%);
  --dg-gradient-glass: linear-gradient(135deg, hsla(0,0%,100%,.9) 0%, hsla(220,14%,98%,.7) 100%);

  /* Shadows */
  --dg-shadow-card: 0 4px 24px hsla(220,14%,10%,.08);
  --dg-shadow-lg: 0 10px 40px hsla(220,14%,10%,.10);
  --dg-shadow-glow: 0 0 60px hsla(160,100%,19%,.25);
  --dg-shadow-button: 0 6px 20px hsla(160,100%,19%,.30);

  --dg-font-display: 'Space Grotesk', system-ui, sans-serif;
  --dg-font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

.dg-dark, [data-theme="dark"] {
  --dg-bg: 220 14% 4%;
  --dg-bg-soft: 220 14% 7%;
  --dg-fg: 0 0% 98%;
  --dg-card: 220 14% 7%;
  --dg-muted: 220 14% 15%;
  --dg-muted-fg: 220 10% 60%;
  --dg-border: 220 14% 15%;
  --dg-secondary: 220 14% 12%;
  --dg-primary: 160 100% 24%;
  --dg-gradient-light: linear-gradient(180deg, hsl(220 14% 4%) 0%, hsl(220 14% 7%) 100%);
}

/* ---- Helpers -------------------------------------------------------------- */
.dg-scope { font-family: var(--dg-font-body); color: hsl(var(--dg-fg)); }
.dg-font-display { font-family: var(--dg-font-display); }

/* ---- Buttons -------------------------------------------------------------- */
.dg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--dg-font-body); font-weight: 600; font-size: .95rem;
  padding: .75rem 1.5rem; border-radius: var(--dg-radius);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  line-height: 1;
}
.dg-btn-primary {
  background: var(--dg-gradient-primary); color: hsl(var(--dg-primary-fg));
  box-shadow: var(--dg-shadow-button);
}
.dg-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--dg-shadow-button), var(--dg-shadow-glow); }
.dg-btn-secondary {
  background: hsl(var(--dg-card)); color: hsl(var(--dg-fg)); border-color: hsl(var(--dg-border));
}
.dg-btn-secondary:hover { transform: translateY(-2px); box-shadow: var(--dg-shadow-card); border-color: hsl(var(--dg-primary)); }
.dg-btn-ghost { background: transparent; color: hsl(var(--dg-fg)); }
.dg-btn-ghost:hover { color: hsl(var(--dg-primary)); }
.dg-btn-lg { padding: 1rem 2rem; font-size: 1.05rem; }
.dg-btn-block { width: 100%; }

/* ---- Cards ---------------------------------------------------------------- */
.dg-card {
  background: hsl(var(--dg-card)); border: 1px solid hsl(var(--dg-border));
  border-radius: var(--dg-radius-lg); box-shadow: var(--dg-shadow-card);
  padding: 1.75rem;
}
.dg-card-hover { transition: transform .2s ease, box-shadow .2s ease; }
.dg-card-hover:hover { transform: translateY(-4px); box-shadow: var(--dg-shadow-lg); }

/* ---- Badges / pills ------------------------------------------------------- */
.dg-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: .35rem .75rem; border-radius: 9999px;
  background: hsla(160,100%,19%,.10); color: hsl(var(--dg-primary));
}

/* ---- Sections / layout ---------------------------------------------------- */
.dg-section { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.dg-section-soft { background: var(--dg-gradient-light); }
.dg-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 1.25rem; }
.dg-hero { position: relative; }
.dg-hero::before {
  content: ""; position: absolute; inset: 0; background: var(--dg-gradient-hero);
  pointer-events: none; z-index: 0;
}

/* ---- Typography ----------------------------------------------------------- */
.dg-h1 { font-family: var(--dg-font-display); font-weight: 700; font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -0.02em; }
.dg-h2 { font-family: var(--dg-font-display); font-weight: 700; font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.1; letter-spacing: -0.015em; }
.dg-h3 { font-family: var(--dg-font-display); font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.2; }
.dg-lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: hsl(var(--dg-muted-fg)); line-height: 1.6; }
.dg-gradient-text { background: var(--dg-gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- Decorative ----------------------------------------------------------- */
.dg-blob { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; filter: blur(40px); opacity: .5; }
.dg-glass { background: var(--dg-gradient-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid hsla(0,0%,100%,.4); }

/* ---- Inputs --------------------------------------------------------------- */
.dg-input {
  width: 100%; font-family: var(--dg-font-body); font-size: .95rem;
  padding: .75rem 1rem; border-radius: var(--dg-radius);
  border: 1px solid hsl(var(--dg-border)); background: hsl(var(--dg-card)); color: hsl(var(--dg-fg));
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dg-input:focus { outline: none; border-color: hsl(var(--dg-primary)); box-shadow: 0 0 0 3px hsla(160,100%,19%,.15); }

@media (prefers-reduced-motion: reduce) {
  .dg-btn, .dg-card-hover { transition: none; }
}

/* ---- Dark mode (optional, opt-in via [data-theme="dark"] on <html>) -------- */
[data-theme="dark"] body { background-color: hsl(var(--dg-bg)); color: hsl(var(--dg-fg)); }
[data-theme="dark"] .dg-section-soft { background: var(--dg-gradient-light); }
[data-theme="dark"] .dg-card { background: hsl(var(--dg-card)); border-color: hsl(var(--dg-border)); }
[data-theme="dark"] .dg-glass {
  background: linear-gradient(135deg, hsla(220,14%,10%,.7) 0%, hsla(220,14%,7%,.55) 100%);
  border-color: hsla(0,0%,100%,.08);
}
[data-theme="dark"] .dg-btn-secondary { background: hsl(var(--dg-card)); color: hsl(var(--dg-fg)); border-color: hsl(var(--dg-border)); }
[data-theme="dark"] .dg-input { background: hsl(var(--dg-card)); color: hsl(var(--dg-fg)); border-color: hsl(var(--dg-border)); }
[data-theme="dark"] .dg-badge { background: hsla(160,100%,24%,.18); }
/* smooth theme transition for surfaces/text */
body, .dg-card, .dg-section, .dg-glass, .dg-input, .dg-btn { transition-property: background-color, color, border-color, box-shadow, transform; }

/* ---- Floating dark-mode toggle ------------------------------------------- */
.dg-theme-toggle {
  position: fixed; z-index: 1200; right: 1.1rem; bottom: 1.1rem;
  width: 46px; height: 46px; border-radius: 9999px;
  border: 1px solid hsl(var(--dg-border)); background: hsl(var(--dg-card)); color: hsl(var(--dg-fg));
  box-shadow: var(--dg-shadow-card); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; line-height: 1;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.dg-theme-toggle:hover { transform: translateY(-2px); box-shadow: var(--dg-shadow-lg); color: hsl(var(--dg-primary)); }
.dg-theme-toggle:focus-visible { outline: 2px solid hsl(var(--dg-primary)); outline-offset: 2px; }
.dg-theme-toggle .dg-tt-moon { display: none; }
.dg-theme-toggle .dg-tt-sun  { display: inline; }
[data-theme="dark"] .dg-theme-toggle .dg-tt-sun  { display: none; }
[data-theme="dark"] .dg-theme-toggle .dg-tt-moon { display: inline; }
@media (prefers-reduced-motion: reduce) { .dg-theme-toggle { transition: none; } }