/*
Theme Name: Ecardstore
Description: WooCommerce child theme for eCardStore — French TCG marketplace.
Author: eCardStore
Version: 1.0.5
Text Domain: ecardstore
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Requires at least: 6.4
Requires PHP: 8.2
WC requires at least: 8.0
WC tested up to: 10.8
*/

/* =============================================================================
   CSS CUSTOM PROPERTIES
   ============================================================================= */

/*
 * Single source of truth for every design token in the theme.
 *
 * Two token layers live here:
 *   1. eCardStore brand design system (--ecard-*) — consumed by ecard-store.css,
 *      ecardstore-v2.css and woocommerce-custom.css. Defined here (not per file)
 *      so a value is changed in exactly one place. The dark-mode variant is the
 *      body.ecard-store.ecard-dark block just below.
 *   2. Generic WooCommerce-overrides layer (--color-*, --spacing-*, --spinner-*)
 *      — consumed by woocommerce.css. Kept distinct because it predates the brand
 *      system and styles WC core controls (quantity, stock bars, spinner).
 *
 * ---------------------------------------------------------------------------
 * Contrast contract (CAR-236, from the CAR-230 audit).
 *
 * Every token below that is ever used as *text* has been checked against every
 * surface it can land on, and reaches the WCAG 2.1 AA 4.5:1 minimum for body
 * copy. Measured ratios (light palette):
 *
 *   fg \ bg              paper    paper-2  white    ink
 *   ink       #121212    15.93    14.83    18.73    —
 *   ink-soft  #3a3a3a     9.67     9.01    11.37    —
 *   ink-faded #68625d     5.11     4.76     6.01    3.12 (not used on ink)
 *   blue      #1d58d5     5.24     4.88     6.16    3.04 (not used on ink)
 *   green     #146e3a     5.38     5.01     6.32    —
 *   paper     #f5ebe1     —        —        —      15.93
 *
 * On `--ecard-blue` as a surface, `--ecard-paper` is the only permitted text
 * colour (5.24:1). Ink on blue is 3.04:1 and must not be used for copy.
 *
 * `--ecard-orange` and `--ecard-danger` are background-only: no text colour may
 * be derived from them, and text placed *on* them must be `--ecard-ink`
 * (6.85:1 and 4.68:1 respectively).
 *
 * Before changing any of these values, re-run `node tools/a11y-audit.mjs` — the
 * previous blue (#2369fd) and faded ink (#8a8a8a) were 3.96:1 and 2.93:1 on
 * paper, which failed on every primary CTA and every piece of muted meta text.
 */
:root {
    /* === eCardStore brand tokens (light) ================================== */
    --ecard-ink:          #121212;
    --ecard-ink-soft:     #3a3a3a;
    --ecard-ink-faded:    #68625d;
    --ecard-line:         #121212;
    --ecard-paper:        #f5ebe1;
    --ecard-paper-2:      #efe3d6;
    --ecard-blue:         #1d58d5;
    --ecard-blue-soft:    #d8e3ff;
    --ecard-green:        #146e3a;
    --ecard-orange:       #f5793a;
    --ecard-white:        #ffffff;
    --ecard-danger:       #e14a3c;
    --ecard-stroke:       2px;
    --ecard-stroke-thick: 3px;
    --ecard-radius-sm:    4px;
    --ecard-radius:       10px;
    --ecard-radius-lg:    18px;
    --ecard-font-display: "Rubik Mono One", "Archivo Black", sans-serif;
    --ecard-font-body:    "Space Grotesk", "Inter", -apple-system, sans-serif;
    --ecard-font-mono:    "JetBrains Mono", ui-monospace, monospace;
    --ecard-density:      1;

    /* Vertical rhythm of the page content column (CAR-191). Single source of
       truth for the gap between the header and the first block, and between the
       last block and the footer. Owned by .ecard-content-wrap — inner shells
       (cart / checkout / My Account / thank-you) must not re-declare it. */
    --ecard-content-pad-top:    32px;
    --ecard-content-pad-bottom: 64px;

    /* === Generic WooCommerce-overrides layer ============================== */
    /* Colors */
    --color-primary:        #3498db;
    --color-bg-white:       #fff;
    --color-bg-light:       #f8f9fa;
    --color-bg-hover:       #e9ecef;
    --color-text:           #333;
    --color-text-medium:    #495057;
    --color-text-dark:      #212529;
    --color-text-muted:     #666;
    --color-spinner-track:  #f3f3f3;

    /* Spacing */
    --spacing-xs:  5px;
    --spacing-sm:  8px;
    --spacing-md:  15px;
    --spacing-lg:  20px;
    --spacing-xl:  30px;

    /* Typography */
    --font-size-base: 16px;
    --font-size-sm:   14px;
    --font-size-icon: 18px;

    /* Dimensions */
    --qty-button-size:  40px;
    --qty-input-width:  60px;
    --stock-bar-height: 8px;
    --spinner-size:     40px;
    --spinner-border:   4px;

    /* Borders & Radius */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-full: 50%;

    /* Effects */
    --shadow-sm:          0 2px 5px rgba(0, 0, 0, 0.1);
    --shadow-inset:       inset 0 1px 3px rgba(0, 0, 0, 0.1);
    --transition-fast:    0.2s ease;
    --transition-medium:  0.3s ease;
    --animation-spin:     1s linear infinite;
}

/*
 * Dark-mode override for the brand tokens. Scoped to body.ecard-store.ecard-dark
 * so only the store skin's dark variant is affected; the :root light values above
 * remain the default everywhere else.
 */
body.ecard-store.ecard-dark {
    --ecard-ink:       #f5ebe1;
    --ecard-ink-soft:  #d8cdc1;
    /* 5.49:1 on the dark paper — the light value (#68625d) would be 2.0:1 here.
       Muted text is a token, not an `opacity`, precisely so it can flip. */
    --ecard-ink-faded: #8d8883;
    --ecard-line:      #f5ebe1;
    --ecard-paper:     #0e0e10;
    --ecard-paper-2:   #17171a;
    --ecard-blue:      #4a86ff;
    --ecard-green:     #3ddc84;
    --ecard-white:     #1b1b1f;
}

/*
 * Tighter content rhythm on tablet and below (CAR-191). Overriding the tokens
 * rather than the rules keeps every consumer of .ecard-content-wrap in step —
 * this used to be hand-rolled per page (My Account had its own 24/48 pair).
 */
@media (max-width: 1024px) {
    :root {
        --ecard-content-pad-top:    24px;
        --ecard-content-pad-bottom: 48px;
    }
}