/* ============================================================
   cranio-norman — CSS Custom Properties (Design Tokens)
   v1.0.0 | 2026-03-22
   All colors, fonts, spacing defined as variables.
   ✏️ CONTENT — safe to change values.
   ============================================================ */

:root {
    /* ── Primary Colors ────────────────────────────────────── */
    --color-green: #81d742;            /* Primary CTA, accents */
    --color-green-dark: #6bc02e;       /* Hover state */
    --color-green-light: #a3e472;      /* Soft highlights */

    /* ── Blue Accent ───────────────────────────────────────── */
    --color-blue: #8bb5cd;             /* Section accents */
    --color-blue-light: #9dbccf;       /* Softer variant */
    --color-blue-dark: #4d5382;        /* Dark headings */

    /* ── Neutrals ──────────────────────────────────────────── */
    --color-white: #ffffff;
    --color-off-white: #f7f7f7;        /* Alternating sections */
    --color-cream: #fcfaf8;            /* Footer, warm sections */
    --color-light-gray: #ececec;       /* Borders, dividers */
    --color-medium-gray: #888888;      /* Muted text */
    --color-dark-gray: #333333;        /* Headings */
    --color-text: #4a4a4a;             /* Body text (matches Avada) */
    --color-heading: #333333;          /* Heading text */

    /* ── Typography ────────────────────────────────────────── */
    --font-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-heading: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

    /* ── Spacing ───────────────────────────────────────────── */
    --section-padding-y: 80px;         /* Vertical section padding */
    --section-padding-y-sm: 50px;      /* Mobile section padding */
    --container-max: 1100px;           /* Max content width */
    --container-wide: 1200px;          /* Wide sections */
    --container-padding: 20px;         /* Side padding */

    /* ── Border Radius ─────────────────────────────────────── */
    --radius-sm: 3px;
    --radius-md: 5px;
    --radius-lg: 10px;

    /* ── Shadows (matches Avada "natural" preset) ────────── */
    --shadow-sm: 3px 3px 7px rgba(0, 0, 0, 0.1);
    --shadow-md: 6px 6px 9px rgba(0, 0, 0, 0.2);
    --shadow-lg: 10px 10px 15px rgba(0, 0, 0, 0.15);

    /* ── Transitions ───────────────────────────────────────── */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;

    /* ── Semantic Aliases ─────────────────────────────────── */
    /* ✏️ CONTENT — maps semantic names to design tokens above */
    --color-primary: var(--color-green);
    --color-primary-dark: var(--color-green-dark);
    --color-primary-light: var(--color-green-light);
    --color-dark: #212934;               /* Footer, dark sections */
    --color-dark-blue: var(--color-blue-dark);
    --color-border: var(--color-light-gray);
    --color-bg-alt: var(--color-off-white);
    --color-text-light: var(--color-medium-gray);

    /* ── Spacing Scale ────────────────────────────────────── */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2.5rem;
    --spacing-xl: 4rem;

    /* ── Layout Aliases ───────────────────────────────────── */
    --container-width: var(--container-max);

    /* ── Transition Aliases ───────────────────────────────── */
    --transition-base: var(--transition-fast);

    /* ── Z-Index ──────────────────────────────────────────── */
    --z-header: 1000;
}

/* ✅ SAFE TO RUN — CSS variables only, no executable code */