/*
 * ChamaeleonStyle – Design Tokens
 * ================================
 *
 * Brand direction 09/2026
 *
 * Background:      #F2F2EF
 * Main brand text: #171717
 * Subtitle text:   #666666
 *
 * Typography:
 * Manrope is intended to be SELF-HOSTED.
 *
 * Expected font file:
 * /assets/fonts/Manrope-VariableFont_wght.woff2
 *
 * Do not load Google Fonts remotely. Keeping the font local avoids
 * an unnecessary third-party request from the shop.
 */


/* ------------------------------------------------------------------
   LOCAL FONT
   ------------------------------------------------------------------ */


@font-face {
    font-family: "Manrope";
    src: url("/assets/fonts/manrope-latin-wght-normal.woff2") format("woff2");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

/* ------------------------------------------------------------------
   GLOBAL DESIGN VARIABLES
   ------------------------------------------------------------------ */

:root {

    /* Brand */
    --cs-brand-black: #171717;
    --cs-brand-grey: #666666;
    --cs-brand-background: #F2F2EF;

    /* Action colour
       Red remains an interface accent, not part of the main logo. */
    --cs-red: #D92525;
    --cs-red-dark: #B91F1F;

    /* Neutral palette */
    --cs-black: var(--cs-brand-black);
    --cs-charcoal: #262626;
    --cs-text: #242424;
    --cs-muted: var(--cs-brand-grey);

    --cs-border: #D8D8D3;
    --cs-border-dark: #BEBEB8;

    --cs-surface: var(--cs-brand-background);
    --cs-surface-soft: #F7F7F4;
    --cs-surface-strong: #E8E8E3;
    --cs-white: #FFFFFF;

    --cs-success: #198754;


    /* ----------------------------------------------------------------
       Backwards-compatible aliases
       Existing templates still use some of these variable names.
       ---------------------------------------------------------------- */

    --red: var(--cs-red);
    --red-dark: var(--cs-red-dark);
    --ink: var(--cs-text);
    --muted: var(--cs-muted);
    --line: var(--cs-border);
    --soft: var(--cs-surface-soft);
    --soft-2: var(--cs-surface-strong);
    --white: var(--cs-white);


    /* ----------------------------------------------------------------
       Layout
       ---------------------------------------------------------------- */

    --cs-content-max: 1580px;
    --max: var(--cs-content-max);

    --cs-page-padding: clamp(18px, 3vw, 48px);
    --cs-section-gap: clamp(34px, 5vw, 72px);


    /* ----------------------------------------------------------------
       Geometry
       ChamaeleonStyle uses straight edges and no decorative shadows.
       ---------------------------------------------------------------- */

    --radius: 0px;
    --shadow: none;


    /* ----------------------------------------------------------------
       Typography
       ---------------------------------------------------------------- */

    --font:
        "Manrope",
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;
}