/* ==========================================================================
   WS Theme — project-overrides.css
   ---------------------------------------------------------------------------
   This is the ONE file you edit per project. It overrides the design tokens
   defined in main.css :root — never edit main.css itself.

   How it works:
     - main.css declares neutral light-theme defaults on :root.
     - This file re-declares the same custom properties on :root. Because it
       loads AFTER main.css, these values win, and the entire theme (including
       WooCommerce, which also reads these tokens) re-skins automatically.

   To activate it, enqueue this file after the main stylesheet, e.g. in
   functions.php inside ws_theme_enqueue_assets():

       wp_enqueue_style(
           'ws-theme-project',
           get_theme_file_uri( 'assets/css/project-overrides.css' ),
           array( 'ws-theme-main' ),   // <-- depends on main so it loads after
           WS_THEME_VERSION
       );

   Override only the tokens you need — anything you omit keeps its main.css
   default. The block below is a complete EXAMPLE using the PeakLab dark theme.
   ========================================================================== */

:root {
	/* --- Colours: PeakLab dark theme ------------------------------------ */
	--color-bg: #111111;          /* page background                  */
	--color-bg-surface: #1A1A1A;  /* footer, panels                   */
	--color-bg-card: #242424;     /* cards (project-specific token)   */
	--color-text: #ffffff;        /* primary text                     */
	--color-text-muted: #949494;  /* meta, captions                   */
	--color-accent: #CC0000;      /* buttons, fills, decorative accents */
	--color-accent-text: #FF4D4D; /* AA text contrast through #242424 */
	--color-accent-hover: #FF1A1A;/* hover / active accent            */
	--color-border: #2A2A2A;      /* hairlines, dividers              */

	/* --- Typography ----------------------------------------------------- */
	--font-primary: "DM Sans", sans-serif;
	--font-size-base: 1rem;       /* 16px */
	--line-height-base: 1.6;

	/* --- Spacing scale -------------------------------------------------- */
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 2rem;
	--spacing-xl: 4rem;

	/* --- Layout --------------------------------------------------------- */
	--container-width: 1280px;
	--radius: 8px;
	--radius-md: 10px;             /* buttons, inputs, icon buttons     */
	--radius-lg: 16px;             /* product card, filter panel        */
	--header-height: 64px;         /* scrolled header height (sticky offset) */

	/* Softer divider inside dark panels (from design-system v0.1).      */
	--color-border-soft: #232323;

	/* Positive / success accent — free shipping, "green" delivery values.
	   Promoted to a token from the literal thankyou.css already used, so
	   checkout.css can stay fully token-driven.                          */
	--color-green: #3FAE5C;

	/* Light payment panels — the Montonio card form (Adyen fields) and bank
	   grid render white-on-white widgets we cannot theme, so checkout.css
	   places them on a deliberate light surface. Off-white (not #fff) keeps
	   the white embedded fields/tiles reading as content ON the panel.    */
	--color-bg-light: #F2F3F5;
	--color-text-on-light: #1A1A1A;
}