@import "tailwindcss";

@source "../../public/*.html";
@source "../../app/helpers/**/*.rb";
@source "../../app/javascript/**/*.js";
@source "../../app/views/**/*";

@plugin "daisyui";
/**
 * MEDULLA THEME
 * A custom DaisyUI theme for Medulla - AI-first practice management for Canadian physicians
 * 
 * Design Philosophy:
 * - Sophisticated professionalism with warmth
 * - Clinical precision meets human-centered care
 * - Intelligent, not sterile
 * - Future-proof foundation for scale
 * 
 * Based on: lofi theme essence
 * Customized: For medical practice management context
 */

 @plugin "daisyui/theme" {
  name: "medulla";
  default: true;
  prefersdark: false;
  color-scheme: "light";
  
  /* 
   * BASE COLORS
   * Slightly warmer whites to reduce eye strain during long clinical sessions
   * Maintains clean, clinical feel while being more inviting
   */
  --color-base-100: oklch(99.2% 0.002 85);      /* Warmest white - main backgrounds */
  --color-base-200: oklch(96.5% 0.003 85);      /* Subtle warm gray - secondary surfaces */
  --color-base-300: oklch(92.8% 0.004 85);      /* Warm gray - borders, dividers */
  --color-base-content: oklch(18% 0.015 285);   /* Deep charcoal with slight blue undertone - main text */
  
  /* 
   * PRIMARY - Deep Neural Black
   * Your core brand color. Rich, sophisticated black with subtle warm undertone.
   * Represents intelligence, authority, and the "core" (medulla) concept.
   * Slightly adjusted from pure black for better screen ergonomics.
   */
  --color-primary: oklch(16.5% 0.008 285);      /* Deep intelligent black */
  --color-primary-content: oklch(99% 0 0);      /* Crisp white for contrast */
  
  /* 
   * SECONDARY - Clinical Slate
   * Professional, trustworthy. Medical precision.
   * Use for navigation, secondary actions, supportive UI elements.
   */
  --color-secondary: oklch(35% 0.02 255);       /* Clinical slate blue-gray */
  --color-secondary-content: oklch(99% 0 0);    /* White text */
  
  /* 
   * ACCENT - Focused Teal
   * Represents clarity, focus, and medical intelligence.
   * Medical-adjacent without being too "hospital"
   * Use for highlights, active states, AI features.
   */
  --color-accent: oklch(55% 0.12 195);          /* Intelligent teal */
  --color-accent-content: oklch(99% 0 0);       /* White text */
  
  /* 
   * NEUTRAL - Carbon
   * Pure, unbiased. For system-level UI elements.
   */
  --color-neutral: oklch(22% 0.01 270);         /* Carbon gray */
  --color-neutral-content: oklch(99% 0 0);      /* White text */
  
  /* 
   * SEMANTIC COLORS
   * Medical-appropriate semantic colors
   * Designed for accessibility and clear communication in clinical contexts
   */
  
  /* INFO - Diagnostic Blue */
  --color-info: oklch(72% 0.14 235);            /* Clear, informative blue */
  --color-info-content: oklch(18% 0.028 235);   /* Dark blue text */
  
  /* SUCCESS - Healthy Green */
  --color-success: oklch(78% 0.16 150);         /* Vibrant but professional green */
  --color-success-content: oklch(18% 0.032 150); /* Dark green text */
  
  /* WARNING - Alert Amber */
  --color-warning: oklch(82% 0.15 75);          /* Warm, noticeable amber */
  --color-warning-content: oklch(20% 0.03 75);  /* Dark amber text */
  
  /* ERROR - Critical Red */
  --color-error: oklch(65% 0.22 25);            /* Strong but not alarming red */
  --color-error-content: oklch(99% 0 0);        /* White for visibility */
  
  /* 
   * BORDER RADIUS
   * Modern but professional - not too playful
   * Refined radius for medical context
   */
  --radius-selector: 0.75rem;                   /* Radio buttons, checkboxes - softer */
  --radius-field: 0.375rem;                     /* Input fields - slightly rounded */
  --radius-box: 0.625rem;                       /* Cards, containers - professional modern */
  --radius-badge: 0.5rem;                       /* Badges, tags - balanced */
  --radius-btn: 0.5rem;                         /* Buttons - confident, clickable */
  
  /* 
   * SIZING
   * Slightly larger hit targets for clinical efficiency
   * Doctors need to click quickly and accurately
   */
  --size-selector: 0.3rem;                      /* Slightly larger selectors */
  --size-field: 0.3rem;                         /* Form field sizing */
  
  /* 
   * DEPTH & EFFECTS
   * Minimal but purposeful
   */
  --border: 1px;                                /* Clean, defined borders */
  --depth: 0.05;                                /* Subtle depth for hierarchy */
  --noise: 0;                                   /* Clean, no texture */
  
  /* 
   * CUSTOM PROPERTIES
   * Extended properties for future use
   */
  --transition-speed: 200ms;                    /* Smooth, responsive feel */
  --focus-ring: oklch(55% 0.12 195);           /* Accessible focus (matches accent) */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
}


/**
 * USAGE GUIDELINES
 * 
 * PRIMARY: Use for main CTAs, headers, key branding moments
 * SECONDARY: Navigation, secondary buttons, supportive UI
 * ACCENT: AI features, active states, focused interactions, highlights
 * 
 * INFO: System messages, helpful information, tooltips
 * SUCCESS: Confirmations, completed tasks, positive outcomes
 * WARNING: Cautions, required attention, intermediate alerts
 * ERROR: Critical alerts, form errors, failures
 * 
 * Consider adding future variants:
 * - Dark mode version (medulla-dark)
 * - High contrast mode (medulla-contrast) for accessibility
 * - Colorblind-friendly variant if needed
 */

/**
 * FULLCALENDAR CUSTOMIZATION
 * Styling FullCalendar to match the Medulla theme
 * Uses theme colors and design system for consistency
 */

/* ===== CALENDAR CONTAINER & LAYOUT ===== */
.fc {
  /* Use theme font and colors */
  font-family: inherit;
  color: oklch(18% 0.015 285); /* base-content */
  font-size: 0.875rem; /* 14px - slightly smaller for better density */
}

.fc-theme-standard {
  --fc-border-color: oklch(92.8% 0.004 85); /* base-300 - borders */
  --fc-page-bg-color: oklch(99.2% 0.002 85); /* base-100 - main bg */
  --fc-neutral-bg-color: oklch(96.5% 0.003 85); /* base-200 - secondary bg */
  --fc-neutral-text-color: oklch(18% 0.015 285); /* base-content */
  --fc-today-bg-color: oklch(55% 0.12 195 / 0.08); /* accent with transparency */
  --fc-highlight-color: oklch(55% 0.12 195 / 0.15); /* accent highlight */
}

/* ===== HEADER TOOLBAR ===== */
.fc .fc-toolbar {
  padding: 1rem;
  gap: 1rem;
}

.fc .fc-toolbar-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: oklch(18% 0.015 285);
  letter-spacing: -0.01em;
}

.fc .fc-button {
  background-color: oklch(99.2% 0.002 85); /* base-100 */
  border: 1px solid oklch(92.8% 0.004 85); /* base-300 */
  color: oklch(18% 0.015 285); /* base-content */
  border-radius: 0.5rem; /* btn radius from theme */
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 200ms ease; /* theme transition-speed */
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
}

.fc .fc-button:hover {
  background-color: oklch(96.5% 0.003 85); /* base-200 */
  border-color: oklch(92.8% 0.004 85);
  color: oklch(18% 0.015 285);
}

.fc .fc-button:focus {
  outline: 2px solid oklch(55% 0.12 195); /* focus-ring */
  outline-offset: 2px;
  box-shadow: none;
}

.fc .fc-button-primary {
  background-color: oklch(16.5% 0.008 285); /* primary */
  border-color: oklch(16.5% 0.008 285);
  color: oklch(99% 0 0); /* primary-content */
}

.fc .fc-button-primary:hover {
  background-color: oklch(22% 0.01 285); /* slightly lighter */
  border-color: oklch(22% 0.01 285);
  color: oklch(99% 0 0);
}

.fc .fc-button-primary:disabled {
  background-color: oklch(92.8% 0.004 85);
  border-color: oklch(92.8% 0.004 85);
  color: oklch(18% 0.015 285 / 0.4);
  opacity: 0.6;
}

.fc .fc-button-active {
  background-color: oklch(16.5% 0.008 285) !important; /* primary */
  border-color: oklch(16.5% 0.008 285) !important;
  color: oklch(99% 0 0) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.fc .fc-button-group {
  gap: 0;
  display: inline-flex;
  border-radius: 0.5rem;
  background-color: oklch(96% 0.003 85);
  padding: 0.25rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

/* Style view toggle buttons as a segmented control */
.fc .fc-button-group > .fc-button {
  background-color: transparent !important;
  border: none !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0.375rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: oklch(35% 0.02 255) !important;
  transition: all 0.15s ease-in-out;
}

.fc .fc-button-group > .fc-button:hover:not(.fc-button-active) {
  background-color: oklch(94% 0.004 85) !important;
  color: oklch(18% 0.015 285) !important;
}

.fc .fc-button-group > .fc-button-active {
  background-color: oklch(16.5% 0.008 285) !important; /* primary */
  border: 1px solid oklch(16.5% 0.008 285) !important;
  color: oklch(99% 0 0) !important; /* white text */
  font-weight: 600 !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.1), 0 1px 3px 0 rgb(0 0 0 / 0.05);
}

/* ===== VIEW CONTAINER & GRID ===== */
.fc .fc-view-harness {
  background-color: oklch(99.2% 0.002 85);
}

.fc .fc-scrollgrid {
  border-color: oklch(92.8% 0.004 85);
  border-radius: 0.625rem; /* box radius from theme */
  overflow: hidden;
}

.fc .fc-scrollgrid td,
.fc .fc-scrollgrid th {
  border-color: oklch(92.8% 0.004 85);
}

/* ===== COLUMN HEADERS (Days of Week) ===== */
.fc .fc-col-header {
  background-color: oklch(96.5% 0.003 85); /* base-200 */
}

.fc .fc-col-header-cell {
  padding: 0.75rem 0.5rem;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: oklch(35% 0.02 255); /* secondary */
}

.fc .fc-col-header-cell-cushion {
  padding: 0.25rem 0.5rem;
  color: inherit;
}

/* ===== DAY CELLS ===== */
.fc .fc-daygrid-day {
  background-color: oklch(99.2% 0.002 85);
}

.fc .fc-daygrid-day.fc-day-today {
  background-color: oklch(55% 0.12 195 / 0.06) !important; /* subtle accent bg */
}

.fc .fc-daygrid-day-number {
  padding: 0.5rem;
  font-weight: 500;
  color: oklch(18% 0.015 285);
}

.fc .fc-day-today .fc-daygrid-day-number {
  color: oklch(55% 0.12 195); /* accent color for today */
  font-weight: 600;
}

/* Weekend styling - slightly different bg */
.fc .fc-day-sat,
.fc .fc-day-sun {
  background-color: oklch(96.5% 0.003 85 / 0.5);
}

/* ===== TIMEGRID (Week/Day View) ===== */
.fc .fc-timegrid-slot {
  height: 3rem; /* Comfortable slot height */
}

.fc .fc-timegrid-slot-label {
  border-color: oklch(92.8% 0.004 85);
  padding: 0 0.5rem;
}

.fc .fc-timegrid-slot-label-cushion {
  font-size: 0.75rem;
  font-weight: 500;
  color: oklch(35% 0.02 255); /* secondary */
  padding: 0.25rem 0;
}

.fc .fc-timegrid-axis {
  background-color: oklch(96.5% 0.003 85); /* base-200 */
}

.fc .fc-timegrid-divider {
  border-color: oklch(92.8% 0.004 85);
  padding: 0;
}

/* Time grid columns */
.fc .fc-timegrid-col {
  background-color: oklch(99.2% 0.002 85);
}

.fc .fc-timegrid-col.fc-day-today {
  background-color: oklch(55% 0.12 195 / 0.04) !important;
}

/* ===== NOW INDICATOR ===== */
.fc .fc-timegrid-now-indicator-line {
  border-color: oklch(65% 0.22 25); /* error/red for current time */
  border-width: 2px;
}

.fc .fc-timegrid-now-indicator-arrow {
  border-color: oklch(65% 0.22 25);
  border-width: 6px;
}

/* ===== EVENTS ===== */
.fc-event {
  border: none;
  border-radius: 0.375rem; /* field radius */
  padding: 0.375rem 0.5rem; /* Compact padding to maximize content space */
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  min-height: 3rem; /* Ensure enough height for two lines of text */
  overflow: visible !important; /* Override FullCalendar's overflow hidden */
}

.fc-event:hover {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  transform: translateY(-1px);
}

.fc-event .fc-event-main {
  padding: 0.125rem;
  padding-right: 1.125rem; /* Extra padding on right to avoid icon overlap */
  color: inherit;
  overflow: visible !important; /* Override FullCalendar's overflow */
  white-space: normal !important; /* Allow text to wrap */
}

.fc-event .fc-event-main-frame {
  overflow: visible !important;
  white-space: normal !important;
}

.fc-event .fc-event-time {
  font-weight: 500;
  display: block; /* Ensure time is on its own line */
  white-space: nowrap; /* Keep time on one line */
  overflow: visible !important;
}

.fc-event .fc-event-title {
  font-weight: 500;
  word-wrap: break-word;
  overflow: visible !important;
  color: inherit;
  text-decoration: none;
  transition: opacity 150ms ease;
  cursor: pointer;
}

.fc-event .fc-event-title:hover {
  opacity: 0.85;
  text-decoration: underline;
}

.fc-event .fc-event-title-container {
  overflow: visible !important;
  white-space: normal !important;
}

/* Default event styling - uses accent color */
.fc-event {
  background-color: oklch(55% 0.12 195); /* accent */
  color: oklch(99% 0 0); /* white text */
}

/* ===== RESOURCE VIEW STYLING ===== */
.fc .fc-resource-timeline-divider {
  border-color: oklch(92.8% 0.004 85);
  background-color: oklch(96.5% 0.003 85);
}

.fc .fc-resource-area {
  background-color: oklch(96.5% 0.003 85);
  border-color: oklch(92.8% 0.004 85);
}

.fc .fc-resource-area-header {
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: oklch(18% 0.015 285);
  background-color: oklch(96.5% 0.003 85);
}

.fc .fc-datagrid-cell {
  padding: 0.5rem;
}

.fc .fc-datagrid-cell-frame {
  min-height: 3.5rem;
}

/* ===== SELECTION (When creating new events) ===== */
.fc-highlight {
  background: oklch(55% 0.12 195 / 0.15) !important; /* accent highlight */
}

/* ===== POPOVER & TOOLTIPS ===== */
.fc .fc-popover {
  background-color: oklch(99.2% 0.002 85);
  border: 1px solid oklch(92.8% 0.004 85);
  border-radius: 0.625rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.fc .fc-popover-header {
  background-color: oklch(96.5% 0.003 85);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid oklch(92.8% 0.004 85);
  font-weight: 600;
}

.fc .fc-popover-body {
  padding: 0.75rem 1rem;
}

/* ===== SCROLLBARS ===== */
.fc-scroller::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.fc-scroller::-webkit-scrollbar-track {
  background: oklch(96.5% 0.003 85);
}

.fc-scroller::-webkit-scrollbar-thumb {
  background: oklch(92.8% 0.004 85);
  border-radius: 4px;
}

.fc-scroller::-webkit-scrollbar-thumb:hover {
  background: oklch(35% 0.02 255); /* secondary */
}

/* ===== LIST VIEW ===== */
.fc .fc-list {
  border-color: oklch(92.8% 0.004 85);
}

.fc .fc-list-day-cushion {
  background-color: oklch(96.5% 0.003 85);
  padding: 0.5rem 1rem;
  font-weight: 600;
}

.fc .fc-list-event:hover td {
  background-color: oklch(96.5% 0.003 85);
}

.fc .fc-list-event-time {
  color: oklch(35% 0.02 255);
  font-weight: 500;
}

/* ===== MORE LINK ("+X more" in day view) ===== */
.fc .fc-more-link {
  color: oklch(55% 0.12 195); /* accent */
  font-weight: 600;
  font-size: 0.75rem;
}

.fc .fc-more-link:hover {
  color: oklch(35% 0.02 255); /* secondary */
  text-decoration: underline;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
  .fc .fc-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .fc .fc-toolbar-chunk {
    margin-bottom: 0.5rem;
  }
  
  .fc .fc-toolbar-title {
    font-size: 1.125rem;
    text-align: center;
  }
  
  .fc .fc-button {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }
}

/* ===== DARK MODE SUPPORT (for medulla-dark theme) ===== */
[data-theme="medulla-dark"] .fc {
  color: oklch(92% 0.005 85);
}

[data-theme="medulla-dark"] .fc-theme-standard {
  --fc-border-color: oklch(23% 0.012 270);
  --fc-page-bg-color: oklch(16% 0.008 270);
  --fc-neutral-bg-color: oklch(19% 0.01 270);
  --fc-neutral-text-color: oklch(92% 0.005 85);
  --fc-today-bg-color: oklch(62% 0.14 195 / 0.12);
  --fc-highlight-color: oklch(62% 0.14 195 / 0.2);
}

[data-theme="medulla-dark"] .fc .fc-button {
  background-color: oklch(19% 0.01 270);
  border-color: oklch(23% 0.012 270);
  color: oklch(92% 0.005 85);
}

[data-theme="medulla-dark"] .fc .fc-button:hover {
  background-color: oklch(23% 0.012 270);
  border-color: oklch(25% 0.012 270);
}

[data-theme="medulla-dark"] .fc .fc-button-primary {
  background-color: oklch(88% 0.005 85);
  border-color: oklch(88% 0.005 85);
  color: oklch(18% 0.015 270);
}

[data-theme="medulla-dark"] .fc .fc-button-primary:hover {
  background-color: oklch(92% 0.005 85);
  border-color: oklch(92% 0.005 85);
}

[data-theme="medulla-dark"] .fc .fc-button-group {
  background-color: oklch(20% 0.01 270);
}

[data-theme="medulla-dark"] .fc .fc-button-group > .fc-button {
  color: oklch(88% 0.005 85) !important;
}

[data-theme="medulla-dark"] .fc .fc-button-group > .fc-button:hover:not(.fc-button-active) {
  background-color: oklch(24% 0.01 270) !important;
  color: oklch(95% 0.003 85) !important;
}

[data-theme="medulla-dark"] .fc .fc-button-group > .fc-button-active {
  background-color: oklch(88% 0.005 85) !important; /* dark theme primary */
  border: 1px solid oklch(88% 0.005 85) !important;
  color: oklch(18% 0.015 270) !important; /* dark text on light bg */
  font-weight: 600 !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 1px 3px 0 rgb(0 0 0 / 0.2);
}

[data-theme="medulla-dark"] .fc .fc-button-active {
  background-color: oklch(88% 0.005 85) !important;
  border-color: oklch(88% 0.005 85) !important;
  color: oklch(18% 0.015 270) !important;
}

[data-theme="medulla-dark"] .fc-event {
  background-color: oklch(62% 0.14 195);
  color: oklch(10% 0.02 195);
}

[data-theme="medulla-dark"] .fc .fc-timegrid-now-indicator-line {
  border-color: oklch(62% 0.20 25);
}

/* ===== APPOINTMENT SPECIFIC STYLES ===== */

/* No-show appointments with diagonal stripes */
.fc-event.appointment-no-show {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, 0.3) 10px,
    rgba(255, 255, 255, 0.3) 20px
  );
}

/* Telemedicine icon in event - positioned top right */
.fc-event {
  position: relative;
}

.fc-event-telemedicine-icon {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 14px;
  height: 14px;
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
}

 @plugin "daisyui/theme" {
  name: "medulla-dark";
  default: false;
  prefersdark: true;
  color-scheme: "dark";
  
  /* 
   * BASE COLORS
   * Dark backgrounds with subtle warm undertones to prevent stark blue-light feel
   * Inverted hierarchy from light theme
   */
  --color-base-100: oklch(16% 0.008 270);       /* Deep charcoal - main backgrounds */
  --color-base-200: oklch(19% 0.01 270);        /* Slightly lighter - secondary surfaces */
  --color-base-300: oklch(23% 0.012 270);       /* Card borders, dividers */
  --color-base-content: oklch(92% 0.005 85);    /* Soft white text - easy on eyes */
  
  /* 
   * PRIMARY - Sophisticated Light Gray
   * In dark mode, the primary shifts to a light, sophisticated gray
   * Still maintains authority but doesn't overwhelm in dark environment
   */
  --color-primary: oklch(88% 0.005 85);         /* Refined light gray */
  --color-primary-content: oklch(18% 0.015 270); /* Dark text on light primary */
  
  /* 
   * SECONDARY - Muted Slate
   * Darker than light mode secondary for proper dark theme hierarchy
   */
  --color-secondary: oklch(38% 0.025 255);      /* Muted clinical slate */
  --color-secondary-content: oklch(95% 0 0);    /* Light text */
  
  /* 
   * ACCENT - Vibrant Teal (signature color maintained)
   * Slightly more vibrant in dark mode for visibility
   * This is your brand signature - stays recognizable
   */
  --color-accent: oklch(62% 0.14 195);          /* Vibrant intelligent teal */
  --color-accent-content: oklch(10% 0.02 195);  /* Very dark text */
  
  /* 
   * NEUTRAL - Deep Carbon
   */
  --color-neutral: oklch(25% 0.012 270);        /* Deep neutral */
  --color-neutral-content: oklch(92% 0.005 85); /* Soft white */
  
  /* 
   * SEMANTIC COLORS
   * Slightly desaturated for dark mode comfort
   * Still clear and distinct for clinical contexts
   */
  
  /* INFO - Softer Diagnostic Blue */
  --color-info: oklch(68% 0.12 235);            /* Softer blue for dark bg */
  --color-info-content: oklch(95% 0.01 235);    /* Light text */
  
  /* SUCCESS - Healthy Green (slightly muted) */
  --color-success: oklch(72% 0.14 150);         /* Softer green */
  --color-success-content: oklch(95% 0.01 150); /* Light text */
  
  /* WARNING - Gentle Amber */
  --color-warning: oklch(76% 0.13 75);          /* Softer amber */
  --color-warning-content: oklch(18% 0.026 75); /* Dark text */
  
  /* ERROR - Clear Red */
  --color-error: oklch(62% 0.20 25);            /* Clear but not harsh red */
  --color-error-content: oklch(95% 0.01 25);    /* Light text */
  
  /* 
   * BORDER RADIUS
   * Identical to light theme for consistency
   */
  --radius-selector: 0.75rem;
  --radius-field: 0.375rem;
  --radius-box: 0.625rem;
  --radius-badge: 0.5rem;
  --radius-btn: 0.5rem;
  
  /* 
   * SIZING
   * Identical to light theme
   */
  --size-selector: 0.3rem;
  --size-field: 0.3rem;
  
  /* 
   * DEPTH & EFFECTS
   * Slightly increased depth for better card separation in dark mode
   */
  --border: 1px;
  --depth: 0.08;                                /* Subtle elevation */
  --noise: 0;
  
  /* 
   * CUSTOM PROPERTIES
   */
  --transition-speed: 200ms;
  --focus-ring: oklch(62% 0.14 195);            /* Accent teal for focus */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
}

/**
 * AI ICON BUTTON
 * Custom styling for the Medulla AI icon button with sparkle hover effect
 */
.ai-icon-button {
  position: relative;
  padding: 0.5rem;
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  color: oklch(55% 0.12 195); /* accent color */
  cursor: pointer;
  transition: all 200ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ai-icon-button:hover {
  background: oklch(55% 0.12 195 / 0.1); /* subtle accent background */
  transform: scale(1.05);
}

/* Gradient sparkle effect on hover */
.ai-icon-button:hover svg {
  animation: sparkle 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 8px oklch(55% 0.12 195 / 0.6));
}

@keyframes sparkle {
  0%, 100% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
  25% {
    opacity: 0.8;
    transform: rotate(-5deg) scale(1.1);
  }
  50% {
    opacity: 1;
    transform: rotate(5deg) scale(1.15);
  }
  75% {
    opacity: 0.9;
    transform: rotate(-3deg) scale(1.05);
  }
}

/* Focus state for accessibility */
.ai-icon-button:focus {
  outline: 2px solid oklch(55% 0.12 195);
  outline-offset: 2px;
}

.ai-icon-button:focus:not(:focus-visible) {
  outline: none;
}

/* Dark mode support */
[data-theme="medulla-dark"] .ai-icon-button {
  color: oklch(62% 0.14 195);
}

[data-theme="medulla-dark"] .ai-icon-button:hover {
  background: oklch(62% 0.14 195 / 0.15);
}

[data-theme="medulla-dark"] .ai-icon-button:hover svg {
  filter: drop-shadow(0 0 10px oklch(62% 0.14 195 / 0.8));
}