@import "tailwindcss";
@plugin "daisyui";

@plugin "daisyui/theme" {
  name: "cupcake";
  default: true;
  prefersdark: false;
  color-scheme: "light";
  --color-base-100: oklch(97.788% 0.004 56.375);
  --color-base-200: oklch(93.982% 0.007 61.449);
  --color-base-300: oklch(91.586% 0.006 53.44);
  --color-base-content: oklch(23.574% 0.066 313.189);
  --color-primary: oklch(85% 0.138 181.071);
  --color-primary-content: oklch(43% 0.078 188.216);
  --color-secondary: oklch(89% 0.061 343.231);
  --color-secondary-content: oklch(45% 0.187 3.815);
  --color-accent: oklch(90% 0.076 70.697);
  --color-accent-content: oklch(47% 0.157 37.304);
  --color-neutral: oklch(27% 0.006 286.033);
  --color-neutral-content: oklch(92% 0.004 286.32);
  --color-info: oklch(68% 0.169 237.323);
  --color-info-content: oklch(29% 0.066 243.157);
  --color-success: oklch(69% 0.17 162.48);
  --color-success-content: oklch(26% 0.051 172.552);
  --color-warning: oklch(79% 0.184 86.047);
  --color-warning-content: oklch(28% 0.066 53.813);
  --color-error: oklch(64% 0.246 16.439);
  --color-error-content: oklch(27% 0.105 12.094);
  --radius-selector: 2rem;
  --radius-field: 2rem;
  --radius-box: 2rem;
  --size-selector: 0.3125rem;
  --size-field: 0.3125rem;
  --border: 0.5px;
  --depth: 1;
  --noise: 0;
}

@layer components {
  /* ── Three-tier glass system (Apple-style glassmorphism) ── */

  /* Tier 1 — lightest underlay, large panels / sidebars */
  .glass-underlay {
    background: rgba(255, 255, 255, 0.34);
    box-shadow:
      0 16px 44px rgba(24, 20, 12, 0.11),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  /* Tier 2 — medium capsule, nav pills / search bar */
  .glass-capsule {
    background: rgba(255, 255, 255, 0.56);
    box-shadow:
      0 8px 24px rgba(24, 20, 12, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.56);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
  }

  /* Tier 3 — densest chip, small tags / badges */
  .glass-chip {
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  /* Legacy aliases — keep backward compat during transition */
  .glass-soft {
    background: rgba(255, 255, 255, 0.34);
    box-shadow:
      0 16px 44px rgba(24, 20, 12, 0.11),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .glass-bright {
    background: rgba(255, 255, 255, 0.56);
    box-shadow:
      0 8px 24px rgba(24, 20, 12, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.56);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
  }
}

/* ── Header glass: two-layer Apple-style glassmorphism ── */

.header-glass {
  background: transparent;
}

/* Layer 1: frosted bar backdrop — fades to transparent at bottom */
.header-glass-backdrop {
  position: absolute;
  inset: 0;
  height: 350%;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 20%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.1) 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 20%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.1) 65%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Layer 2: capsule pills — denser frosted glass with inner shine */
.pill-glass {
  position: relative;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 8px 32px rgba(31, 38, 135, 0.2),
    inset 0 4px 20px rgba(255, 255, 255, 0.3);
}

/* Inner shine highlight — liquid glass refraction */
.pill-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset -10px -8px 0 -11px rgba(255, 255, 255, 1),
    inset 0 -9px 0 -8px rgba(255, 255, 255, 1);
  opacity: 0.6;
  filter: blur(1px) brightness(115%);
  pointer-events: none;
}

@plugin "daisyui/theme" {
  name: "silk";
  default: false;
  prefersdark: false;
  color-scheme: "light";
  --color-base-100: oklch(97% 0.0035 67.78);
  --color-base-200: oklch(95% 0.0081 61.42);
  --color-base-300: oklch(90% 0.0081 61.42);
  --color-base-content: oklch(40% 0.0081 61.42);
  --color-primary: oklch(23.27% 0.0249 284.3);
  --color-primary-content: oklch(94.22% 0.2505 117.44);
  --color-secondary: oklch(23.27% 0.0249 284.3);
  --color-secondary-content: oklch(73.92% 0.2135 50.94);
  --color-accent: oklch(23.27% 0.0249 284.3);
  --color-accent-content: oklch(88.92% 0.2061 189.9);
  --color-neutral: oklch(20% 0 0);
  --color-neutral-content: oklch(80% 0.0081 61.42);
  --color-info: oklch(80.39% 0.1148 241.68);
  --color-info-content: oklch(30.39% 0.1148 241.68);
  --color-success: oklch(83.92% 0.0901 136.87);
  --color-success-content: oklch(23.92% 0.0901 136.87);
  --color-warning: oklch(83.92% 0.1085 80);
  --color-warning-content: oklch(43.92% 0.1085 80);
  --color-error: oklch(75.1% 0.1814 22.37);
  --color-error-content: oklch(35.1% 0.1814 22.37);
  --radius-selector: 2rem;
  --radius-field: 1rem;
  --radius-box: 1rem;
  --size-selector: 0.28125rem;
  --size-field: 0.28125rem;
  --border: 0.5px;
  --depth: 0;
  --noise: 0;
}

@plugin "daisyui/theme" {
  name: "night";
  default: false;
  prefersdark: true;
  color-scheme: "dark";
  --color-base-100: oklch(20.768% 0.039 265.754);
  --color-base-200: oklch(19.314% 0.037 265.754);
  --color-base-300: oklch(17.86% 0.034 265.754);
  --color-base-content: oklch(84.153% 0.007 265.754);
  --color-primary: oklch(75.351% 0.138 232.661);
  --color-primary-content: oklch(15.07% 0.027 232.661);
  --color-secondary: oklch(68.011% 0.158 276.934);
  --color-secondary-content: oklch(13.602% 0.031 276.934);
  --color-accent: oklch(72.36% 0.176 350.048);
  --color-accent-content: oklch(14.472% 0.035 350.048);
  --color-neutral: oklch(27.949% 0.036 260.03);
  --color-neutral-content: oklch(85.589% 0.007 260.03);
  --color-info: oklch(68.455% 0.148 237.251);
  --color-info-content: oklch(0% 0 0);
  --color-success: oklch(78.452% 0.132 181.911);
  --color-success-content: oklch(15.69% 0.026 181.911);
  --color-warning: oklch(83.242% 0.139 82.95);
  --color-warning-content: oklch(16.648% 0.027 82.95);
  --color-error: oklch(71.785% 0.17 13.118);
  --color-error-content: oklch(14.357% 0.034 13.118);
  --radius-selector: 1rem;
  --radius-field: 1rem;
  --radius-box: 1rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 0.5px;
  --depth: 0;
  --noise: 0;
}