@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

@theme {
  --font-family-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --font-family-bodoni: 'Bodoni Moda', serif;
  --color-nhd-blue: #143e79;
  --color-nhd-green: #8da733;
  --color-nhd-pale: #fdf3de;
  --color-nhd-brown: #8b5629;
}

@layer base {
    input[type="text"], 
    input[type="email"], 
    input[type="password"], 
    input[type="search"], 
    input[type="number"], 
    input[type="date"] {
        @apply flex h-10 w-full rounded-xl border border-gray-300 bg-neutral-100/40 backdrop-blur-sm px-3 py-2 text-sm placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:inset-ring-1 focus:inset-ring-neutral-400 focus:ring-nhd-blue transition-all duration-200 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50;
    }
    
    textarea {
        @apply flex min-h-[120px] w-full rounded-xl border border-gray-300 bg-neutral-100/40 backdrop-blur-sm px-3 py-2 text-sm placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:inset-ring-1 focus:inset-ring-neutral-400 focus:ring-nhd-blue transition-all duration-200 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50;
    }
    
    input[type="file"] {
        @apply file:border-0 file:bg-transparent file:text-sm file:font-medium;
    }

    button {
        @apply flex items-center justify-center border border-gray-300 text-sm hover:cursor-pointer focus:outline-none focus:ring-2 focus:inset-ring-1 focus:inset-ring-nhd-pale focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50 bg-nhd-blue hover:bg-nhd-blue/90 text-white font-medium py-3 px-4 rounded-xl transition-all duration-200 hover:shadow-xl;
        font-family: var(--font-family-sans) !important;
        position: relative;
        overflow: hidden;
    }

    button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s;
        z-index: 1;
    }

    button:hover::before {
        left: 100%;
    }

    button > * {
        position: relative;
        z-index: 2;
    }

    select {
        @apply flex items-center justify-center h-10 w-full rounded-xl border border-gray-300 bg-neutral-100/40 px-3 py-2 text-sm font-medium text-nhd-blue hover:border-nhd-blue/20 hover:cursor-pointer focus:outline-none focus:ring-2 focus:inset-ring-1 focus:inset-ring-nhd-green focus:border-transparent transition-all duration-200 disabled:cursor-not-allowed disabled:opacity-50;
    }

    .index-form {
        @apply sm:md:lg:px-0 px-4;
    }


    p, h1, h2, h3, h4, h5, h6,
    span, label, a, li, dt, dd, th, td, caption,
    blockquote, pre, code, strong, em, b, i, u, small, sub, sup, mark, del, ins,
    button, input[type="button"], input[type="submit"], input[type="reset"],
    textarea, select, option,
    figcaption, legend, summary, cite, q {
        font-family: var(--font-family-sans);
    } 

    .form-row {
        @apply flex flex-row gap-4;
    }

    .form-col {
        @apply flex flex-col gap-1;
    }

    .form-group {
        @apply flex flex-col gap-1 w-full pb-4;
    }

    #signup-form label {
        @apply font-family-bodoni font-semibold;
    }

    .glass-card {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 
          0 8px 32px rgba(0, 0, 0, 0.1),
          inset 0 1px 0 rgba(255, 255, 255, 0.5),
          inset 0 -1px 0 rgba(255, 255, 255, 0.1),
          inset 0 0 20px 10px rgba(255, 255, 255, 0.1);
        position: relative;
        overflow: hidden;
    }
    
    .glass-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.8),
          transparent
        );
    }
    
    .glass-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        height: 100%;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.8),
          transparent,
          rgba(255, 255, 255, 0.3)
        );
    }

    .toast-success {
        @apply bg-green-200/50;
    }
    
    .toast-error {
        background: rgba(254, 242, 242, 0.95);
    }
    
    .toast-info {
        background: rgba(239, 246, 255, 0.95);
    }
    
    .toast-warning {
        background: rgba(255, 251, 235, 0.95);
    }

    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 3px;
        margin: 2px;
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
        transition: background 0.2s ease;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.3);
    }

    ::-webkit-scrollbar-corner {
        background: transparent;
    }

    * {
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    }
}