/* ==========================================================
   TAS Painting Pty Ltd
   Design Tokens
   Version: 1.0
   Palette sourced from the client's logo mark (charcoal house
   outline, yellow -> orange -> red gradient fill, brown roller
   + wordmark) — see assets/images/logo/tas-painting-logo.png
========================================================== */

:root {

    /* -------------------------------------------------------
       COLORS
    ------------------------------------------------------- */

    --color-ink: #1A1A1A;
    --color-ink-soft: #2B2723;
    --color-ink-80: rgba(26,26,26,.8);

    --color-cream: #FBF7F0;
    --color-surface: #F3ECE1;
    --color-surface-alt: #EFE6D8;
    --color-white: #FFFFFF;

    --color-border: #E6DDCD;
    --color-border-dark: rgba(255,255,255,.12);

    /* Brand gradient — yellow -> orange -> red, sampled directly
       from the logo's house-fill gradient */
    --color-yellow: #F5B238;
    --color-orange: #F2761E;
    --color-red: #EF4136;
    --color-brown: #AA6F43;

    --gradient-brand: linear-gradient(120deg, var(--color-yellow) 0%, var(--color-orange) 55%, var(--color-red) 100%);
    --gradient-brand-soft: linear-gradient(120deg, rgba(245,178,56,.14) 0%, rgba(239,65,54,.14) 100%);
    --gradient-ink: linear-gradient(180deg, #232120 0%, #141312 100%);

    --color-success: #2FA766;

    /* -------------------------------------------------------
       TEXT
    ------------------------------------------------------- */

    --text-heading: #1A1A1A;
    --text-body: #565048;
    --text-light: #8B8478;
    --text-white: #FFFFFF;
    --text-white-muted: rgba(255,255,255,.72);

    /* -------------------------------------------------------
       TYPOGRAPHY
    ------------------------------------------------------- */

    --font-heading: 'Manrope', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;

    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extra-bold: 800;

    --fs-xs: .75rem;
    --fs-sm: .875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 2rem;
    --fs-3xl: 2.5rem;
    --fs-4xl: 3.4rem;
    --fs-5xl: 4.25rem;

    /* -------------------------------------------------------
       SPACING (8px system)
    ------------------------------------------------------- */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-30: 120px;
    --space-40: 160px;

    /* -------------------------------------------------------
       BORDER RADIUS — warmer / friendlier than a sharp
       architectural system, matches "premium but approachable"
       brand direction (mid-point of bold vibrant + corporate)
    ------------------------------------------------------- */

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    /* -------------------------------------------------------
       SHADOWS — warm-tinted (ink, not pure black), plus a
       brand-gradient hover glow for primary CTAs
    ------------------------------------------------------- */

    --shadow-sm: 0 4px 14px rgba(30,24,16,.06);
    --shadow-md: 0 14px 34px rgba(30,24,16,.09);
    --shadow-lg: 0 26px 64px rgba(30,24,16,.14);
    --shadow-hover: 0 20px 46px rgba(242,118,30,.28);

    /* -------------------------------------------------------
       TRANSITIONS / MOTION
    ------------------------------------------------------- */

    --transition-fast: .25s ease;
    --transition-normal: .4s ease;
    --transition-slow: .7s ease;

    --ease-reveal: cubic-bezier(.16,.77,.18,1);
    --ease-signature: cubic-bezier(.65,0,.35,1);
    --ease-out-soft: cubic-bezier(.22,1,.36,1);

    --dur-xs: .3s;
    --dur-sm: .5s;
    --dur-md: .9s;
    --dur-lg: 1.4s;

    /* -------------------------------------------------------
       LAYOUT
    ------------------------------------------------------- */

    --container-width: 1320px;
    --container-pad: clamp(20px, 4vw, 64px);
    --header-height: 104px;

    /* -------------------------------------------------------
       Z-INDEX
    ------------------------------------------------------- */

    --z-dropdown: 999;
    --z-sticky: 1000;
    --z-fixed: 1010;
    --z-header: 1020;
    --z-nav-overlay: 1040;
    --z-modal: 1050;
    --z-fab: 1015;
    --z-loader: 9999;

}

/* ==========================================================
   Reduced Motion — respected globally by js/animations.js
   (kills ScrollTrigger / heavy tweens) and here for any pure
   CSS motion.
========================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

}