@custom-variant dark (&:is(.dark *));

@theme inline {
    --font-sans: Instrument Sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

    --radius-lg: var(--radius);
    --radius-md: calc(var(--radius) - 2px);
    --radius-sm: calc(var(--radius) - 4px);

    --color-background: var(--background);
    --color-foreground: var(--foreground);

    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);

    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);

    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);

    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);

    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);

    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);

    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);

    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);

    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);

    --color-sidebar: var(--sidebar-background);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);
    
    
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }
}

@layer utilities {
    body,
    html {
        --font-sans:
            'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    }

    /* Louise Carmen Background Colors */
    .bg-lc-naturel { background-color: var(--lc-naturel); }
    .bg-lc-whisky { background-color: var(--lc-whisky); }
    .bg-lc-camarguais { background-color: var(--lc-camarguais); }
    .bg-lc-plum { background-color: var(--lc-plum); }
    .bg-lc-red { background-color: var(--lc-red); }
    .bg-lc-fuchsia { background-color: var(--lc-fuchsia); }
    .bg-lc-orange { background-color: var(--lc-orange); }
    .bg-lc-saffron { background-color: var(--lc-saffron); }
    .bg-lc-primavera { background-color: var(--lc-primavera); }
    .bg-lc-military { background-color: var(--lc-military); }
    .bg-lc-green { background-color: var(--lc-green); }
    .bg-lc-turquoise { background-color: var(--lc-turquoise); }
    .bg-lc-azul { background-color: var(--lc-azul); }
    .bg-lc-marine { background-color: var(--lc-marine); }
    .bg-lc-black { background-color: var(--lc-black); }
    .bg-lc-vert { background-color: var(--lc-vert); }
    
    /* Louise Carmen Text Colors */
    .text-lc-naturel { color: var(--lc-naturel); }
    .text-lc-whisky { color: var(--lc-whisky); }
    .text-lc-camarguais { color: var(--lc-camarguais); }
    .text-lc-plum { color: var(--lc-plum); }
    .text-lc-red { color: var(--lc-red); }
    .text-lc-fuchsia { color: var(--lc-fuchsia); }
    .text-lc-orange { color: var(--lc-orange); }
    .text-lc-saffron { color: var(--lc-saffron); }
    .text-lc-primavera { color: var(--lc-primavera); }
    .text-lc-military { color: var(--lc-military); }
    .text-lc-green { color: var(--lc-green); }
    .text-lc-turquoise { color: var(--lc-turquoise); }
    .text-lc-azul { color: var(--lc-azul); }
    .text-lc-marine { color: var(--lc-marine); }
    .text-lc-black { color: var(--lc-black); }
    .text-lc-vert { color: var(--lc-vert); }

    /* Louise Carmen Engraving Text Colors */
    .text-lce-gold { color: var(--lce-gold); }
    .text-lce-silver { color: var(--lce-silver); }
    .text-lce-neutral { color: var(--lce-neutral); }
    .text-lce-rouge { color: var(--lce-rouge); }
    .text-lce-blue { color: var(--lce-blue); }
    .text-lce-green { color: var(--lce-green); }
    .text-lce-black { color: var(--lce-black); }
    .text-lce-vert { color: var(--lce-vert); }

    /* Louise Carmen Engraving Background Colors */
    .bg-lce-gold { background-color: var(--lce-gold); }
    .bg-lce-silver { background-color: var(--lce-silver); }
    .bg-lce-neutral { background-color: var(--lce-neutral); }
    .bg-lce-rouge { background-color: var(--lce-rouge); }
    .bg-lce-blue { background-color: var(--lce-blue); }
    .bg-lce-green { background-color: var(--lce-green); }
    .bg-lce-black { background-color: var(--lce-black); }
    .bg-lce-vert { background-color: var(--lce-vert); }

    /* Font Classes */
    .font-dots { 
        font-family: 'Doto', sans-serif; 
        font-weight: 400; 
    }
}

:root {
    --background: hsl(0 0% 100%);
    --foreground: hsl(0 0% 3.9%);
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(0 0% 3.9%);
    --popover: hsl(0 0% 100%);
    --popover-foreground: hsl(0 0% 3.9%);
    --primary: hsl(0 0% 9%);
    --primary-foreground: hsl(0 0% 98%);
    --secondary: hsl(0 0% 92.1%);
    --secondary-foreground: hsl(0 0% 9%);
    --muted: hsl(0 0% 96.1%);
    --muted-foreground: hsl(0 0% 45.1%);
    --accent: hsl(0 0% 96.1%);
    --accent-foreground: hsl(0 0% 9%);
    --destructive: hsl(0 84.2% 60.2%);
    --destructive-foreground: hsl(0 0% 98%);
    --border: hsl(0 0% 92.8%);
    --input: hsl(0 0% 89.8%);
    --ring: hsl(0 0% 3.9%);
    --chart-1: hsl(12 76% 61%);
    --chart-2: hsl(173 58% 39%);
    --chart-3: hsl(197 37% 24%);
    --chart-4: hsl(43 74% 66%);
    --chart-5: hsl(27 87% 67%);
    --radius: 0.5rem;
    --sidebar-background: hsl(0 0% 98%);
    --sidebar-foreground: hsl(240 5.3% 26.1%);
    --sidebar-primary: hsl(0 0% 10%);
    --sidebar-primary-foreground: hsl(0 0% 98%);
    --sidebar-accent: hsl(0 0% 94%);
    --sidebar-accent-foreground: hsl(0 0% 30%);
    --sidebar-border: hsl(0 0% 91%);
    --sidebar-ring: hsl(217.2 91.2% 59.8%);
    --sidebar: hsl(0 0% 98%);

    /* Louise Carmen Brand Colors */
    --lc-naturel: #f8f6e8;
    --lc-whisky: #b8860b;
    --lc-camarguais: #654321;
    --lc-plum: #d8bfd8;
    --lc-red: #dc143c;
    --lc-fuchsia: #ff1493;
    --lc-orange: #ff8c00;
    --lc-saffron: #ffd700;
    --lc-primavera: #98fb98;
    --lc-military: #6b8e23;
    --lc-green: #228b22;
    --lc-turquoise: #035c74;
    --lc-azul: #395ecb;
    --lc-marine: #191970;
    --lc-black: #000000;

    --lce-gold: #c9c964;
    --lce-silver: #c0c0c0;
    --lce-neutral: rgba(100, 100, 100, 0.5);
    --lce-rouge: #ff5b5b;
    --lce-blue: #268bff;
    --lce-green: #00b600;
    --lce-black: #000000;
    --lce-vert: #008000;
}

.dark {
    --background: hsl(0 0% 3.9%);
    --foreground: hsl(0 0% 98%);
    --card: hsl(0 0% 3.9%);
    --card-foreground: hsl(0 0% 98%);
    --popover: hsl(0 0% 3.9%);
    --popover-foreground: 0 0% 98%;
    --primary: hsl(0 0% 98%);
    --primary-foreground: hsl(0 0% 9%);
    --secondary: hsl(0 0% 14.9%);
    --secondary-foreground: hsl(0 0% 98%);
    --muted: hsl(0 0% 16.08%);
    --muted-foreground: hsl(0 0% 63.9%);
    --accent: hsl(0 0% 14.9%);
    --accent-foreground: hsl(0 0% 98%);
    --destructive: hsl(0 84% 60%);
    --destructive-foreground: hsl(0 0% 98%);
    --border: hsl(0 0% 14.9%);
    --input: hsl(0 0% 14.9%);
    --ring: hsl(0 0% 83.1%);
    --chart-1: hsl(220 70% 50%);
    --chart-2: hsl(160 60% 45%);
    --chart-3: hsl(30 80% 55%);
    --chart-4: hsl(280 65% 60%);
    --chart-5: hsl(340 75% 55%);
    --sidebar-background: hsl(0 0% 7%);
    --sidebar-foreground: hsl(0 0% 95.9%);
    --sidebar-primary: hsl(360, 100%, 100%);
    --sidebar-primary-foreground: hsl(0 0% 100%);
    --sidebar-accent: hsl(0 0% 15.9%);
    --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
    --sidebar-border: hsl(0 0% 15.9%);
    --sidebar-ring: hsl(217.2 91.2% 59.8%);
    --sidebar: hsl(240 5.9% 10%);
}

@layer base {
    * {
        @apply border-border outline-ring/50;
    }
    body {
        @apply bg-background text-foreground;
    }
}

/* Engraving text positioning utilities */
.engraving-text-container {
  position: relative;
  min-height: 120px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.engraving-text-position-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.engraving-text-position-bottom-left {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

.engraving-text-position-bottom-right {
  position: absolute;
  bottom: 10px;
  right: 10px;
}