/* ──────────────────────────────────────────────────────────────────────────
   Perks design tokens — copied verbatim from the reference dashboard
   (Perks/artifacts/retailer-dashboard/src/index.css). Do not "tidy" these
   values: they are the source of truth for the portal's colour, radius,
   shadow and type scale.
   ────────────────────────────────────────────────────────────────────────── */

/* Brand name styling — mirrors the purple gradient in the Perks are Good logo */
.brand-perks {
  background: linear-gradient(135deg, #4B28C4 0%, #7040E0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* LIGHT MODE */
:root {
  --button-outline: rgba(0, 0, 0, 0.1);
  --badge-outline: rgba(0, 0, 0, 0.05);

  --opaque-button-border-intensity: -8;

  --elevate-1: rgba(0, 0, 0, 0.03);
  --elevate-2: rgba(0, 0, 0, 0.08);

  /* Calm, confident command center for cashback/retail */
  --background: 180 15% 98%;
  --foreground: 215 30% 15%;

  --border: 210 20% 90%;

  --card: 0 0% 100%;
  --card-foreground: 215 30% 15%;
  --card-border: 210 20% 92%;

  --sidebar: 215 30% 12%;
  --sidebar-foreground: 210 20% 96%;
  --sidebar-border: 215 30% 15%;
  --sidebar-primary: 165 75% 45%;
  --sidebar-primary-foreground: 215 30% 12%;
  --sidebar-accent: 215 25% 20%;
  --sidebar-accent-foreground: 210 20% 98%;
  --sidebar-ring: 165 75% 45%;

  --popover: 0 0% 100%;
  --popover-foreground: 215 30% 15%;
  --popover-border: 210 20% 90%;

  /* Deep crisp teal for primary */
  --primary: 165 80% 30%;
  --primary-foreground: 0 0% 100%;

  --secondary: 215 20% 94%;
  --secondary-foreground: 215 30% 15%;

  --muted: 215 20% 94%;
  --muted-foreground: 215 15% 45%;

  /* Amber/Gold for cashback accents */
  --accent: 40 90% 55%;
  --accent-foreground: 215 30% 15%;

  --destructive: 0 70% 50%;
  --destructive-foreground: 0 0% 100%;

  --input: 210 20% 86%;
  --ring: 165 80% 30%;

  --chart-1: 165 80% 35%;
  --chart-2: 215 40% 40%;
  --chart-3: 40 90% 50%;
  --chart-4: 280 60% 55%;
  --chart-5: 340 50% 55%;

  --app-font-sans: 'Plus Jakarta Sans', sans-serif;
  --app-font-serif: Georgia, serif;
  --app-font-mono: 'Spline Sans Mono', monospace;

  --radius: 0.5rem;

  --shadow-2xs: 0px 2px 0px 0px hsl(210 20% 90% / 0.5);
  --shadow-xs: 0px 2px 0px 0px hsl(210 20% 90% / 0.5);
  --shadow-sm: 0px 2px 0px 0px hsl(210 20% 90% / 0.5), 0px 1px 2px -1px hsl(210 20% 90% / 0.5);
  --shadow: 0px 2px 0px 0px hsl(210 20% 90% / 0.5), 0px 1px 2px -1px hsl(210 20% 90% / 0.5);
  --shadow-md: 0px 2px 0px 0px hsl(210 20% 90% / 0.5), 0px 2px 4px -1px hsl(210 20% 90% / 0.5);
  --shadow-lg: 0px 2px 0px 0px hsl(210 20% 90% / 0.5), 0px 4px 6px -1px hsl(210 20% 90% / 0.5);
  --shadow-xl: 0px 2px 0px 0px hsl(210 20% 90% / 0.5), 0px 8px 10px -1px hsl(210 20% 90% / 0.5);
  --shadow-2xl: 0px 2px 0px 0px hsl(210 20% 90% / 0.5);

  --tracking-normal: -0.01em;
  --spacing: 0.25rem;
}

.dark {
  --button-outline: rgba(255, 255, 255, 0.1);
  --badge-outline: rgba(255, 255, 255, 0.05);
  --opaque-button-border-intensity: 9;
  --elevate-1: rgba(255, 255, 255, 0.04);
  --elevate-2: rgba(255, 255, 255, 0.09);

  --background: 215 30% 10%;
  --foreground: 210 20% 96%;
  --border: 215 25% 20%;
  --card: 215 30% 12%;
  --card-foreground: 210 20% 96%;
  --card-border: 215 25% 18%;
  --sidebar: 215 30% 8%;
  --sidebar-foreground: 210 20% 96%;
  --sidebar-border: 215 30% 12%;
  --sidebar-primary: 165 75% 45%;
  --sidebar-primary-foreground: 215 30% 12%;
  --sidebar-accent: 215 25% 15%;
  --sidebar-accent-foreground: 210 20% 98%;
  --sidebar-ring: 165 75% 45%;
  --popover: 215 30% 12%;
  --popover-foreground: 210 20% 96%;
  --popover-border: 215 25% 20%;
  --primary: 165 70% 40%;
  --primary-foreground: 215 30% 10%;
  --secondary: 215 25% 20%;
  --secondary-foreground: 210 20% 96%;
  --muted: 215 25% 20%;
  --muted-foreground: 215 15% 65%;
  --accent: 40 90% 50%;
  --accent-foreground: 215 30% 10%;
  --destructive: 0 60% 50%;
  --destructive-foreground: 0 0% 100%;
  --input: 215 25% 22%;
  --ring: 165 70% 40%;
  --chart-1: 165 70% 45%;
  --chart-2: 215 40% 50%;
  --chart-3: 40 90% 60%;
  --chart-4: 280 60% 65%;
  --chart-5: 340 50% 65%;

  --shadow-2xs: 0px 2px 0px 0px hsl(0 0% 0% / 0.5);
  --shadow-xs: 0px 2px 0px 0px hsl(0 0% 0% / 0.5);
  --shadow-sm: 0px 2px 0px 0px hsl(0 0% 0% / 0.5), 0px 1px 2px -1px hsl(0 0% 0% / 0.5);
  --shadow: 0px 2px 0px 0px hsl(0 0% 0% / 0.5), 0px 1px 2px -1px hsl(0 0% 0% / 0.5);
  --shadow-md: 0px 2px 0px 0px hsl(0 0% 0% / 0.5), 0px 2px 4px -1px hsl(0 0% 0% / 0.5);
  --shadow-lg: 0px 2px 0px 0px hsl(0 0% 0% / 0.5), 0px 4px 6px -1px hsl(0 0% 0% / 0.5);
  --shadow-xl: 0px 2px 0px 0px hsl(0 0% 0% / 0.5), 0px 8px 10px -1px hsl(0 0% 0% / 0.5);
  --shadow-2xl: 0px 2px 0px 0px hsl(0 0% 0% / 0.5);
}

/* base layer equivalents */
* {
  border-color: hsl(var(--border));
}

body {
  font-family: var(--app-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* utilities layer — copied from the reference */
input[type='search']::-webkit-search-cancel-button {
  display: none;
}

[contenteditable][data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: hsl(var(--muted-foreground));
  pointer-events: none;
}

.toggle-elevate::before,
.toggle-elevate-2::before {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0px;
  border-radius: inherit;
  z-index: -1;
}
.toggle-elevate.toggle-elevated::before {
  background-color: var(--elevate-2);
}
.border.toggle-elevate::before {
  inset: -1px;
}
.hover-elevate:not(.no-default-hover-elevate),
.active-elevate:not(.no-default-active-elevate),
.hover-elevate-2:not(.no-default-hover-elevate),
.active-elevate-2:not(.no-default-active-elevate) {
  position: relative;
  z-index: 0;
}
.hover-elevate:not(.no-default-hover-elevate)::after,
.active-elevate:not(.no-default-active-elevate)::after,
.hover-elevate-2:not(.no-default-hover-elevate)::after,
.active-elevate-2:not(.no-default-active-elevate)::after {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0px;
  border-radius: inherit;
  z-index: 999;
}
.hover-elevate:hover:not(.no-default-hover-elevate)::after,
.active-elevate:active:not(.no-default-active-elevate)::after {
  background-color: var(--elevate-1);
}
.hover-elevate-2:hover:not(.no-default-hover-elevate)::after,
.active-elevate-2:active:not(.no-default-active-elevate)::after {
  background-color: var(--elevate-2);
}
.border.hover-elevate:not(.no-hover-interaction-elevate)::after,
.border.active-elevate:not(.no-active-interaction-elevate)::after,
.border.hover-elevate-2:not(.no-hover-interaction-elevate)::after,
.border.active-elevate-2:not(.no-active-interaction-elevate)::after {
  inset: -1px;
}

/* Page-enter animation used by every screen (animate-in fade-in slide-in-from-bottom-4) */
@keyframes perks-enter {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: none; }
}
.animate-page-enter {
  animation: perks-enter 500ms cubic-bezier(0.4, 0, 0.2, 1) both;
}