/* Import CDK overlay styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* --- 1. CONFIGURATION (HSL Numbers only) --- */
  /* Blue-600: 221 83% 53% */
  --primary: 221 83% 53%;
  --radius: 0.5rem;

  /* --- 2. BASE COLORS --- */
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;

  --primary-foreground: 0 0% 100%;

  /* Derived via HSL logic to mimic your color-mix */
  --secondary: 210 40% 96%;
  --secondary-foreground: 222 47% 11%;

  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%;

  --accent: 221 83% 53% / 0.1; /* 10% opacity wash */
  --accent-foreground: 221 83% 53%;

  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 221 83% 53% / 0.25;

  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;

  --input-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.dark {
  /* --- Google Charcoal Dark Mode --- */
  --background: 240 10% 4%; /* #121212 */
  --foreground: 0 0% 89%; /* #e3e3e3 */

  --secondary: 0 0% 12%; /* #1f1f1f */
  --secondary-foreground: 0 0% 100%;

  --muted: 0 0% 16%; /* #2a2a2a */
  --muted-foreground: 213 10% 63%; /* #9aa0a6 */

  --border: 210 5% 25%; /* #3c4043 */
  --input: 210 5% 25%;

  --popover: 0 0% 12%;
  --popover-foreground: 0 0% 89%;

  --accent: 0 0% 100% / 0.04; /* rgba(255,255,255,0.04) */
  --accent-foreground: 221 83% 53%;

  --ring: 221 83% 53% / 0.4;
  --input-shadow: 0 0 #0000;
}
.dark tolle-card {
  background-color: var(--secondary); /* #1f1f1f */
  border-color: var(--border);
}

.dark tolle-input, .dark tolle-select button {
  background-color: transparent; /* Google inputs often have a transparent or very dark base */
}

tolle-button svg {
  @apply w-4 h-4; /* Default Lucide/Radix icon size */
}

.h-8 svg {
  @apply w-3.5 h-3.5;
}

@layer base {
  /* This ensures Remix Icons are centered and sized relative to text */
  i[class^="ri-"], i[class*=" ri-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
    /* Standardized icon size for buttons/inputs */
    font-size: 1.2rem;
  }

  /* Handle spacing when an icon is next to text */
  .tolle-button-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  /* Scale icons down for XS and SM containers */
  .size-xs i[class^="ri-"],
  .size-xs i[class*=" ri-"],
  .size-sm i[class^="ri-"],
  .size-sm i[class*=" ri-"] {
    font-size: 1rem;
  }
}

@layer components {
  /* Target the internal input and button elements */
  tolle-input input,
  tolle-select button,
  tolle-masked-input input,
  tolle-date-picker tolle-masked-input input {
    box-shadow: var(--input-shadow);
    transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Remove shadow on focus to let the 'ring' effect take over cleanly */
  tolle-input input:focus,
  tolle-select button:focus,
  tolle-masked-input input:focus {
    box-shadow: 0 0 #0000;
  }
}

/* Compact dropdown items when select is xs/sm */
.size-xs tolle-select-item > div { padding: 4px 8px 4px 32px; font-size: 12px; }
.size-sm tolle-select-item > div { padding: 6px 12px 6px 32px; }



/* Ensure the backdrop covers the screen */
.cdk-overlay-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Our custom backdrop style from earlier */
.tolle-modal-backdrop {
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  z-index: 50;
}