/*
 * Tailwind CSS - Minimalist Line Style Theme
 *
 * This stylesheet implements a clean, line-based design system
 * using Tailwind CSS utility classes as the foundation.
 *
 * Design Principles:
 * - No shadows (flat design)
 * - 1px borders (#e5e7eb)
 * - Sharp/minimal corners (max 4px border-radius)
 * - Grayscale palette with single accent color
 * - Line icons only (no filled icons)
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ================================
   Base Layer - Custom Defaults
   ================================ */

@layer base {
    /* Typography */
    html {
        font-family: 'Inter', 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        @apply text-gray-900 bg-white;
        line-height: 1.6;
    }

    /* Headings */
    h1, h2, h3, h4, h5, h6 {
        @apply font-semibold text-gray-900;
        line-height: 1.3;
    }

    h1 { @apply text-3xl; }
    h2 { @apply text-2xl; }
    h3 { @apply text-xl; }
    h4 { @apply text-lg; }
    h5 { @apply text-base; }
    h6 { @apply text-sm; }

    /* Links */
    a {
        @apply text-gray-900 no-underline;
    }

    a:hover {
        @apply underline;
    }

    /* Focus States - Line style */
    :focus {
        outline: none;
    }

    :focus-visible {
        @apply ring-1 ring-gray-900 ring-offset-1;
    }
}

/* ================================
   Components Layer - UI Components
   ================================ */

@layer components {
    /* Buttons */
    .btn {
        @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium transition-colors;
        @apply border focus:outline-none focus-visible:ring-1 focus-visible:ring-gray-900;
    }

    .btn-primary {
        @apply btn border-gray-900 bg-gray-900 text-white;
        @apply hover:bg-gray-800;
    }

    .btn-secondary {
        @apply btn border-gray-300 bg-white text-gray-700;
        @apply hover:bg-gray-50;
    }

    .btn-outline {
        @apply btn border-gray-900 bg-transparent text-gray-900;
        @apply hover:bg-gray-900 hover:text-white;
    }

    /* Cards - No shadow, border only */
    .card {
        @apply border border-gray-200 bg-white;
    }

    .card-header {
        @apply px-6 py-4 border-b border-gray-200;
    }

    .card-body {
        @apply p-6;
    }

    .card-footer {
        @apply px-6 py-4 border-t border-gray-200;
    }

    /* Form Controls */
    .form-input {
        @apply w-full px-4 py-3 border border-gray-300 bg-white text-gray-900;
        @apply placeholder-gray-400;
        @apply focus:border-gray-900 focus:outline-none;
    }

    .form-label {
        @apply block text-sm font-medium text-gray-700 mb-1;
    }

    .form-select {
        @apply form-input appearance-none bg-no-repeat;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 0.75rem center;
        background-size: 1.5em 1.5em;
        padding-right: 2.5rem;
    }

    .form-checkbox {
        @apply w-4 h-4 border border-gray-300 text-gray-900 focus:ring-0;
    }

    /* Tables */
    .table {
        @apply w-full text-sm text-left;
    }

    .table thead {
        @apply border-b border-gray-200;
    }

    .table th {
        @apply px-4 py-3 font-medium text-gray-500 uppercase tracking-wider text-xs;
    }

    .table td {
        @apply px-4 py-4 border-b border-gray-100;
    }

    .table tbody tr:hover {
        @apply bg-gray-50;
    }

    /* Badges */
    .badge {
        @apply inline-flex items-center px-2 py-0.5 text-xs font-medium border;
    }

    .badge-default {
        @apply badge border-gray-300 text-gray-700 bg-gray-50;
    }

    .badge-success {
        @apply badge border-green-300 text-green-700 bg-green-50;
    }

    .badge-warning {
        @apply badge border-yellow-300 text-yellow-700 bg-yellow-50;
    }

    .badge-danger {
        @apply badge border-red-300 text-red-700 bg-red-50;
    }

    /* Alerts */
    .alert {
        @apply px-4 py-3 text-sm border;
    }

    .alert-info {
        @apply alert border-gray-300 bg-gray-50 text-gray-700;
    }

    .alert-success {
        @apply alert border-green-300 bg-green-50 text-green-700;
    }

    .alert-warning {
        @apply alert border-yellow-300 bg-yellow-50 text-yellow-700;
    }

    .alert-danger {
        @apply alert border-red-300 bg-red-50 text-red-700;
    }
}

/* ================================
   Utilities Layer - Custom Utilities
   ================================ */

@layer utilities {
    /* Minimal border radius */
    .rounded-minimal {
        border-radius: 2px;
    }

    /* Line separator */
    .line-separator {
        @apply border-t border-gray-200;
    }

    /* Text utilities */
    .text-muted {
        @apply text-gray-500;
    }

    /* Hide scrollbar but keep functionality */
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
}