/* 
 * SUNSTACK PTY LTD - DESIGN SYSTEM TOKENS 
 * PHASE 2: Core Variables and Foundation
 * 
 * Note: These tokens must be used globally instead of default Bootstrap styles.
 */

:root {
    /* Brand Colors (Tier 1) */
    --sunstack-green: #299D48;
    --sunstack-orange: #FA9D1C;
    --sunstack-red: #ED1B24;

    /* Neutrals & Surfaces (Tier 2) */
    --sunstack-dark: #070A08;
    --sunstack-deep-surface: #0D120F;
    --sunstack-surface: #131A15;
    --sunstack-card: #18211A;
    
    /* Lights & Borders */
    --sunstack-white: #FFFFFF;
    --sunstack-soft-white: #F5F7F5;
    --sunstack-muted: #A7AEA9;
    --sunstack-border: rgba(255, 255, 255, 0.10);
    --sunstack-border-light: #E4ECE6;

    /* Typography */
    --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Spacing & Layout */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 3rem;
    --space-xl: 5rem;
    
    /* Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 9999px;
    
    /* Transitions & Motion */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
}

/* Base Reset & Typography Foundation */
body {
    font-family: var(--font-primary);
    background-color: var(--sunstack-white);
    color: var(--sunstack-dark);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6, .brand, .btn-sunstack {
    font-family: var(--font-heading);
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 
 * ==========================================
 * PHASE 2: COMPONENT INVENTORY (Section 55)
 * ==========================================
 */

/* 1. Buttons */
.btn-sunstack {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 12px 18px;
    font-weight: 800;
    background: var(--sunstack-orange);
    color: var(--sunstack-dark);
    text-decoration: none;
    transition: var(--transition-fast);
}
.btn-sunstack:hover {
    background: #e08c08;
    color: var(--sunstack-dark);
}
.btn-sunstack.green {
    background: var(--sunstack-green);
    color: var(--sunstack-white);
}
.btn-sunstack.green:hover {
    background: #1e8033; /* Darker green */
    color: var(--sunstack-white);
}
.btn-sunstack.white {
    background: var(--sunstack-white);
    color: var(--sunstack-dark);
}
.btn-sunstack.block {
    width: 100%;
}

/* 2. Cards */
.card-pkg {
    background: var(--sunstack-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--sunstack-border-light);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: var(--transition-normal);
}
.card-pkg:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(16,32,24,0.08);
}
.card-pkg.hot {
    border: 2px solid var(--sunstack-green);
    box-shadow: 0 16px 36px rgba(41, 157, 72, 0.16);
}

/* 3. Forms */
.sunstack-form {
    background: var(--sunstack-white);
    color: var(--sunstack-dark);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: 0 18px 50px rgba(0,0,0,0.15);
}
.sunstack-input {
    width: 100%;
    border: 1px solid var(--sunstack-border-light);
    border-radius: var(--radius-sm);
    padding: 11px;
    background: var(--sunstack-soft-white);
    transition: var(--transition-fast);
}
.sunstack-input:focus {
    outline: none;
    border-color: var(--sunstack-green);
    box-shadow: 0 0 0 3px rgba(41, 157, 72, 0.15);
}

/* 4. Badges & Tags */
.sunstack-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--sunstack-green);
    color: var(--sunstack-white);
    font-size: 12px;
    font-weight: 800;
    border-radius: var(--radius-pill);
    padding: 4px 10px;
}

/* 5. Signature Energy Ring (Placeholder for future interactive tools) */
.energy-ring {
    width: 40px;
    height: 40px;
    border: 3px solid var(--sunstack-border-light);
    border-top-color: var(--sunstack-orange);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}