/*
Theme Name: Umusol
Theme URI: https://umusol.com
Author: Umusol
Author URI: https://umusol.com
Description: Ultra-optimised WordPress theme for a web development agency. 100/100 PageSpeed, advanced SEO, Redis caching, Alpine.js, Tailwind CSS v4.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.3
License: MIT
Text Domain: umusol
Tags: performance, seo, agency, modern
*/

/* ── Design Tokens (global) ──────────────────────────────────────────────── */
:root {
    /* Brand */
    --color-primary:     #0072ff;
    --color-primary-rgb: 0, 114, 255;
    --color-primary-lt:  #3385FF;
    --color-primary-dk:  #004ACC;
    --color-accent:      #00D4FF;

    /* Neutral scale */
    --color-white:  #ffffff;
    --color-grey-50:  #f9fafb;
    --color-grey-100: #f3f4f6;
    --color-grey-200: #e5e7eb;
    --color-grey-300: #d1d5db;
    --color-grey-400: #9ca3af;
    --color-grey-500: #6b7280;
    --color-grey-600: #4b5563;
    --color-grey-700: #374151;
    --color-grey-800: #1f2937;
    --color-grey-900: #111827;
    --color-black:    #05070a;

    /* Typography */
    --font-sans:    'Outfit', system-ui, -apple-system, sans-serif;
    --font-display: 'Clash Display', 'Outfit', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

    /* Spacing */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Section padding */
    --section-py: clamp(4rem, 8vw, 8rem);

    /* Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.25rem;
    --radius-xl: 2rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.06);
    --shadow-md: 0 4px 16px -2px rgb(0 0 0 / 0.12);
    --shadow-lg: 0 12px 40px -4px rgb(0 0 0 / 0.16);
    --shadow-blue: 0 0 0 3px rgb(var(--color-primary-rgb) / 0.25);

    /* Transitions */
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast:   150ms;
    --duration-base:   250ms;
    --duration-slow:   400ms;
    --duration-slower: 600ms;

    /* Layout */
    --container-max: 1280px;
    --container-pad: clamp(1rem, 4vw, 2rem);
    --header-h: 72px;
}

/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-grey-900);
    background: var(--color-white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

img, video, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button, [role="button"] { cursor: pointer; }

/* ── Container ───────────────────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* ── Content Visibility — applied to all non-hero sections ──────────────── */
.content-visibility-auto {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

/* ── Scroll animation base state ─────────────────────────────────────────── */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity var(--duration-slower) var(--ease-out),
        transform var(--duration-slower) var(--ease-out);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Skip link ───────────────────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 600;
    z-index: 9999;
    transition: top var(--duration-fast);
}

.skip-link:focus { top: 1rem; }

/* ── Screen reader only ──────────────────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Gradient text utility ───────────────────────────────────────────────── */
.gradient-text {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

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

    .animate-on-scroll {
        opacity: 1;
        transform: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE — auto-switch from prefers-color-scheme
   Palette mirrors the dev-page service page (corporate charcoal + sky blue).
   Per-section overrides live at the bottom of each section's own CSS file.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
    :root {
        /* Surfaces (dev-page palette) */
        --bg-page:        #131720;
        --bg-section:     #131720;
        --bg-section-alt: #181D29;
        --bg-surface:     #1B2030;
        --bg-elevated:    #232936;
        --card-bg:        rgba(255, 255, 255, 0.035);
        --card-border:    rgba(255, 255, 255, 0.08);
        --hairline:       rgba(30, 156, 245, 0.18);

        /* Text scale */
        --text-primary:   #F1F4F8;
        --text-secondary: #C8D0DA;
        --text-muted:     #95A0A6;
        --text-faint:     rgba(241, 244, 248, 0.42);

        /* Accent — dev-page sky blue overrides homepage royal blue */
        --color-primary:     #1E9CF5;
        --color-primary-rgb: 30, 156, 245;
        --color-primary-lt:  #4DB3FF;
        --color-primary-dk:  #1483D8;
        --color-accent:      #4DB3FF;

        /* Neutral scale — invert so anything still pointing at greys looks right */
        --color-grey-50:  #1B2030;
        --color-grey-100: #232936;
        --color-grey-200: rgba(255, 255, 255, 0.10);
        --color-grey-300: rgba(255, 255, 255, 0.18);
        --color-grey-400: #95A0A6;
        --color-grey-500: #C8D0DA;
        --color-grey-600: #C8D0DA;
        --color-grey-700: #F1F4F8;
        --color-grey-800: #F1F4F8;
        --color-grey-900: #F1F4F8;
        --color-white:    #F1F4F8;

        /* Brand button shadow */
        --shadow-blue: 0 0 0 3px rgb(var(--color-primary-rgb) / 0.32);
    }

    body {
        background: #131720;
        color: #F1F4F8;
    }

    /* Global gradient-text utility — restate so the chip picks up the new accents */
    .gradient-text {
        background: linear-gradient(135deg, #4DB3FF 0%, #1E9CF5 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .skip-link {
        background: #1E9CF5;
        color: #131720;
    }
}