@import 'tailwindcss';

@import 'tw-animate-css';

@source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';

/* Storefront theme tokens are controlled through data-frontend-theme.
   Changing FRONTEND_THEME in .env swaps the entire visual palette. */
@custom-variant dark (&:not(*));

@layer base {
  a,
  button:not(:disabled),
  [role='button']:not([aria-disabled='true']),
  input[type='button']:not(:disabled),
  input[type='submit']:not(:disabled),
  input[type='reset']:not(:disabled) {
    cursor: pointer;
  }
}

@layer utilities {
  .scrollbar-hide {
    @apply [-ms-overflow-style:none] [scrollbar-width:none];
  }
  
  .scrollbar-hide::-webkit-scrollbar {
    @apply hidden;
  }
}

@layer components {
  .auth-luxury input:not([type='checkbox']),
  .customer-luxury input:not([type='checkbox']) {
    @apply h-14 rounded-2xl border-border bg-background px-5 text-base shadow-none transition focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/15;
  }

  .auth-luxury label,
  .customer-luxury label {
    @apply text-xs font-black uppercase tracking-[0.14em] text-muted-foreground;
  }

  .auth-luxury button[type='submit'],
  .customer-luxury button[type='submit'] {
    @apply min-h-13 rounded-full bg-primary px-7 text-sm font-black uppercase tracking-[0.12em] text-primary-foreground shadow-lg shadow-black/10 transition hover:-translate-y-0.5 hover:opacity-90;
  }

  .auth-luxury h1,
  .auth-luxury h2,
  .customer-luxury h1,
  .customer-luxury h2 {
    @apply font-black uppercase tracking-tight;
  }
}

@theme {
    --color-brand: #111111;
  --color-accent: #dc2626;
  --color-muted: #737373;

  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;

  --font-display: Inter, sans-serif;
    --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);
    --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);
}

:root {
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: oklch(0.205 0 0);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.97 0 0);
    --secondary-foreground: oklch(0.205 0 0);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --accent: oklch(0.97 0 0);
    --accent-foreground: oklch(0.205 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.577 0.245 27.325);
    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: oklch(0.87 0 0);
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --radius: 0.625rem;
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.145 0 0);
    --sidebar-primary: oklch(0.205 0 0);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.97 0 0);
    --sidebar-accent-foreground: oklch(0.205 0 0);
    --sidebar-border: oklch(0.922 0 0);
    --sidebar-ring: oklch(0.87 0 0);
    --theme-body-gradient:
        radial-gradient(circle at top left, rgb(0 0 0 / 0.04), transparent 36%),
        linear-gradient(180deg, #fbfaf7 0%, #f7f4ef 52%, #f2ece3 100%);
    --theme-card-gradient:
        linear-gradient(180deg, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.72));
    --theme-accent-soft: rgb(0 0 0 / 0.04);
    --theme-hero-glow: rgb(0 0 0 / 0.08);
}

html[data-frontend-theme='theme1'] {
    --background: oklch(0.985 0.005 90);
    --foreground: oklch(0.18 0.02 255);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.16 0.02 255);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.16 0.02 255);
    --primary: oklch(0.18 0.02 255);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.96 0.01 250);
    --secondary-foreground: oklch(0.18 0.02 255);
    --muted: oklch(0.96 0.01 250);
    --muted-foreground: oklch(0.48 0.02 255);
    --accent: oklch(0.62 0.22 24);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.985 0 0);
    --border: oklch(0.9 0.01 250);
    --input: oklch(0.9 0.01 250);
    --ring: oklch(0.18 0.02 255);
    --sidebar: oklch(0.98 0.005 90);
    --sidebar-foreground: oklch(0.18 0.02 255);
    --sidebar-primary: oklch(0.18 0.02 255);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.96 0.01 250);
    --sidebar-accent-foreground: oklch(0.18 0.02 255);
    --sidebar-border: oklch(0.9 0.01 250);
    --sidebar-ring: oklch(0.18 0.02 255);
    --theme-body-gradient:
        radial-gradient(circle at top left, rgb(0 0 0 / 0.05), transparent 36%),
        radial-gradient(circle at bottom right, rgb(220 38 38 / 0.08), transparent 30%),
        linear-gradient(180deg, #fbfaf7 0%, #f7f3ee 50%, #f2ece2 100%);
    --theme-card-gradient:
        linear-gradient(180deg, rgb(255 255 255 / 0.92), rgb(255 255 255 / 0.76));
    --theme-accent-soft: rgb(220 38 38 / 0.08);
    --theme-hero-glow: rgb(17 17 17 / 0.1);
}

html[data-frontend-theme='theme2'] {
    --background: oklch(0.982 0.018 356);
    --foreground: oklch(0.24 0.03 260);
    --card: oklch(0.995 0.01 356);
    --card-foreground: oklch(0.22 0.03 260);
    --popover: oklch(0.995 0.01 356);
    --popover-foreground: oklch(0.22 0.03 260);
    --primary: oklch(0.62 0.24 356);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.96 0.02 356);
    --secondary-foreground: oklch(0.26 0.03 260);
    --muted: oklch(0.96 0.02 356);
    --muted-foreground: oklch(0.5 0.03 260);
    --accent: oklch(0.72 0.18 350);
    --accent-foreground: oklch(0.22 0.03 260);
    --destructive: oklch(0.6 0.2 27);
    --destructive-foreground: oklch(0.985 0 0);
    --border: oklch(0.9 0.02 356);
    --input: oklch(0.9 0.02 356);
    --ring: oklch(0.62 0.24 356);
    --sidebar: oklch(0.99 0.012 356);
    --sidebar-foreground: oklch(0.22 0.03 260);
    --sidebar-primary: oklch(0.62 0.24 356);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.96 0.02 356);
    --sidebar-accent-foreground: oklch(0.22 0.03 260);
    --sidebar-border: oklch(0.9 0.02 356);
    --sidebar-ring: oklch(0.62 0.24 356);
    --theme-body-gradient:
        radial-gradient(circle at top left, rgb(255 255 255 / 0.95), transparent 26%),
        radial-gradient(circle at top right, rgb(255 181 209 / 0.34), transparent 24%),
        radial-gradient(circle at bottom right, rgb(244 114 182 / 0.18), transparent 28%),
        linear-gradient(180deg, #fff8fa 0%, #fdeaf0 34%, #f7dce7 100%);
    --theme-card-gradient:
        linear-gradient(180deg, rgb(255 255 255 / 0.95), rgb(255 245 249 / 0.84));
    --theme-accent-soft: rgb(245 27 117 / 0.08);
    --theme-hero-glow: rgb(245 27 117 / 0.12);
}

html[data-frontend-theme='theme3'] {
    --background: oklch(0.982 0.018 356);
    --foreground: oklch(0.24 0.03 260);
    --card: oklch(0.995 0.01 356);
    --card-foreground: oklch(0.22 0.03 260);
    --popover: oklch(0.995 0.01 356);
    --popover-foreground: oklch(0.22 0.03 260);
    --primary: oklch(0.62 0.24 356);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.96 0.02 356);
    --secondary-foreground: oklch(0.26 0.03 260);
    --muted: oklch(0.96 0.02 356);
    --muted-foreground: oklch(0.5 0.03 260);
    --accent: oklch(0.72 0.18 350);
    --accent-foreground: oklch(0.22 0.03 260);
    --destructive: oklch(0.6 0.2 27);
    --destructive-foreground: oklch(0.985 0 0);
    --border: oklch(0.9 0.02 356);
    --input: oklch(0.9 0.02 356);
    --ring: oklch(0.62 0.24 356);
    --sidebar: oklch(0.99 0.012 356);
    --sidebar-foreground: oklch(0.22 0.03 260);
    --sidebar-primary: oklch(0.62 0.24 356);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.96 0.02 356);
    --sidebar-accent-foreground: oklch(0.22 0.03 260);
    --sidebar-border: oklch(0.9 0.02 356);
    --sidebar-ring: oklch(0.62 0.24 356);
    --theme-body-gradient:
        radial-gradient(circle at top left, rgb(255 255 255 / 0.95), transparent 26%),
        radial-gradient(circle at top right, rgb(255 181 209 / 0.34), transparent 24%),
        radial-gradient(circle at bottom right, rgb(244 114 182 / 0.18), transparent 28%),
        linear-gradient(180deg, #fff8fa 0%, #fdeaf0 34%, #f7dce7 100%);
    --theme-card-gradient:
        linear-gradient(180deg, rgb(255 255 255 / 0.95), rgb(255 245 249 / 0.84));
    --theme-accent-soft: rgb(245 27 117 / 0.08);
    --theme-hero-glow: rgb(245 27 117 / 0.12);
}

html[data-frontend-theme='theme4'] {
    --background: oklch(0.99 0.004 85);
    --foreground: oklch(0.16 0.01 75);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.16 0.01 75);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.16 0.01 75);
    --primary: oklch(0.16 0.01 75);
    --primary-foreground: oklch(0.99 0 0);
    --secondary: oklch(0.96 0.008 85);
    --secondary-foreground: oklch(0.16 0.01 75);
    --muted: oklch(0.96 0.008 85);
    --muted-foreground: oklch(0.5 0.01 75);
    --accent: oklch(0.68 0.09 78);
    --accent-foreground: oklch(0.16 0.01 75);
    --border: oklch(0.9 0.008 85);
    --input: oklch(0.9 0.008 85);
    --ring: oklch(0.68 0.09 78);
    --theme-body-gradient: linear-gradient(180deg, #ffffff 0%, #faf9f6 100%);
    --theme-card-gradient: linear-gradient(180deg, #ffffff, #faf9f6);
    --theme-accent-soft: rgb(177 139 72 / 0.1);
    --theme-hero-glow: rgb(177 139 72 / 0.12);
}

@layer base {
    * {
        @apply border-border;
    }

    body {
        @apply bg-background text-foreground antialiased;
        background-image: var(--theme-body-gradient);
        background-attachment: fixed;
    }

    html {
        background-color: rgb(255 255 255);
    }

    html[data-frontend-theme='theme1'],
    html[data-frontend-theme='theme2'],
    html[data-frontend-theme='theme3'] {
        background-color: var(--background);
    }

    html[data-frontend-theme='theme4'] {
        background-color: var(--background);
    }

    ::selection {
        background: color-mix(in oklab, var(--primary) 20%, white 80%);
        color: var(--foreground);
    }

    .theme-surface {
        background-image: var(--theme-card-gradient);
    }

    .theme-soft-accent {
        background-color: var(--theme-accent-soft);
    }

    .theme-hero-glow {
        box-shadow: 0 0 0 1px var(--theme-hero-glow), 0 30px 80px var(--theme-hero-glow);
    }
}