/* CANBERRA EPOXY COATINGS - MASTER STYLESHEET
  Architecture: Lightweight custom overrides & UX enhancements 
*/

/* 1. Typography - Clean, modern, highly legible font (Steve Krug UX) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Barlow+Condensed:wght@600;700;800&display=swap');

/* 1.5 Design Tokens - Brand Palette & Global Variables */
:root {
    /* Primary Brand Colors */
    --clr-primary:      #1a1a2e;   /* Deep navy */
    --clr-accent:       #f59e0b;   /* Amber gold (Tailwind amber-500) */
    --clr-accent-dark:  #d97706;   /* Darker amber (Tailwind amber-600) */
    --clr-green:        #1e7e34;

    /* Surface & Background Colors */
    --clr-surface:      #f5f5f0;   /* Warm off-white */
    --clr-surface-2:    #eaeae3;
    --clr-border:       #d0d0c8;
    --clr-white:        #ffffff;

    /* Typography Colors */
    --clr-text:         #1c1c1c;
    --clr-text-muted:   #5a5a5a;

    /* UI Elements */
    --radius:           6px;
    --shadow-sm:        0 1px 3px rgba(0,0,0,.08);
    --shadow-md:        0 4px 12px rgba(0,0,0,.12);
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 2. Global UX Enhancements */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem; /* Prevents anchor links from hiding under sticky header */
}

/* Enhances readability for AI/Bot parsing and human skimming */
.text-balance {
    text-wrap: balance;
}

/* 3. Accessibility (Crucial for overall SEO score) */
a:focus-visible, 
button:focus-visible, 
input:focus-visible, 
textarea:focus-visible {
    outline: 3px solid var(--clr-accent); /* Updated from blue to gold brand accent */
    outline-offset: 3px;
    border-radius: 2px;
}

/* 4. Lightweight Premium Animations (No heavy JS libraries required) */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 5. Reusable Brand Utility Classes for New Pages */
/* Apply these classes automatically across new builds for perfect color harmony */
.bg-brand-primary { background-color: var(--clr-primary); }
.bg-brand-accent { background-color: var(--clr-accent); color: var(--clr-primary); }
.text-brand-accent { color: var(--clr-accent); }
.border-brand-accent { border-color: var(--clr-accent); }
.hover\:bg-brand-accent-dark:hover { background-color: var(--clr-accent-dark); }