meezi/web/admin/src/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Meezi brand — see .cursorrules UI QUALITY RULES */
    --meezi-green: 162 76% 25%;
    --meezi-green-tint: 162 52% 92%;
    --meezi-amber: 38 78% 41%;
    --meezi-danger: 0 58% 41%;
    --meezi-info: 210 82% 28%;

    --background: 210 20% 98%;
    --foreground: 222 47% 11%;
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --primary: var(--meezi-green);
    --primary-foreground: 0 0% 100%;
    --secondary: 162 30% 94%;
    --secondary-foreground: 162 76% 20%;
    --muted: 210 25% 96%;
    --muted-foreground: 215 16% 47%;
    --accent: var(--meezi-green-tint);
    --accent-foreground: 162 76% 20%;
    --destructive: var(--meezi-danger);
    --destructive-foreground: 0 0% 100%;
    --border: 214 24% 88%;
    --input: 214 24% 88%;
    --ring: var(--meezi-green);
    --radius: 0.75rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-family: var(--font-vazirmatn), var(--font-inter), system-ui, sans-serif;
  }

  html[lang="en"] body {
    font-family: var(--font-inter), system-ui, sans-serif;
  }

  html[lang="fa"] body,
  html[lang="ar"] body {
    font-family: var(--font-vazirmatn), system-ui, sans-serif;
  }
}

[data-sonner-toaster],
[data-sonner-toast],
[data-sonner-toast] [data-title],
[data-sonner-toast] [data-description],
[data-sonner-toast] [data-button],
[data-sonner-toast] [data-close-button] {
  font-family: var(--font-vazirmatn), system-ui, sans-serif !important;
}

html[lang="en"] [data-sonner-toaster],
html[lang="en"] [data-sonner-toast],
html[lang="en"] [data-sonner-toast] [data-title],
html[lang="en"] [data-sonner-toast] [data-description],
html[lang="en"] [data-sonner-toast] [data-button],
html[lang="en"] [data-sonner-toast] [data-close-button] {
  font-family: var(--font-inter), system-ui, sans-serif !important;
}

/* Per-café theme — panel + menu layout variants (data-* set by applyCafeTheme) */
html[data-panel-style="glass"] .bg-card,
html[data-panel-style="glass"] .theme-preview-sidebar,
html[data-panel-style="glass"] .theme-preview-menu-card {
  background: color-mix(in srgb, hsl(var(--card)) 82%, transparent) !important;
  backdrop-filter: blur(10px);
}

html[data-panel-style="bold"] .bg-card {
  border-width: 2px;
  border-color: hsl(var(--primary) / 0.35);
}

html[data-panel-style="elevated"] .bg-card,
html[data-panel-style="elevated"] .theme-preview-menu-card {
  box-shadow: 0 8px 24px hsl(var(--primary) / 0.12);
}

html[data-panel-style="outline"] .bg-card {
  background: transparent !important;
  border-width: 2px;
}

html[data-panel-style="soft"] .bg-card {
  box-shadow: 0 2px 12px hsl(var(--primary) / 0.08);
}

html[data-menu-style="compact"] .theme-preview-menu-card {
  padding: 0.5rem;
}

html[data-menu-style="grid"] [data-menu-grid="true"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

html[data-menu-style="list"] .theme-preview-menu-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

html[data-density="compact"] {
  --spacing-scale: 0.85;
}

html[data-density="spacious"] {
  --spacing-scale: 1.15;
}

html[data-density="compact"] main {
  padding: 1rem;
}

html[data-density="spacious"] main {
  padding: 2rem;
}

/* QR guest menu — background textures (--qr-bg set inline from café theme) */
[data-qr-texture] {
  background-color: var(--qr-bg, #f5f5f4);
}

[data-qr-texture="none"] {
  background-image: none;
}

[data-qr-texture="paper"] {
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      color-mix(in srgb, var(--qr-bg, #f5f5f4) 88%, #000 12%) 3px,
      color-mix(in srgb, var(--qr-bg, #f5f5f4) 88%, #000 12%) 4px
    ),
    radial-gradient(ellipse 120% 80% at 50% 0%, color-mix(in srgb, var(--qr-bg) 70%, #fff 30%), var(--qr-bg));
}

[data-qr-texture="linen"] {
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 6px,
      color-mix(in srgb, var(--qr-bg) 92%, #000 8%) 6px,
      color-mix(in srgb, var(--qr-bg) 92%, #000 8%) 7px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 6px,
      color-mix(in srgb, var(--qr-bg) 94%, #000 6%) 6px,
      color-mix(in srgb, var(--qr-bg) 94%, #000 6%) 7px
    );
}

[data-qr-texture="dots"] {
  background-image: radial-gradient(
    circle,
    color-mix(in srgb, var(--qr-bg) 75%, #000 25%) 1px,
    transparent 1px
  );
  background-size: 14px 14px;
}

[data-qr-texture="grid"] {
  background-image:
    linear-gradient(color-mix(in srgb, var(--qr-bg) 80%, #000 20%) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--qr-bg) 80%, #000 20%) 1px, transparent 1px);
  background-size: 20px 20px;
}

[data-qr-texture="marble"] {
  background-image:
    radial-gradient(ellipse 70% 50% at 15% 20%, color-mix(in srgb, var(--qr-bg) 55%, #fff 45%), transparent 55%),
    radial-gradient(ellipse 60% 45% at 85% 75%, color-mix(in srgb, var(--qr-bg) 60%, #ddd 40%), transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 50%, color-mix(in srgb, var(--qr-bg) 75%, #eee 25%), transparent 60%);
}

[data-qr-texture="wood"] {
  background-image: repeating-linear-gradient(
    180deg,
    color-mix(in srgb, var(--qr-bg) 85%, #5c4033 15%),
    color-mix(in srgb, var(--qr-bg) 92%, #5c4033 8%) 2px,
    color-mix(in srgb, var(--qr-bg) 78%, #3e2723 22%) 4px,
    color-mix(in srgb, var(--qr-bg) 90%, #5c4033 10%) 6px
  );
  background-size: 100% 8px;
}

[data-qr-texture="warm"] {
  background-image:
    radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--qr-bg) 70%, #d4a574 30%) 0%, transparent 45%),
    radial-gradient(circle at 70% 60%, color-mix(in srgb, var(--qr-bg) 75%, #c9a87c 25%) 0%, transparent 40%),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 8px,
      color-mix(in srgb, var(--qr-bg) 94%, #8b6914 6%) 8px,
      color-mix(in srgb, var(--qr-bg) 94%, #8b6914 6%) 9px
    );
}

/* Texture swatches in settings appearance picker */
.qr-texture-swatch[data-qr-texture] {
  min-height: 2.5rem;
  border-radius: 0.5rem;
  border: 1px solid hsl(var(--border) / 0.8);
}