/* labb CSS Setup for Tailwind CSS 4 + DaisyUI 5 */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

/* Override Tailwind's @property to allow shadow color inheritance for labb */
@property --tw-shadow-color {
  syntax: "*";
  inherits: true;
}
@import "tailwindcss";

/* Sincronizar clases dark: de Tailwind con data-theme=labb-dark/dark de daisyUI */
@custom-variant dark (&:where([data-theme=dark], [data-theme=labb-dark], .dark, .dark *));

@plugin "daisyui" {
  themes: light, dark;
}

@plugin "daisyui/theme" {
  name: "labb-light";
  default: true;
  prefersdark: false;
  color-scheme: light;

  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(96% 0.002 247);
  --color-base-300: oklch(89% 0.003 247);
  --color-base-content: oklch(9% 0.005 247);

  --color-primary: oklch(9% 0.005 247);
  --color-primary-content: oklch(98% 0.002 247);

  --color-secondary: oklch(71% 0.004 247);
  --color-secondary-content: oklch(98% 0.002 247);

  --color-accent: oklch(45% 0.006 247);
  --color-accent-content: oklch(98% 0.002 247);

  --color-neutral: oklch(25% 0.004 247);
  --color-neutral-content: oklch(98% 0.002 247);

  --color-info: oklch(64% 0.12 221);
  --color-info-content: oklch(98% 0.002 221);

  --color-success: oklch(60% 0.11 145);
  --color-success-content: oklch(98% 0.002 145);

  --color-warning: oklch(75% 0.15 85);
  --color-warning-content: oklch(15% 0.02 85);

  --color-error: oklch(58% 0.15 15);
  --color-error-content: oklch(98% 0.002 15);

  --radius-selector: 0.375rem;
  --radius-field: 0.375rem;
  --radius-box: 0.5rem;

  --size-selector: 0.25rem;
  --size-field: 0.25rem;

  --border: 1px;
  --depth: 0;
  --noise: 0;
  --tw-shadow-color: rgba(0, 0, 0, 0.1);
}

@plugin "daisyui/theme" {
  name: "labb-dark";
  default: false;
  prefersdark: true;
  color-scheme: dark;

  --color-base-100: oklch(9% 0.005 247);
  --color-base-200: oklch(30% 0.007 247);
  --color-base-300: oklch(50% 0.010 247);
  --color-base-content: oklch(98% 0.002 247);

  --color-primary: oklch(98% 0.002 247);
  --color-primary-content: oklch(9% 0.005 247);

  --color-secondary: oklch(71% 0.004 247);
  --color-secondary-content: oklch(9% 0.005 247);

  --color-accent: oklch(82% 0.006 247);
  --color-accent-content: oklch(9% 0.005 247);

  --color-neutral: oklch(25% 0.004 247);
  --color-neutral-content: oklch(98% 0.002 247);

  --color-info: oklch(70% 0.12 221);
  --color-info-content: oklch(9% 0.005 221);

  --color-success: oklch(65% 0.11 145);
  --color-success-content: oklch(9% 0.005 145);

  --color-warning: oklch(80% 0.15 85);
  --color-warning-content: oklch(9% 0.005 85);

  --color-error: oklch(65% 0.15 15);
  --color-error-content: oklch(9% 0.005 15);

  --radius-selector: 0.375rem;
  --radius-field: 0.375rem;
  --radius-box: 0.5rem;

  --size-selector: 0.25rem;
  --size-field: 0.25rem;

  --border: 1px;
  --depth: 0;
  --noise: 0;
  --tw-shadow-color: rgba(255, 255, 255, 0.1);
}

/* Alpine.js cloak — hide elements until Alpine initialises */
[x-cloak] { display: none !important; }

/* Custom project styles (optional) */
/* Add your custom CSS below this line */

/* Welcome Kit & Lo Justo Executive Styles */

@layer utilities {
  /* Efecto 3D permanente para el monograma L J de Lo Justo */
  .text-3d-monogram {
    text-shadow: 
      1px 1px 0px rgba(0, 0, 0, 0.85),
      2px 2px 0px rgba(0, 0, 0, 0.75),
      3px 3px 0px rgba(0, 0, 0, 0.65),
      0px 6px 12px rgba(0, 0, 0, 0.5);
  }

  /* Cápsulas de cristal traslúcido con bisel 3D físico para botones e íconos */
  .glass-capsule-3d {
    @apply bg-white/95 dark:bg-zinc-900/95 border border-white/40 dark:border-zinc-700/50 rounded-xl p-1.5 shadow-lg transition-all duration-200;
    border-bottom: 2px solid rgba(0, 0, 0, 0.6);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.5);
  }

  .glass-capsule-3d:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.6);
  }

  .glass-capsule-3d:active {
    transform: translateY(1px);
    border-bottom-width: 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  }

  /* Subtle grain texture */
  .grainy-bg {
    position: relative;
  }

  .grainy-bg::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.03;
    z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    pointer-events: none;
  }

  /* Inline code styling */
  .code-inline {
    @apply px-2 py-1 rounded-md text-sm font-mono;
    @apply bg-base-content/5 text-base-content/80;
    @apply border border-base-content/10;
    @apply transition-colors duration-200;
  }

  .code-inline:hover {
    @apply bg-base-content/8 border-base-content/15;
  }
}