/*
Theme Name: Wux Blog Theme
Author: Wux B.V.
Author URI: https://wux.nl/
Description: Wux Blogs is het custom wordpress thema van Wux. Dit thema is speciaal ontwikkeld voor de blog ontwikkeling van Wux.
Version: 3.5.0
Requires at least: 6.6
Requires PHP: 8.3
Text Domain: wux
*/

/**
 * Static design tokens. Brand colors and fonts come from the Blog Settings
 * and are printed as inline :root variables (Wux\Theme\Blog\Appearance). Everything else
 * (logo widths, dark/light colors, card colors) is overridden in the child theme's style.css.
 */
:root {

    /* Transition variables */
    --ts-duration            : var(--ts-30);
    --ts-function            : ease;

    /* Container variables */
    --container-width       : 100%;
    --container-width--sm   : 500px;
    --container-width--md   : 700px;
    --container-width--lg   : 900px;
    --container-width--xl   : 1000px;
    --container-width--xxl  : 1200px;
    --container-width--xxxl : 1400px;

    /* Color variables (not configurable) */
    --clr-border            : rgb(222, 226, 230);
    --clr-danger            : #c02b0a;
    --clr-info              : #3d9cd2;
    --clr-success           : #549a1e;

    /* Brand-neutral colors: override per site in the child theme's style.css */
    --clr-dark              : #141414;
    --clr-dark-rgb          : 20, 20, 20;
    --clr-light             : #eaeaea;
    --clr-light-rgb         : 234, 234, 234;
    --clr-heading-dark      : #ffffff;
    --clr-text-dark         : #f4f4f4;
    --header-bg-clr         : #ffffff;
    --footer-bg-clr         : #ffffff;

    /* Corner radius: override per site in the child theme's style.css */
    --radius--small         : 4px;
    --radius                : 8px;
    --radius--large         : 16px;

    /* Cards */
    --clr-card-text         : var(--clr-heading);
    --clr-card-border       : var(--clr-primary);
    --card-border           : 0px;

    /* Logo widths and background assets (e.g. --bg-asset: url(...)) */
    --header-logo-width     : 25rem;
    --footer-logo-width     : 40rem;
    --bg-asset              : none;
    --bg-asset-2            : none;

    /* Spacing variables */
    --spacing-4             : .4rem;
    --spacing-8             : .8rem;
    --spacing-12            : 1.2rem;
    --spacing-16            : 1.6rem;
    --spacing-20            : 2rem;
    --spacing-24            : 2.4rem;
    --spacing-32            : 3.2rem;
    --spacing-48            : 4.8rem;
    --spacing-64            : 6.4rem;

    /* Typography variables */
    --fs                    : 1.6rem;
    --lh                    : 1.6;
    --body-fs               : var(--fs);
    --body-lh               : var(--lh);

    --fs-h1                 : clamp(4.0rem, 5vw, 4.8rem);
    --fs-h2                 : clamp(3.4rem, 4vw, 4.0rem);
    --fs-h3                 : clamp(3.0rem, 3vw, 3.4rem);
    --fs-h4                 : 2.8rem;
    --fs-h5                 : 2.4rem;
    --fs-h6                 : 2.0rem;
    --fs-small              : 1.4rem;
    --fs-x-small            : 1.2rem;

    --text-xs               : var(--fs-x-small);
    --text-sm               : var(--fs-small);
    --text-md               : var(--fs);
    --text-lg               : 1.8rem;
    --text-xl               : var(--fs-h6);
    --display-xs            : var(--fs-h5);
    --display-sm            : var(--fs-h4);
    --display-md            : var(--fs-h2);
    --display-lg            : var(--fs-h1);
}