/**
 * CFRO Base — Reset, Variables & Utilities
 *
 * @package CFRO
 * @since   4.0.0
 */

/* ── Reset ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

:root {
    /* ── Design tokens (Figma v3 — Earth / Nature tones) ── */
    --cfro-forest-dark:    #1a3a2f;
    --cfro-forest:         #1b7a5a;
    --cfro-forest-light:   #2ba07a;
    --cfro-sage:           #7ecbb0;
    --cfro-sage-light:     #a8dcc8;
    --cfro-sage-pale:      #e8f5ee;
    --cfro-cream:          #fff8f0;
    --cfro-cream-dark:     #f0e8da;
    --cfro-charcoal:       #2e2e2e;
    --cfro-charcoal-light: #5a5a5a;
    --cfro-amber:          #d97706;
    --cfro-amber-dark:     #92400e; /* WCAG AA on amber-light (6.4:1) and white (7.1:1) — use for badges/buttons */
    --cfro-amber-light:    #fef3c7; /* light amber tint — replaces wheat for proper contrast */
    --cfro-coral:          #bf4632; /* darkened from #e06b56 for WCAG AA contrast with white (4.9:1) */
    --cfro-coral-light:    #fcddd7;
    --cfro-teal:           #0e9aa7;
    --cfro-teal-dark:      #0a7a85; /* WCAG AA with white (4.84:1) */
    --cfro-teal-badge:     #155e75; /* WCAG AA on teal-light (6.1:1) — use for pills/badges */
    --cfro-teal-light:     #d0f0f4;
    --cfro-violet:         #7c5cbf;
    --cfro-violet-dark:    #5e3f9e; /* WCAG AA on violet-light (6.1:1) and white — use for badges */
    --cfro-violet-light:   #e8dff5;
    --cfro-rose:           #d94f72;
    --cfro-rose-dark:      #9d174d; /* WCAG AA on rose-light (6.4:1) — use for badges */
    --cfro-rose-light:     #fce0e8;
    --cfro-sky:            #3b82c4;
    --cfro-sky-dark:       #1e40af; /* WCAG AA on sky-light (7.1:1) — use for badges */
    --cfro-sky-light:      #dbeafe;
    --cfro-white:          #ffffff;

    /* ── Semantic aliases (backward-compat with components) ── */
    --cfro-primary-dark:   var(--cfro-forest-dark);
    --cfro-primary:        var(--cfro-forest);
    --cfro-primary-light:  var(--cfro-forest-light);
    --cfro-accent:         var(--cfro-coral);
    --cfro-accent-dark:    #a83b28; /* darkened from #c85a48 for WCAG AA contrast with white (6.4:1) */
    --cfro-accent-light:   var(--cfro-coral-light);
    --cfro-light-gray:     var(--cfro-sage-pale);
    --cfro-border-gray:    rgba(27, 122, 90, 0.12);
    --cfro-mid-gray:       var(--cfro-charcoal-light);
    --cfro-dark-gray:      var(--cfro-charcoal);
    --cfro-almost-black:   var(--cfro-charcoal);
    --cfro-success:        var(--cfro-forest);
    --cfro-link:           var(--cfro-forest);

    /* Layout */
    --cfro-radius:        6px;
    --cfro-radius-lg:     12px;
    --cfro-radius-pill:   9999px;
    --cfro-shadow:        0 2px 8px rgba(0, 0, 0, 0.06);
    --cfro-shadow-md:     0 4px 12px rgba(0, 0, 0, 0.08);
    --cfro-shadow-lg:     0 8px 24px rgba(0, 0, 0, 0.10);
    --cfro-transition:    0.2s ease;
    --cfro-player-height: 72px;
    --cfro-max-width:     1200px;
    --cfro-content-width: 800px;

    /* Typography */
    --cfro-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cfro-font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--cfro-font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--cfro-charcoal);
    background: var(--cfro-cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--cfro-forest); text-decoration: none; transition: color var(--cfro-transition); }
a:hover { color: var(--cfro-forest-light); text-decoration: underline; }
a:focus-visible {
    outline: 3px solid var(--cfro-forest-light);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Heading styles (weight, line-height, color) are set in theme.json
   under styles.elements.heading — single source of truth. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--cfro-font-sans);
}

/* ── Container ───────────────────────────────── */
.cfro-container {
    max-width: var(--cfro-max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

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

/* ── Section spacing ─────────────────────────── */
.cfro-section         { padding: 4rem 0; }
.cfro-section--gray   { background: var(--cfro-light-gray); }
.cfro-section--dark   { background: var(--cfro-primary-dark); color: var(--cfro-white); }
.cfro-section--primary{ background: var(--cfro-primary); color: var(--cfro-white); }

.cfro-section__header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.cfro-section__header h2 {
    font-size: 1.75rem;
    margin: 0 0 0.5rem;
}
.cfro-section__header p {
    color: var(--cfro-mid-gray);
    font-size: 1.05rem;
    margin: 0;
}
.cfro-section--dark .cfro-section__header h2,
.cfro-section--primary .cfro-section__header h2 { color: var(--cfro-white); }
.cfro-section--dark .cfro-section__header p,
.cfro-section--primary .cfro-section__header p { color: rgba(255,255,255,0.8); }