/**
 * @fileoverview Amditis Theme V2 - Core CSS Utilities & Effects
 *
 * This stylesheet provides custom utility classes and visual effects for the
 * Amditis V2 editorial/archival theme. It complements the Tailwind configuration
 * in amditis-config.js with CSS-only features.
 *
 * ## Sections
 *
 * 1. **Font Imports** - Google Fonts for display and body typography
 * 2. **CSS Variables** - Theme tokens for consistent styling
 * 3. **Base Styles** - Body background, text selection, scrollbar
 * 4. **Paper Overlay** - Textured background effect
 * 5. **Navigation** - Scrolled nav state and nav link animations
 * 6. **Reveal Sections** - Scroll-triggered animations
 * 7. **Stagger Animations** - Sequenced entrance effects
 * 8. **Deckle Card** - Glass/paper card styling
 * 9. **Drawer** - Slide-out panel component
 * 10. **Interactive Components** - Buttons, form elements
 * 11. **Responsive Type** - Fluid typography handling
 * 12. **Legacy Compatibility** - Mappings from V1 classes
 *
 * @module AmditisCSSV2
 * @requires amditis-config.js (Tailwind extension)
 * @see {@link https://jamditis.github.io/tools/} Live implementation
 */

/* ==========================================================================
   1. FONT IMPORTS
   ========================================================================== */

/**
 * Google Fonts import for Amditis V2 typography.
 * - Fraunces: Elegant variable serif for display text (weights 300, 900, italic)
 * - Plus Jakarta Sans: Clean sans-serif for body (weights 300-600)
 */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,900;1,9..144,300&family=Plus+Jakarta+Sans:wght@300;400;600&display=swap');

/* ==========================================================================
   2. CSS VARIABLES
   ========================================================================== */

/**
 * Theme CSS custom properties.
 * These provide fallback values and are used by components that may exist
 * outside of Tailwind's processing.
 */
:root {
    --canvas: #ede6d4;
    --ink: #121212;
    --clay: #d6cdb7;
    --mist: #6b6b6b;
    --accent: #3d4b40;
}

/* ==========================================================================
   3. BASE STYLES
   ========================================================================== */

/**
 * Base body styling.
 * Sets the cream canvas background and dark ink text color.
 */
body {
    background-color: #ede6d4;
    color: #121212;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/**
 * Text selection styling.
 * Uses accent green background with canvas text.
 */
::selection {
    background-color: var(--accent);
    color: var(--canvas);
}

/**
 * Focus visible styling.
 * Accessible focus indicator using accent color.
 */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

/**
 * Custom scrollbar styling for WebKit browsers.
 * - Track: Matches canvas background
 * - Thumb: Clay with accent hover state
 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--canvas); }
::-webkit-scrollbar-thumb { background: var(--clay); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ==========================================================================
   4. PAPER OVERLAY - Textured Background Effect
   ========================================================================== */

/**
 * .paper-overlay
 *
 * Applies a subtle paper texture over the entire page.
 * Uses a natural paper pattern with a soft radial gradient.
 *
 * Properties:
 * - Fixed position covering entire viewport
 * - pointer-events: none to allow clicking through
 * - High z-index (1) to appear above background
 * - 50% opacity for subtle effect
 */
.paper-overlay {
    position: fixed;
    inset: 0;
    background-image:
        url("https://www.transparenttextures.com/patterns/natural-paper.png"),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.2) 0%, transparent 100%);
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
}

/* ==========================================================================
   5. NAVIGATION
   ========================================================================== */

/**
 * .scrolled-nav
 *
 * Applied to navigation when page is scrolled.
 * Adds frosted glass effect and bottom border.
 */
.scrolled-nav {
    background: rgba(237, 230, 212, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(18, 18, 18, 0.08);
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/**
 * .nav-link
 *
 * Navigation link with animated underline effect.
 */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--ink);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* ==========================================================================
   6. REVEAL SECTIONS - Scroll-triggered Animations
   ========================================================================== */

/**
 * .reveal-section
 *
 * Section that animates in when scrolled into view.
 * Requires JavaScript IntersectionObserver to add .visible class.
 */
.reveal-section {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   7. STAGGER ANIMATIONS - Sequenced Entrance Effects
   ========================================================================== */

/**
 * Staggered entrance animation system.
 * Child elements animate in sequence when parent becomes visible.
 */
.stagger-child {
    opacity: 0;
    transform: translateY(10px);
}

.visible .stagger-child {
    animation: pageIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }

@keyframes pageIn {
    0% { opacity: 0; transform: translateY(15px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   8. DECKLE CARD - Glass/Paper Card Styling
   ========================================================================== */

/**
 * .deckle-card
 *
 * Card component with frosted glass effect.
 * Subtle white background with soft shadow.
 */
.deckle-card {
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(18, 18, 18, 0.05);
    box-shadow: 0 15px 50px -10px rgba(18, 18, 18, 0.05);
}

/**
 * .deckle-card-solid
 *
 * Solid white card variant for higher contrast content.
 */
.deckle-card-solid {
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(18, 18, 18, 0.08);
    box-shadow: 0 15px 50px -10px rgba(18, 18, 18, 0.08);
}

/* ==========================================================================
   9. DRAWER - Slide-out Panel Component
   ========================================================================== */

/**
 * Drawer component states.
 * Used for mobile navigation and side panels.
 */
.drawer-closed {
    transform: translateX(100%);
}

.drawer-open {
    transform: translateX(0);
}

/* ==========================================================================
   10. INTERACTIVE COMPONENTS
   ========================================================================== */

/**
 * .btn-primary
 *
 * Primary button with ink background and canvas text.
 */
.btn-primary {
    background-color: var(--ink);
    color: var(--canvas);
    padding: 0.625rem 1.5rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--accent);
}

/**
 * .btn-outline
 *
 * Outline button with ink border.
 */
.btn-outline {
    background-color: transparent;
    color: var(--ink);
    border: 1px solid rgba(18, 18, 18, 0.2);
    padding: 0.625rem 1.5rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    border-color: var(--ink);
    background-color: var(--ink);
    color: var(--canvas);
}

/**
 * .input-field
 *
 * Form input styling.
 */
.input-field {
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(18, 18, 18, 0.1);
    padding: 0.75rem 1rem;
    color: var(--ink);
    transition: border-color 0.3s ease;
}

.input-field:focus {
    border-color: var(--accent);
    outline: none;
}

.input-field::placeholder {
    color: var(--mist);
}

/**
 * Status indicators
 */
.status-active {
    width: 0.625rem;
    height: 0.625rem;
    background-color: var(--accent);
    animation: pulse 2s infinite;
}

/* ==========================================================================
   11. RESPONSIVE TYPE - Fluid Typography Handling
   ========================================================================== */

/**
 * Fluid title sizing for mobile.
 * Ensures large display text scales appropriately.
 */
@media (max-width: 640px) {
    .fluid-title {
        font-size: 14vw !important;
    }
}

/* ==========================================================================
   12. SECTION DIVIDERS
   ========================================================================== */

/**
 * .section-header
 *
 * Section header with bottom border divider.
 */
.section-header {
    border-bottom: 1px solid rgba(18, 18, 18, 0.1);
    padding-bottom: 2.5rem;
    margin-bottom: 3rem;
}

/**
 * .section-label
 *
 * Small uppercase label text.
 */
.section-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--mist);
}

/* ==========================================================================
   13. LEGACY COMPATIBILITY - V1 Class Mappings
   ========================================================================== */

/**
 * These provide compatibility with pages still using V1 class names.
 * The classes map old dark theme colors to appropriate V2 equivalents.
 */

/* Background mappings */
.bg-void { background-color: var(--canvas); }
.bg-panel { background-color: rgba(255, 255, 255, 0.3); }
.bg-surface { background-color: rgba(255, 255, 255, 0.5); }

/* Text mappings */
.text-chrome { color: var(--ink); }
.text-acid { color: var(--accent); }
.text-signal { color: #c44; }
.text-ice { color: var(--accent); }

/* Border mappings */
.border-acid { border-color: var(--accent); }
.border-signal { border-color: #c44; }
.border-ice { border-color: var(--accent); }

/* Accent background mappings */
.bg-acid { background-color: var(--accent); }
.bg-signal { background-color: #c44; }
.bg-ice { background-color: var(--accent); }
.bg-acidDim { background-color: rgba(61, 75, 64, 0.1); }
.bg-signalDim { background-color: rgba(204, 68, 68, 0.1); }
.bg-iceDim { background-color: rgba(61, 75, 64, 0.1); }

/* V1 utility class compatibility */
.clip-notch,
.clip-notch-top {
    /* Disable clip paths in V2 - use border styles instead */
    clip-path: none;
}

.crt-overlay {
    /* Disable CRT effect in V2 */
    display: none;
}

.glitch-text::before,
.glitch-text::after {
    /* Disable glitch effect in V2 */
    display: none;
}

/* ==========================================================================
   14. ACCORDION - Collapsible Content Component
   ========================================================================== */

/**
 * Accordion component styles.
 * Uses max-height animation for smooth expand/collapse transitions.
 */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
}

.accordion-item.active .accordion-content {
    max-height: 1000px;
    transition: max-height 0.5s ease-in-out;
}

.accordion-icon {
    transition: transform 0.3s ease;
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}

/* ==========================================================================
   15. CODE & SYNTAX HIGHLIGHTING
   ========================================================================== */

/**
 * Syntax highlighting using V2 color palette.
 */
.syntax-keyword { color: #8b5a2b; }
.syntax-string { color: var(--accent); }
.syntax-func { color: #2a5a8b; }
.syntax-comment { color: var(--mist); font-style: italic; }

/**
 * Code block styling
 */
pre, code {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

pre {
    background-color: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(18, 18, 18, 0.08);
    padding: 1.5rem;
    overflow-x: auto;
}

code {
    background-color: rgba(255, 255, 255, 0.4);
    padding: 0.125rem 0.375rem;
    font-size: 0.875em;
}

pre code {
    background: none;
    padding: 0;
}

/* ==========================================================================
   16. UTILITY CLASSES
   ========================================================================== */

/**
 * Text balance for better line breaks
 */
.text-balance {
    text-wrap: balance;
}

/**
 * Ink border utilities
 */
.border-ink-5 { border-color: rgba(18, 18, 18, 0.05); }
.border-ink-10 { border-color: rgba(18, 18, 18, 0.1); }
.border-ink-20 { border-color: rgba(18, 18, 18, 0.2); }