/* ============================================
   GLOBAL CSS - Entry Point
   Import semua CSS dari sini
   ============================================ */

/* 1. Tailwind CSS dengan custom components & utilities */
@import url('./tailwind.css');

/* 2. General styles & animations */
@import url('./style-general.css');

/* ============================================
   QUICK REFERENCE
   ============================================

Tailwind directives sudah di-setup dengan custom layers:

BASE LAYER:
- Reset styles
- Typography (h1-h6, a, code, pre)
- Accessibility focus states

COMPONENTS LAYER:
- .btn-primary          - Yellow gradient button with hover effect
- .btn-secondary        - Gray button with outline
- .btn-outline          - Light outline button
- .card                 - White card with shadows
- .card-hover           - Card dengan hover lift effect
- .input-primary        - Styled input field
- .badge-yellow/red/green - Status badges
- .section / .section-lg - Page sections
- .container-max        - Max width container
- .bg-gradient-primary/secondary - Gradient backgrounds
- .text-gradient        - Colored gradient text
- .grid-auto-fit / .grid-auto-fill - Responsive grids
- .flex-center / .flex-between / .flex-col-center - Flexbox utilities

UTILITIES LAYER:
- .glass / .glass-dark  - Glassmorphism effect
- .truncate-1/2/3       - Text truncation (1, 2, 3 lines)
- .inset-center         - Center positioning
- .hover-lift           - Hover lift effect
- .text-shadow-sm/md    - Text shadows
- .shadow-yellow-soft / .shadow-gray-soft - Colored shadows

GENERAL STYLES FEATURES:
- CSS Variables (:root) untuk theme colors
- Animations: fadeIn, slideInUp, slideInDown, pulse, bounce, shimmer, glow, dll
- Dark mode support (prefers-color-scheme)
- Print styles
- Accessibility (prefers-reduced-motion)
- Performance optimizations (retina display support)

ANIMATIONS AVAILABLE:
- .animate-fade-in
- .animate-slide-in-up / down / left / right
- .animate-pulse
- .animate-bounce
- .animate-shimmer
- .animate-glow
- .animate-spin-slow
- .animate-count-up
- .animate-float
- .animate-gradient

USAGE EXAMPLES:
<button class="btn-primary animate-fade-in">Click me</button>
<div class="card card-hover">Card</div>
<div class="grid grid-auto-fit gap-4">...</div>
<input class="input-primary" type="text" />
<h1 class="text-gradient">Heading</h1>
<div class="glass p-4">Glassmorphic content</div>

============================================ */

/* Version Control */
:root {
    --global-css-version: "1.0.0";
}

/* Initialization Message (remove in production) */
body::before {
    content: attr(data-init-message);
    display: none;
}

/* Quick debugging helper - uncomment to see grid */
/* body {
    background-image: 
        linear-gradient(to right, rgba(255, 214, 0, 0.1) 1px, transparent 1px);
    background-size: 10px 10px;
} */