/* Generated by @decantr/cli */
@layer tokens {
:root {
  --d-primary: #FF4D6D;
  --d-secondary: #8B5CF6;
  --d-accent: #FFB199;
  --d-secondary-hover: #7C3AED;
  --d-accent-hover: #FF9777;
  --d-match: #8B5CF6;
  --d-like: #FF4D6D;
  --d-pass: #94A3B8;
  --d-super-like: #FACC15;
  --d-bg: #FFFBFA;
  --d-surface: #FFFFFF;
  --d-surface-raised: #FFF0EA;
  --d-border: #FAD9CE;
  --d-text: #1A0F12;
  --d-text-muted: #7A5560;
  --d-fg: var(--d-text);
  --d-foreground: var(--d-text);
  --d-fg-muted: var(--d-text-muted);
  --d-background: var(--d-bg);
  --d-muted: var(--d-surface-raised);
  --d-bg-surface: var(--d-surface);
  --d-bg-muted: var(--d-surface-raised);
  --d-border-subtle: var(--d-border);
  --d-border-muted: var(--d-border);
  --d-primary-hover: #E63B5C;
  --d-gap-1: 0.25rem;
  --d-gap-2: 0.5rem;
  --d-gap-3: 0.75rem;
  --d-gap-4: 1rem;
  --d-gap-6: 1.5rem;
  --d-gap-8: 2rem;
  --d-gap-12: 3rem;
  --d-radius: 0.5rem;
  --d-radius-sm: 0.25rem;
  --d-radius-lg: 0.75rem;
  --d-radius-xl: 1rem;
  --d-radius-full: 9999px;
  --d-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --d-shadow: 0 1px 3px rgba(0,0,0,0.1);
  --d-shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --d-shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
  --d-elevation-0: none;
  --d-elevation-1: 0 1px 2px rgba(0,0,0,0.06);
  --d-elevation-2: 0 2px 4px rgba(0,0,0,0.08);
  --d-elevation-3: 0 4px 12px rgba(0,0,0,0.10);
  --d-elevation-4: 0 8px 24px rgba(0,0,0,0.14);
  --d-elevation-5: 0 16px 48px rgba(0,0,0,0.18);
  --d-success: #10B981;
  --d-error: #EF4444;
  --d-warning: #F59E0B;
  --d-info: #3b82f6;
  --d-danger: var(--d-error);
  --d-destructive: var(--d-error);
  --d-motion-instant: 80ms;
  --d-motion-fast: 160ms;
  --d-motion-base: 240ms;
  --d-motion-slow: 360ms;
  --d-motion-slower: 560ms;
  --d-motion-stagger: 60ms;
  --d-motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --d-motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --d-motion-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --d-motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-duration-hover: 180ms;
  --d-duration-entrance: 420ms;
  --d-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-accent-glow: color-mix(in srgb, var(--d-accent) 24%, transparent);
  --d-font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --d-font-display: 'Cabinet Grotesk', 'Plus Jakarta Sans', 'Inter', ui-sans-serif, sans-serif;
  --d-font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --d-weight-regular: 400;
  --d-weight-medium: 500;
  --d-weight-semibold: 600;
  --d-weight-bold: 700;
  --d-tracking-tight: -0.02em;
  --d-tracking-normal: 0;
  --d-tracking-wide: 0.04em;
  --d-tracking-wider: 0.08em;
  --d-leading-tight: 1.1;
  --d-leading-snug: 1.25;
  --d-leading-normal: 1.5;
  --d-leading-relaxed: 1.625;
  --d-text-xs: 0.75rem;
  --d-text-sm: 0.875rem;
  --d-text-base: 1rem;
  --d-text-lg: 1.125rem;
  --d-text-xl: 1.25rem;
  --d-text-2xl: 1.5rem;
  --d-text-3xl: 1.875rem;
  --d-text-4xl: 2.25rem;
  --d-text-5xl: 3rem;
  --d-text-6xl: 4rem;
  --d-section-py: 1.5rem;
  --d-interactive-py: 0.5rem;
  --d-interactive-px: 1rem;
  --d-surface-p: 1.25rem;
  --d-data-py: 0.625rem;
  --d-control-py: 0.5rem;
  --d-content-gap: 1.25rem;
  --d-label-mb: 0.75rem;
  --d-label-px: 0.75rem;
  --d-section-gap: 1.5rem;
  --d-annotation-mt: 0.5rem;
}

/*
 * Theme-toggle variant. Blueprint declared the `theme-toggle` feature,
 * so the user-facing toggle sets `data-mode` on <html>. Apply the
 * opposite mode's palette when that attribute is set.
 */
:root[data-mode="dark"],
[data-mode="dark"] {
    --d-secondary-hover: #B8A0FB;
    --d-accent-hover: #FFD3C2;
    --d-match: #A78BFA;
    --d-like: #FF7A8A;
    --d-pass: #64748B;
    --d-super-like: #FDE047;
    --d-bg: #1F0E14;
    --d-surface: #2A1620;
    --d-surface-raised: #3A1F2C;
    --d-border: #4D2937;
    --d-text: #FFF3EE;
    --d-text-muted: #C9A8B3;
    --d-primary-hover: #FF93A2;
    --d-shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
    --d-shadow: 0 1px 3px rgba(0,0,0,0.25);
    --d-shadow-md: 0 4px 6px rgba(0,0,0,0.3);
    --d-shadow-lg: 0 10px 15px rgba(0,0,0,0.4);
    --d-elevation-1: 0 1px 2px rgba(0,0,0,0.3);
    --d-elevation-2: 0 2px 4px rgba(0,0,0,0.4);
    --d-elevation-3: 0 4px 12px rgba(0,0,0,0.5);
    --d-elevation-4: 0 8px 24px rgba(0,0,0,0.55);
    --d-elevation-5: 0 16px 48px rgba(0,0,0,0.6);
}
}
