/*
 * assets/css/app.css
 * Tailwind v4 custom theme + global styles
 * ============================================================
 */

/*@import "tailwindcss";*/

/*  Custom theme tokens (Tailwind v4 syntax) ─ */
@theme {
    /* Brand palette */
    --color-primary-50:  #E8F2F8;
    --color-primary-100: #D0E5F1;
    --color-primary-200: #A5C9E2;
    --color-primary-300: #78ACD0;
    --color-primary-400: #438CB8;
    --color-primary-500: #1769AA; /* main brand */
    --color-primary-600: #155E96;   
    --color-primary-700: #124F7E;
    --color-primary-800: #0E4167;
    --color-primary-900: #0A304D;
    --color-primary-950: #061F32;

    --modding-gold-50:  #FFFBE8;
    --modding-gold-100: #FFF5BF;
    --modding-gold-200: #FFEA80;
    --modding-gold-300: #FFDC40;
    --modding-gold-400: #FFD01A;
    --modding-gold-500: #FFC800; /* main brand */
    --modding-gold-600: #E6B400;
    --modding-gold-700: #C79B00;
    --modding-gold-800: #9D7900;
    --modding-gold-900: #705600;
    --modding-gold-950: #463500;

    --modding-orange-50:  #FFF7E9;
    --modding-orange-100: #FFEBCB;
    --modding-orange-200: #FFD79A;
    --modding-orange-300: #FFC269;
    --modding-orange-400: #FFA83D;
    --modding-orange-500: #F7941D; /* main brand */
    --modding-orange-600: #DB7C12;
    --modding-orange-700: #B7620D;
    --modding-orange-800: #8F4C0A;
    --modding-orange-900: #663607;
    --modding-orange-950: #402104;

    --modding-red-50:  #FFF3F1;
    --modding-red-100: #FFE2DF;
    --modding-red-200: #FFC5C0;
    --modding-red-300: #F8A09A;
    --modding-red-400: #EF6B64;
    --modding-red-500: #E53935; /* main brand */
    --modding-red-600: #CC302D;
    --modding-red-700: #A92523;
    --modding-red-800: #831E1C;
    --modding-red-900: #5D1615;
    --modding-red-950: #390D0C;

    /* Font */
    --font-family-sans: 'Noto Sans Thai', 'Sarabun', system-ui, sans-serif;

    /* Border radius */
    --radius-xl:  0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
}

/*  Base ─ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-family-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*  Prose (article content)  */
.prose h2 { @apply text-2xl font-bold text-gray-900 mt-10 mb-4; }
.prose h3 { @apply text-xl  font-bold text-gray-800 mt-8  mb-3; }
.prose h4 { @apply text-lg  font-semibold text-gray-800 mt-6 mb-2; }
.prose p  { @apply text-gray-700 leading-relaxed mb-4; }
.prose ul { @apply list-disc pl-5 mb-4 space-y-1 text-gray-700; }
.prose ol { @apply list-decimal pl-5 mb-4 space-y-1 text-gray-700; }
.prose a  { @apply text-primary-600 hover:underline; }
.prose blockquote { @apply border-l-4 border-primary-400 pl-4 italic text-gray-600 my-6; }
.prose img { @apply rounded-xl my-6 w-full; }
.prose table { @apply w-full border-collapse text-sm mb-4; }
.prose th { @apply bg-gray-50 border border-gray-200 px-3 py-2 font-semibold text-left; }
.prose td { @apply border border-gray-200 px-3 py-2; }
.prose pre { @apply bg-gray-900 text-gray-100 rounded-xl p-4 overflow-auto my-4 text-sm; }
.prose code { @apply bg-gray-100 text-gray-800 rounded px-1 py-0.5 text-sm; }
.prose pre code { @apply bg-transparent text-inherit; }

/*  Focus visible  */
:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

/*  Line clamp ─ */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*  Skeleton loader  */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 0.375rem;
}
@keyframes skeleton-loading {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/*  Animations ─ */
@media (prefers-reduced-motion: no-preference) {
    .animate-fade-in {
        animation: fadeIn 0.4s ease both;
    }
    .animate-slide-up {
        animation: slideUp 0.4s ease both;
    }
}
@keyframes fadeIn   { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp  { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: translateY(0) } }

/*  Print  */
@media print {
    header, footer, nav, aside, .no-print { display: none !important; }
    body { font-size: 12pt; color: #000; }
    a { color: inherit; text-decoration: underline; }
}



/* main-content ─ */
#main-content > div:not(.home) {
    padding-top: 165px;
}