/* ============================================================================
 * FIT & MORE — CANONICAL BRAND FOUNDATION  (Phase 1)
 * Single source of truth for the new brand identity (deep-purple, "FIT & MORE.").
 *
 * SCOPE: This file only DEFINES tokens, font faces and OPT-IN utility classes.
 * It intentionally does NOT restyle body/headings/buttons/cards/forms — those
 * component migrations happen in Phases 2–4 by CONSUMING the tokens below.
 * Loading this file therefore changes nothing visually on its own.
 *
 * Primary brand color #2E1E55 was sampled directly from the approved logo
 * artwork (docs/branding/png-01.png / png-02.png — a single flat solid).
 * ========================================================================== */

:root {
    /* ---- Brand purple (from logo artwork) ---- */
    --fit-brand-primary:        #2E1E55; /* sampled from logo (authoritative) */
    --fit-brand-primary-dark:   #221641; /* derived — hover / active / press   */
    --fit-brand-primary-light:  #4A3A78; /* derived — accents, secondary text  */
    --fit-brand-primary-soft:   #F1EFF7; /* derived — pale lavender surface     */

    /* ---- Neutrals / surfaces ---- */
    --fit-brand-background:      #FFFFFF;
    --fit-brand-surface:         #FFFFFF;
    --fit-brand-surface-alt:     #F7F6FB; /* derived — subtle purple-tinted alt */

    /* ---- Text ---- */
    --fit-brand-text:            #1E1B2E; /* derived — near-black, faint purple  */
    --fit-brand-text-muted:      #6B6880; /* derived — secondary (AA ≥ 4.5:1)    */
    --fit-brand-on-primary:      #FFFFFF; /* text/logo on purple (14.6:1)        */

    /* ---- Lines / states ---- */
    --fit-brand-border:          #E4E1EE; /* derived — soft purple-tinted border */
    --fit-brand-hover:           #221641; /* = primary-dark                       */
    --fit-brand-selected:        #EAE6F4; /* derived — selected card/row tint     */

    /* ---- Semantic status (PRESERVED — not brand purple) ---- */
    --fit-brand-success:         #2E7D32;
    --fit-brand-success-bg:      #E8F5E9;
    --fit-brand-warning:         #E65100;
    --fit-brand-warning-bg:      #FFF3E0;
    --fit-brand-danger:          #C62828;
    --fit-brand-danger-bg:       #FDECEA;
    --fit-brand-info:            #1565C0;
    --fit-brand-info-bg:         #E3F2FD;

    /* ---- Typography ---- */
    --fit-brand-font-display: 'Montserrat', 'Segoe UI', Tahoma, Arial, sans-serif;
    --fit-brand-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ----------------------------------------------------------------------------
 * FONTS
 * Loaded in production from Google Fonts (SIL OFL) via wp_enqueue_style in
 * functions.php (fitandmore_enqueue_brand_foundation). This is license-clean
 * and requires no bundled files.
 *
 * OPTIONAL self-hosting (better performance/privacy): drop the WOFF2 files into
 * assets/brand/fonts/ and uncomment the @font-face rules below, then remove the
 * Google Fonts enqueue. Files were NOT bundled in Phase 1 because this build
 * environment could not download them (font CDNs returned empty bodies).
 *
 * @font-face { font-family:'Montserrat'; font-weight:400; font-style:normal;
 *   font-display:swap; src:url('fonts/montserrat-400.woff2') format('woff2'); }
 * @font-face { font-family:'Montserrat'; font-weight:700; font-style:normal;
 *   font-display:swap; src:url('fonts/montserrat-700.woff2') format('woff2'); }
 * @font-face { font-family:'Montserrat'; font-weight:800; font-style:normal;
 *   font-display:swap; src:url('fonts/montserrat-800.woff2') format('woff2'); }
 * @font-face { font-family:'Inter'; font-weight:400; font-style:normal;
 *   font-display:swap; src:url('fonts/inter-400.woff2') format('woff2'); }
 * @font-face { font-family:'Inter'; font-weight:600; font-style:normal;
 *   font-display:swap; src:url('fonts/inter-600.woff2') format('woff2'); }
 * -------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
 * OPT-IN UTILITIES (used by Phases 2–4; safe no-ops until applied)
 * -------------------------------------------------------------------------- */
.fit-brand-font-display { font-family: var(--fit-brand-font-display); }
.fit-brand-font-body    { font-family: var(--fit-brand-font-body); }

.fit-brand-bg-primary   { background-color: var(--fit-brand-primary); color: var(--fit-brand-on-primary); }
.fit-brand-text-primary { color: var(--fit-brand-primary); }
.fit-brand-border-1     { border: 1px solid var(--fit-brand-border); }

/* Logo helper: an <img> that swaps nothing but keeps consistent sizing. */
.fit-brand-logo     { display: inline-block; height: auto; max-width: 100%; }
.fit-brand-logo--sm { width: 140px; }
.fit-brand-logo--md { width: 200px; }
.fit-brand-logo--lg { width: 280px; }
.fit-brand-icon     { display: inline-block; height: auto; width: 40px; }

/* ----------------------------------------------------------------------------
 * PHASE 2 — Customer typography (scoped to customer wrappers ONLY).
 * These selectors match Fit & More customer surfaces and never native
 * WordPress/Woodmart or admin markup, so loading this on admin is inert.
 * -------------------------------------------------------------------------- */
.fit-public-menu,
.fit-recommender-container,
.fit-archive-wrapper,
.fit-rating-form,
.fit-support-wrap {
    font-family: var(--fit-brand-font-body);
}

.fit-public-menu h1, .fit-public-menu h2, .fit-public-menu h3,
.fit-public-title, .fit-public-section,
.fit-recommender-container h1, .fit-recommender-container h2, .fit-recommender-container h3,
.fit-recommender-header h2,
.fit-archive-wrapper h1, .fit-archive-wrapper h2, .fit-archive-wrapper h3,
.fit-support-wrap h1, .fit-support-wrap h2, .fit-support-wrap h3 {
    font-family: var(--fit-brand-font-display);
}

/* Weekly Meal Plan — branded display controls (customer). */
.fit-plan-badge,
.fit-summary-btn,
.fit-summary-save-btn,
.fit-summary-total {
    font-family: var(--fit-brand-font-display);
}

/* ----------------------------------------------------------------------------
 * PHASE 2.1 — Renewal customer UI + purchase duration selector.
 * These renderers ship no CSS of their own, so they inherit raw theme form
 * styling. The rules below give them the brand system. All selectors are
 * customer-only (never admin/native), and every colour is a Phase-1 token.
 * Radios/checkboxes use accent-color so the native control is on-brand.
 * -------------------------------------------------------------------------- */

/* Renewal status card (My Account) */
.fit-renewal-card {
    font-family: var(--fit-brand-font-body);
    background: var(--fit-brand-surface);
    border: 1px solid var(--fit-brand-border);
    border-radius: 14px;
    padding: 18px 20px;
    margin: 16px 0;
    color: var(--fit-brand-text);
}
.fit-renewal-card h2, .fit-renewal-card h3, .fit-renewal-card strong {
    font-family: var(--fit-brand-font-display);
    color: var(--fit-brand-primary);
}
.fit-renewal-refund { color: var(--fit-brand-text-muted); font-size: 13px; }
.fit-renewal-actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; }
.fit-renewal-actions a, .fit-renewal-actions .button {
    background: var(--fit-brand-primary);
    color: var(--fit-brand-on-primary);
    border: none; border-radius: 10px;
    padding: 10px 18px; font-weight: 700; text-decoration: none;
    font-family: var(--fit-brand-font-display);
}
.fit-renewal-actions a:hover, .fit-renewal-actions .button:hover { background: var(--fit-brand-primary-dark); }

/* Renewal plan/duration/snack picker */
.fit-renewal-selection { font-family: var(--fit-brand-font-body); margin: 16px 0; color: var(--fit-brand-text); }
.fit-renewal-selection h3 { font-family: var(--fit-brand-font-display); color: var(--fit-brand-primary); margin: 0 0 6px; }
.fit-renewal-help { color: var(--fit-brand-text-muted); font-size: 13px; margin: 0 0 14px; }
.fit-renewal-unavailable {
    background: var(--fit-brand-primary-soft);
    border: 1px solid var(--fit-brand-border);
    color: var(--fit-brand-text);
    border-radius: 12px; padding: 14px 16px;
}
.fit-renewal-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.fit-renewal-option {
    display: flex; flex-direction: column; gap: 8px;
    background: var(--fit-brand-surface);
    border: 1px solid var(--fit-brand-border);
    border-radius: 14px; padding: 16px;
    transition: border-color .15s, box-shadow .15s;
}
.fit-renewal-option:hover,
.fit-renewal-option:focus-within {
    border-color: var(--fit-brand-primary);
    box-shadow: 0 0 0 3px rgba(46, 30, 85, .12);
}
.fit-renewal-option > strong { font-family: var(--fit-brand-font-display); color: var(--fit-brand-primary); font-size: 16px; }
.fit-renewal-option label { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.fit-renewal-option button {
    margin-top: 4px;
    background: linear-gradient(135deg, var(--fit-brand-primary), var(--fit-brand-primary-dark));
    color: var(--fit-brand-on-primary);
    border: none; border-radius: 10px;
    padding: 11px 16px; font-weight: 700; cursor: pointer;
    font-family: var(--fit-brand-font-display);
}
.fit-renewal-option button:hover { filter: brightness(1.06); }

/* Purchase-time duration selector (product page) */
.fit-duration-selector {
    font-family: var(--fit-brand-font-body);
    border: 1px solid var(--fit-brand-border);
    border-radius: 12px; padding: 14px 16px;
    background: var(--fit-brand-surface-alt);
}
.fit-duration-selector > strong { font-family: var(--fit-brand-font-display); color: var(--fit-brand-primary); }
.fit-duration-selector label { border-radius: 8px; padding: 4px 6px; }
.fit-duration-selector label:has(input:checked) { background: var(--fit-brand-primary-soft); }

/* On-brand native radios/checkboxes across these customer controls. */
.fit-renewal-option input[type="radio"],
.fit-renewal-option input[type="checkbox"],
.fit-duration-selector input[type="radio"] {
    accent-color: var(--fit-brand-primary);
}

/* ----------------------------------------------------------------------------
 * PHASE 3 — Admin / operations typography (scoped to Fit & More admin wrappers).
 * These selectors match only Fit & More custom admin surfaces, never native
 * WordPress/WooCommerce admin chrome, so global admin styling is untouched.
 * Colours were migrated to tokens in-place in functions.php; this adds the
 * brand typefaces on top.
 * -------------------------------------------------------------------------- */
.fit-admin-wrap,
.fit-kitchen-wrap {
    font-family: var(--fit-brand-font-body);
}
.fit-admin-wrap h1, .fit-admin-wrap h2, .fit-admin-wrap h3,
.fit-admin-title, .fit-admin-header,
.fit-kitchen-wrap h1, .fit-kitchen-wrap h2, .fit-kitchen-wrap h3,
.fit-kitchen-header {
    font-family: var(--fit-brand-font-display);
}
/* On-brand native form controls inside Fit & More admin wrappers. */
.fit-admin-wrap input[type="radio"],
.fit-admin-wrap input[type="checkbox"],
.fit-kitchen-wrap input[type="radio"],
.fit-kitchen-wrap input[type="checkbox"] {
    accent-color: var(--fit-brand-primary);
}