/**
 * InkNova Production Global Stylesheet
 * 
 * Provides fallback layouts, foundational resets, brand color tokens,
 * and strict SVG/vector bounding constraints.
 *
 * @package InkNova
 * @version 1.0.0
 */

/* ==========================================================================
   1. Brand Design Tokens & CSS Variables
   ========================================================================== */
:root {
    --in-navy: #0F3460;
    --in-navy-dark: #081e38;
    --in-navy-light: #184780;
    --in-cyan: #1E88E5;
    --in-cyan-light: #42a5f5;
    --in-amber: #E28743;
    --in-amber-light: #f4a162;
    --in-paper: #F8FAFC;
    --in-card: #FFFFFF;
    --in-border: #E2E8F0;

    --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ==========================================================================
   2. Modern Reset & Box Sizing
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-family: var(--font-sans);
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    background-color: var(--in-paper);
    color: #1e293b;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--in-paper);
    color: #334155;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   3. Strict SVG & Vector Graphic Bounding Constraints
   (Prevents unconstrained SVGs from blowing up to full screen if JS/CDN fails)
   ========================================================================== */
svg {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    overflow: hidden;
    flex-shrink: 0;
}

svg:not([width]):not([height]) {
    width: 1.25rem;
    height: 1.25rem;
    max-width: 100%;
}

/* Explicit Utility Dimensions */
.w-3 { width: 0.75rem !important; }
.h-3 { height: 0.75rem !important; }
.w-3\.5 { width: 0.875rem !important; }
.h-3\.5 { height: 0.875rem !important; }
.w-4 { width: 1rem !important; }
.h-4 { height: 1rem !important; }
.w-5 { width: 1.25rem !important; }
.h-5 { height: 1.25rem !important; }
.w-6 { width: 1.5rem !important; }
.h-6 { height: 1.5rem !important; }
.w-7 { width: 1.75rem !important; }
.h-7 { height: 1.75rem !important; }
.w-8 { width: 2rem !important; }
.h-8 { height: 2rem !important; }
.w-10 { width: 2.5rem !important; }
.h-10 { height: 2.5rem !important; }
.w-12 { width: 3rem !important; }
.h-12 { height: 3rem !important; }
.w-16 { width: 4rem !important; }
.h-16 { height: 4rem !important; }

.shrink-0 { flex-shrink: 0 !important; }

/* Media & Image Bounds */
img, picture, video, canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

img.object-contain {
    object-fit: contain;
}

/* ==========================================================================
   4. Typography Utilities
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--in-navy);
    margin-top: 0;
    line-height: 1.25;
}

.font-heading { font-family: var(--font-heading) !important; }
.font-sans { font-family: var(--font-sans) !important; }
.font-mono { font-family: var(--font-mono) !important; }

/* Text Color Classes */
.text-in-navy { color: var(--in-navy) !important; }
.text-in-navy-dark { color: var(--in-navy-dark) !important; }
.text-in-navy-light { color: var(--in-navy-light) !important; }
.text-in-cyan { color: var(--in-cyan) !important; }
.text-in-cyan-light { color: var(--in-cyan-light) !important; }
.text-in-amber { color: var(--in-amber) !important; }
.text-in-amber-light { color: var(--in-amber-light) !important; }
.text-white { color: #ffffff !important; }

/* Background Color Classes */
.bg-in-navy { background-color: var(--in-navy) !important; }
.bg-in-navy-dark { background-color: var(--in-navy-dark) !important; }
.bg-in-cyan { background-color: var(--in-cyan) !important; }
.bg-in-cyan-light { background-color: var(--in-cyan-light) !important; }
.bg-in-amber { background-color: var(--in-amber) !important; }
.bg-in-amber-light { background-color: var(--in-amber-light) !important; }
.bg-in-paper { background-color: var(--in-paper) !important; }
.bg-in-card { background-color: var(--in-card) !important; }
.bg-white { background-color: #ffffff !important; }

/* ==========================================================================
   5. Core Layout Containers & Grid System
   ========================================================================== */
.max-w-7xl {
    max-width: 80rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.px-4 { padding-left: 1rem; padding-right: 1rem; }
.sm\:px-6 { @media (min-width: 640px) { padding-left: 1.5rem; padding-right: 1.5rem; } }
.lg\:px-8 { @media (min-width: 1024px) { padding-left: 2rem; padding-right: 2rem; } }

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }

.relative { position: relative; }
.sticky { position: sticky; }
.top-0 { top: 0; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* Brand Shadows */
.shadow-premium {
    box-shadow: 0 20px 45px -15px rgba(15, 52, 96, 0.12);
}
.shadow-glow-cyan {
    box-shadow: 0 0 30px -5px rgba(30, 136, 229, 0.45);
}
.shadow-glow-amber {
    box-shadow: 0 0 30px -5px rgba(226, 135, 67, 0.45);
}

/* Cloak helper for Alpine */
[x-cloak] {
    display: none !important;
}