/*
 * theme-tokens.css — Minimal Theme Baseline
 * ------------------------------------------
 * PURPOSE
 * This file defines the absolute minimum CSS custom properties (variables)
 * needed to prevent a broken first-load before the user has configured
 * anything via the WYSIWYG module's admin panel.
 *
 * WHAT BELONGS HERE
 * Only fallback values. Nothing else.
 * Every variable defined here can be overridden at any time by:
 *   1. The module's Design Token Settings admin panel (DesignTokenSettings)
 *   2. The module's Custom CSS admin editor (CustomCssSettings)
 *   3. A :root block written directly in the Custom CSS editor
 *
 * WHAT DOES NOT BELONG HERE
 * - Utility classes (those are generated by the module from DesignTokenSettings)
 * - Component styles (write those in the Custom CSS editor)
 * - Anything you expect to change per-site (use the admin panel instead)
 *
 * LOAD ORDER (in Layout.liquid)
 *   1. styles.css          — Bootstrap / theme base
 *   2. theme-tokens.css    — this file (fallback variables only)
 *   3. wysiwyg-utilities.css — module utility classes (reference these variables)
 *   [injected by module at runtime]
 *   4. <style id="oc-design-tokens"> — token overrides from DesignTokenSettings
 *   5. <style id="oc-custom-css">    — freeform CSS from CustomCssSettings
 */

:root {
    /* ── Colour Palette ───────────────────────────────────────────────────── */
    /* Override these in the Custom CSS editor:  :root { --primary-color: #e63946; } */

    --primary-color: #0094ff;
    --secondary-color: #64748b;
    --text-color: #1e293b;
    --text-muted-color: #94a3b8;
    --text-white-color: #ffffff;
    --bg-light-color: #f8f9fa;
    --bg-dark-color: #1e293b;
    /* ── Spacing Scale ────────────────────────────────────────────────────── */

    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    /* ── Typography ───────────────────────────────────────────────────────── */

    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    /* ── Borders ──────────────────────────────────────────────────────────── */
    /* Required: the 'border' utility class references both of these.         */
    /* Without them the border renders with no width or colour.               */

    --border-width: 1px;
    --border-color: #dee2e6;
    --border-radius: 0.25rem;
    /* ── Elevation / Shadows ──────────────────────────────────────────────── */

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.10);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/*
 * DARK MODE (optional)
 * Uncomment and adjust if you want automatic dark mode support.
 * All utility classes pick up the new values automatically because
 * they reference variables rather than hardcoded colours.
 *
 * @media (prefers-color-scheme: dark) {
 *     :root {
 *         --primary-color:    #38bdf8;
 *         --secondary-color:  #94a3b8;
 *         --text-color:       #f1f5f9;
 *         --text-muted-color: #64748b;
 *         --bg-light-color:   #1e293b;
 *         --bg-dark-color:    #0f172a;
 *         --border-color:     #334155;
 *     }
 * }
 */