/*
 * Global brand styles (non-Tailwind).
 *
 * For styles that are better expressed in vanilla CSS or that apply
 * globally across the site including WooCommerce pages.
 *
 * @package ArmonChild
 */

/* ------------------------------------------------------------------ */
/*  Custom Properties (design tokens)                                  */
/* ------------------------------------------------------------------ */
:root {
    /* Brand colors */
    --armon-primary: #9a8556;
    --armon-primary-dark: #6b5a3a;
    --armon-accent: #3d876b;
    --armon-surface: #f5f3ee;
    --armon-surface-light: #faf9f6;
    --armon-text: #1a1a1a;
    --armon-text-muted: #6b7280;

    /* Typography */
    --armon-font-heading: 'Playfair Display', Georgia, serif;
    --armon-font-body: 'Inter', system-ui, sans-serif;

    /* Spacing */
    --armon-section-py: clamp(4rem, 8vw, 6rem);

    /* Transitions */
    --armon-transition: 300ms ease-out;

    /* Radius */
    --armon-radius-sm: 0.5rem;
    --armon-radius-md: 1rem;
    --armon-radius-lg: 1.5rem;
    --armon-radius-full: 9999px;
}

/* ------------------------------------------------------------------ */
/*  Smooth scroll & selection                                          */
/* ------------------------------------------------------------------ */
::selection {
    background-color: var(--armon-primary);
    color: #fff;
}

/* ------------------------------------------------------------------ */
/*  Focus styles (accessibility)                                       */
/* ------------------------------------------------------------------ */
:focus-visible {
    outline: 2px solid var(--armon-primary);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/*  Scroll-reveal helper (used by landing.js)                          */
/* ------------------------------------------------------------------ */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}