/*
 * Coffee House Design System — Custom DaisyUI Theme
 * Warm espresso/brown palette with dark mode variant.
 *
 * Uses DaisyUI 4.x CSS variable format (oklch color space).
 * When upgrading to DaisyUI 5, these will still work — DaisyUI 5
 * is backward-compatible with the CSS variable approach.
 */

/* ================================================================
   LIGHT THEME — coffeehouse
   ================================================================ */
[data-theme="coffeehouse"] {
  color-scheme: light;

  /* Primary: Rich espresso brown */
  --p: 0.42 0.08 35;
  --pf: 0.35 0.08 35;        /* primary-focus (darker) */
  --pc: 0.98 0.005 80;       /* primary-content (text on primary) */

  /* Secondary: Warm cream/latte */
  --s: 0.82 0.04 75;
  --sf: 0.75 0.04 75;
  --sc: 0.25 0.03 35;

  /* Accent: Burnt orange/amber */
  --a: 0.65 0.14 55;
  --af: 0.58 0.14 55;
  --ac: 0.98 0.01 80;

  /* Neutral: Warm gray */
  --n: 0.35 0.02 60;
  --nf: 0.28 0.02 60;
  --nc: 0.96 0.005 80;

  /* Base: Warm off-white backgrounds */
  --b1: 0.985 0.005 80;      /* base-100: page background */
  --b2: 0.955 0.008 75;      /* base-200: card/section bg */
  --b3: 0.92 0.01 70;        /* base-300: borders/dividers */
  --bc: 0.25 0.02 40;        /* base-content: text */

  /* Status colors — tuned warmer */
  --su: 0.64 0.17 145;       /* success: warm green */
  --suc: 0.98 0.01 145;
  --wa: 0.75 0.15 75;        /* warning: warm amber */
  --wac: 0.25 0.03 75;
  --er: 0.55 0.18 25;        /* error: warm red */
  --erc: 0.98 0.01 25;
  --in: 0.60 0.12 245;       /* info: soft blue */
  --inc: 0.98 0.01 245;

  /* Geometry */
  --rounded-box: 0.75rem;
  --rounded-btn: 0.5rem;
  --rounded-badge: 1.5rem;
  --animation-btn: 0.2s;
  --animation-input: 0.2s;
  --btn-focus-scale: 0.98;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.5rem;
}

/* ================================================================
   DARK THEME — coffeehouse-dark
   ================================================================ */
[data-theme="coffeehouse-dark"] {
  color-scheme: dark;

  /* Primary: Lighter espresso for dark bg contrast */
  --p: 0.60 0.10 35;
  --pf: 0.55 0.10 35;
  --pc: 0.15 0.02 35;

  /* Secondary: Muted cream */
  --s: 0.50 0.04 75;
  --sf: 0.45 0.04 75;
  --sc: 0.95 0.005 80;

  /* Accent: Warm amber, slightly brighter for dark */
  --a: 0.70 0.14 55;
  --af: 0.65 0.14 55;
  --ac: 0.15 0.02 55;

  /* Neutral */
  --n: 0.25 0.015 60;
  --nf: 0.20 0.015 60;
  --nc: 0.90 0.005 80;

  /* Base: Warm dark backgrounds */
  --b1: 0.18 0.015 55;       /* base-100: page background */
  --b2: 0.22 0.015 55;       /* base-200: card/section bg */
  --b3: 0.28 0.02 55;        /* base-300: borders/dividers */
  --bc: 0.90 0.005 80;       /* base-content: text */

  /* Status colors — adjusted for dark bg */
  --su: 0.68 0.17 145;
  --suc: 0.15 0.02 145;
  --wa: 0.78 0.15 75;
  --wac: 0.15 0.02 75;
  --er: 0.62 0.18 25;
  --erc: 0.15 0.02 25;
  --in: 0.65 0.12 245;
  --inc: 0.15 0.02 245;

  /* Geometry (same as light) */
  --rounded-box: 0.75rem;
  --rounded-btn: 0.5rem;
  --rounded-badge: 1.5rem;
  --animation-btn: 0.2s;
  --animation-input: 0.2s;
  --btn-focus-scale: 0.98;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.5rem;
}

/* ================================================================
   DESIGN TOKENS — shared across both themes
   ================================================================ */
:root {
  /* Transition speeds */
  --ch-transition-fast: 150ms;
  --ch-transition-normal: 200ms;
  --ch-transition-slow: 300ms;

  /* Shadows */
  --ch-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --ch-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --ch-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Touch target minimum */
  --ch-touch-min: 44px;
}

/* ================================================================
   GLOBAL STYLES
   ================================================================ */

/* Focus indicators — WCAG 2.1 AA compliant */
:focus-visible {
  outline: 2px solid oklch(var(--p));
  outline-offset: 2px;
}

/* Touch-friendly targets */
.btn, .btn-circle {
  min-width: var(--ch-touch-min);
  min-height: var(--ch-touch-min);
}

/* Page content fade-in */
@media (prefers-reduced-motion: no-preference) {
  .ch-fade-in {
    animation: chFadeIn var(--ch-transition-normal) ease-out;
  }

  @keyframes chFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Drawer transition */
  .drawer-side {
    transition: transform var(--ch-transition-slow) ease-in-out;
  }
}

/* Stat card accent borders */
.stat-accent-primary { border-left: 4px solid oklch(var(--p)); }
.stat-accent-success { border-left: 4px solid oklch(var(--su)); }
.stat-accent-warning { border-left: 4px solid oklch(var(--wa)); }
.stat-accent-error   { border-left: 4px solid oklch(var(--er)); }
.stat-accent-info    { border-left: 4px solid oklch(var(--in)); }
.stat-accent-neutral { border-left: 4px solid oklch(var(--bc) / 0.3); }

/* Skip-to-content link (accessibility) */
.ch-skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: 0.5rem 1rem;
  background: oklch(var(--p));
  color: oklch(var(--pc));
  text-decoration: none;
  font-weight: 600;
}
.ch-skip-link:focus {
  top: 0;
}

/* Sidebar section labels */
.menu-section-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: oklch(var(--bc) / 0.5);
  padding: 0.75rem 0.5rem 0.25rem;
}

/* Sidebar brand block */
.ch-sidebar-brand {
  border-bottom: 1px solid oklch(var(--bc) / 0.1);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Sidebar user block */
.ch-sidebar-user {
  flex-shrink: 0;
  border-top: 1px solid oklch(var(--bc) / 0.1);
  padding-top: 0.75rem;
  margin-top: 0.5rem;
}

/* Toast container */
#ch-toast-container {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-end;
  pointer-events: none;
}
#ch-toast-container .alert {
  pointer-events: auto;
  max-width: 24rem;
}

/* Alert dismiss animation */
@media (prefers-reduced-motion: no-preference) {
  .ch-alert-dismiss {
    animation: chAlertDismiss var(--ch-transition-normal) ease-out forwards;
  }
  @keyframes chAlertDismiss {
    to { opacity: 0; transform: translateX(100%); }
  }
}

/* Empty state styling */
.ch-empty-state {
  text-align: center;
  padding: 3rem 1rem;
}
.ch-empty-state svg {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  opacity: 0.4;
}

/* EasyMDE editor dark mode (Beany) */
[data-theme="coffeehouse-dark"] .EasyMDEContainer .CodeMirror {
  background: oklch(var(--b2));
  color: oklch(var(--bc));
  border-color: oklch(var(--bc) / 0.2);
}
[data-theme="coffeehouse-dark"] .EasyMDEContainer .editor-toolbar {
  border-color: oklch(var(--bc) / 0.2);
  background: oklch(var(--b1));
}
[data-theme="coffeehouse-dark"] .EasyMDEContainer .editor-toolbar button {
  color: oklch(var(--bc) / 0.7);
}
[data-theme="coffeehouse-dark"] .EasyMDEContainer .editor-toolbar button:hover {
  background: oklch(var(--b3));
}
[data-theme="coffeehouse-dark"] .EasyMDEContainer .editor-preview {
  background: oklch(var(--b2));
  color: oklch(var(--bc));
}

/* EasyMDE editor light mode */
.EasyMDEContainer .CodeMirror {
  border-color: oklch(var(--bc) / 0.2);
  border-radius: var(--rounded-btn, 0.5rem);
}
.EasyMDEContainer .editor-toolbar {
  border-color: oklch(var(--bc) / 0.2);
}
.EasyMDEContainer .editor-toolbar button:hover {
  background: oklch(var(--b2));
}

/* YouTube responsive embed */
.youtube-embed {
  margin: 1rem 0;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.youtube-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* Prose images */
.prose img {
  border-radius: 0.5rem;
  max-width: 100%;
}

/* Table card wrapper */
.card-table {
  border-radius: var(--rounded-box, 0.5rem);
  overflow-x: auto;
}