/*
 * Krugio C1: design tokens.
 * Structure (top to bottom): 1 DERIVED colours, 2 SEMANTIC, 3 SHAPE, 4 TYPE / LAYOUT / C1-local tokens.
 * Overrides the full Base token contract (names never removed, see Base tokens-default.css).
 *
 * The VALUES of colours, corner radii and fonts do not live in this file. They are site settings (krugio_settings, section
 * "appearance"); krugio-c1/appearance.php holds the initial ones. Base prints them once in the head as seed variables
 * (--krugio-palette-<key>, --krugio-shape-<key>, --krugio-typeface-<role>) together with the font rules. This file only
 * derives colours from the seeds (formulas) and maps them to the semantic tokens. No colour literal, no literal radius, no
 * font file rule and no font stack belongs here (docs/design/PRAVILA.md rules 7 and 21).
 *
 * Rule for every other C1 file: read --krugio-color-* (semantic) tokens, never --krugio-palette-* directly,
 * and never write a colour literal (hex or functional notation).
 *
 * Browser note: color-mix() is used over tokens, without fallback literals (one-place rule). Current browsers only.
 */

/* ==========================================================================
   1. DERIVED colours: formulas over the seeds that Base prints from the site settings
   (--krugio-palette-bg, -surface, -brand, -brand-strong, -ink, -ink-strong, ...). No literals here.
   White rule (KRG-75): the only pure white left is on-brand (text on filled primary, sale badge and cart count)
   and on-media (text over hero and parallax images). Fields, boxes, cards and panels use bg or surface.
   After changing a value in the settings, run the contrast check (from app/public):
     wp eval-file ../../tech/checks/check-c1-contrast.php
   It names every pair that stopped passing. Usually brand-strong must stay dark
   enough for white text on it.
   ========================================================================== */

:root {
	--krugio-palette-brand-deep: color-mix(in srgb, var(--krugio-palette-brand-strong) 85%, var(--krugio-palette-ink-strong));
	--krugio-palette-ink-muted: color-mix(in srgb, var(--krugio-palette-ink) 80%, var(--krugio-palette-bg));
	--krugio-palette-control-line: color-mix(in srgb, var(--krugio-palette-ink) 60%, var(--krugio-palette-bg));
}

/* ==========================================================================
   2. SEMANTIC: roles. Base tokens and C1-local colour tokens map to the palette.
   ========================================================================== */

:root {
	/* Base colour tokens */
	--krugio-color-bg: var(--krugio-palette-bg);
	--krugio-color-surface: var(--krugio-palette-surface);
	--krugio-color-text: var(--krugio-palette-ink);
	--krugio-color-text-muted: var(--krugio-palette-ink-muted);
	--krugio-color-primary: var(--krugio-palette-brand-strong);
	--krugio-color-on-primary: var(--krugio-palette-on-brand);
	--krugio-color-accent: var(--krugio-palette-brand-deep);
	--krugio-color-border: var(--krugio-palette-control-line);
	--krugio-color-border-subtle: var(--krugio-palette-surface);
	--krugio-color-field-bg: var(--krugio-color-bg);              /* fields take the page colour (KRG-75: no pure white fields); their line is --krugio-color-border */
	--krugio-color-sale: var(--krugio-color-sale-badge);          /* Base token (Base badge); the badge has its own token below */
	--krugio-color-on-sale: var(--krugio-color-on-sale-badge);
	--krugio-color-success: var(--krugio-palette-success);
	--krugio-color-error: var(--krugio-palette-error);

	/* C1-local colour tokens (used by C1 CSS only) */
	--krugio-color-sale-badge: var(--krugio-palette-sale-badge);       /* sale percentage badge: background */
	--krugio-color-on-sale-badge: var(--krugio-palette-on-sale-badge); /* sale percentage badge: text */
	--krugio-color-sale-price: var(--krugio-palette-sale-price);       /* sale price number on the product page (own token: it may differ from the badge and the plain price; empty setting follows --krugio-color-primary) */
	--krugio-color-card-price: var(--krugio-palette-card-price);       /* price line under the card image in grids and sections, regular and sale (empty setting follows --krugio-color-text) */
	--krugio-color-brand: var(--krugio-palette-brand);               /* decorative fills: footer bar, badge ring, hover outline */
	--krugio-color-on-brand-fill: var(--krugio-palette-ink-strong);  /* text on --krugio-color-brand fills */
	--krugio-color-on-media: var(--krugio-palette-on-media);         /* hero and parallax text */
	--krugio-color-media-overlay: var(--krugio-palette-ink);         /* hero and parallax dim layer (block opacity applies) */
	--krugio-color-media-fallback: var(--krugio-palette-ink);        /* shown before or without media so text stays readable */
	--krugio-color-selection-bg: var(--krugio-palette-brand);        /* selected text: background (::selection) */
	--krugio-color-selection-text: var(--krugio-palette-ink-strong); /* selected text: colour */
}

/* ==========================================================================
   3. SHAPE: global corner lines. The sizes are site settings (seed variables --krugio-shape-<key> printed by Base); this block
   only maps them to the radius tokens C1 reads. Buttons and the sale badge follow the control radius.
   ========================================================================== */

:root {
	--krugio-radius-control: var(--krugio-shape-control);
	--krugio-radius-box: var(--krugio-shape-box);
	--krugio-radius-button: var(--krugio-radius-control);
	--krugio-radius-badge: var(--krugio-radius-control);
	--krugio-radius-card: var(--krugio-shape-card);          /* product and gallery images, cart thumbnail, payment and order-detail cards: own value, not the box value */
	--krugio-radius-input: var(--krugio-shape-input);        /* single-line fields */
	--krugio-radius-textarea: var(--krugio-shape-textarea);  /* multi-line fields (order note): a pill would turn a tall box into a balloon */
	--krugio-border-width: 1px;
	--krugio-icon-stroke: 1.75;
	/* The cart count bubble in the header is ALWAYS a circle (border-radius 50% in design.css), independent of
	   the corner controls above: it does not read any radius token. Its size is the only thing to tune. */
	--krugio-cart-count-size: 1.25rem;
}

/* ==========================================================================
   4. TYPE, LAYOUT and C1-local tokens
   ========================================================================== */

:root {
	/* Typography */
	--krugio-font-body: var(--krugio-typeface-body);
	--krugio-font-heading: var(--krugio-typeface-heading);
	--krugio-font-size-base: 0.875rem;
	--krugio-font-size-sm: 0.8125rem;
	--krugio-font-size-lg: 1rem;
	--krugio-font-size-xl: 1.625rem;
	--krugio-font-size-2xl: 1.875rem;
	--krugio-font-size-3xl: 2.25rem;
	--krugio-line-height-base: 1.65;
	--krugio-line-height-heading: 1.3;
	--krugio-weight-body: 400;
	--krugio-weight-heading: 600;
	--krugio-heading-transform: none;

	/* Spacing (modular scale) */
	--krugio-space-1: 0.25rem;
	--krugio-space-2: 0.5rem;
	--krugio-space-3: 0.875rem;
	--krugio-space-4: 1.25rem;
	--krugio-space-5: 1.75rem;
	--krugio-space-6: 2.5rem;
	--krugio-space-7: 3.5rem;
	--krugio-space-8: 5rem;

	/* Shadow of an inset card (contact page map): the text colour at 5 percent */
	--krugio-shadow-card: 0 1.25rem 2.5rem color-mix(in srgb, var(--krugio-palette-ink) 5%, transparent);

	/* Buttons */
	--krugio-button-padding-y: 0.75rem;
	--krugio-button-padding-x: 1.75rem;
	--krugio-button-weight: 400;
	--krugio-button-transform: none;

	/* Layout */
	--krugio-content-width: 71.25rem;
	--krugio-content-width-wide: 90rem;
	--krugio-gutter: 1.25rem;
	--krugio-frame-gap: clamp(0.75rem, 3vw, 2.7rem);
	--krugio-footer-gap-min: 1.25rem;       /* footer box never closer to the screen edge than the product grid padding */
	--krugio-footer-copyright-size: 0.75rem;
	--krugio-footer-item-gap: 0;            /* row gap between the items of a footer menu: none on phones (items are 44 px rows) */
	--krugio-footer-menus-gap: var(--krugio-footer-item-gap); /* gap between two footer menus: on phones the same as between items, so the menus read as one list */
	--krugio-edge-gap: max(var(--krugio-frame-gap), var(--krugio-footer-gap-min)); /* screen edge to footer box, archive product grid, hero and parallax band; also the gap under the footer (KRG-90) */
	--krugio-page-title-size: var(--krugio-font-size-2xl);
	--krugio-page-title-size-lg: 2.375rem; /* the h1 of every page from 1024 px: 38 px, 27 percent above the 30 px of --krugio-font-size-2xl */
	--krugio-page-title-color: var(--krugio-color-primary);
	--krugio-page-title-space-before: var(--krugio-space-6);
	--krugio-archive-footer-gap: 2rem;      /* pagination (or last product row) to footer on archives: 32 px phones, 40 px from 768 px */
	--krugio-columns-desktop: 4;
	--krugio-columns-tablet: 3;
	--krugio-columns-mobile: 2;
	--krugio-grid-gap: 1.25rem;
	--krugio-grid-gap-row: 3rem;
	--krugio-header-height: 5rem;
	--krugio-header-height-mobile: 4.25rem; /* phones and tablets: header content height (68 px) without the 1 px hairline */
	--krugio-header-offset: calc(var(--krugio-header-height-mobile) + var(--krugio-border-width)); /* the sticky header's full height (69 px; 81 px from 1024 px): scroll-padding-top and the sticky cart totals' top */
	--krugio-adminbar-offset: 0px;          /* set on html.wp-toolbar (logged in) to the admin bar height; design.css */
	--krugio-header-z: 20;                  /* sticky header: above page content (cards 2, gallery 3), below the panels (100000) */
	--krugio-mobile-menu-sub-size: 0.75rem; /* sub-items in the mobile menu (level one uses --krugio-font-size-sm) */
	--krugio-header-actions-gap: 1.25rem;  /* desktop: space between search, cart and account */
	--krugio-drawer-width: min(24rem, 100%);
	--krugio-drawer-thumb-width: 3.5rem;
	--krugio-hero-height: 70svh;            /* tablet and desktop; screen-height driven, no pixel cap; 60svh on phones (below) */
	--krugio-band-height: min(32rem, 70svh);

	/* Media */
	--krugio-image-ratio: 4 / 5;
	--krugio-gallery-thumb-ratio: 1 / 1;
	--krugio-card-title-lines: 3;
	--krugio-card-body-inline: 1rem;        /* side padding of the text under the card image: 16 px; 8 px on phones (below) */

	/* Product card text (reference visnjafashion.rs, KRG-69): phones/tablets and desktop values */
	--krugio-card-category-size: 0.63rem;   /* 10.1 px up to 921 px, 11 px above (see below) */
	--krugio-card-title-size: var(--krugio-font-size-base);
	--krugio-card-price-size: 0.67rem;      /* 10.7 px up to 921 px, 11.7 px above */

	/* Badge */
	--krugio-badge-top: 0.75rem;
	--krugio-badge-left: 0.75rem;
	--krugio-badge-size: 0.75rem;

	/* Item look (KRG-70): shared by pagination, the product size tiles and the quantity stepper (KRG-71) and the filter-panel size tiles (KRG-74).
	   Idle = page background with a primary line and number; active/hover = filled. Corner = the global control radius. */
	--krugio-item-size: 2.75rem;
	--krugio-item-radius: var(--krugio-radius-control);
	--krugio-item-border: var(--krugio-border-width) solid var(--krugio-color-primary);
	--krugio-item-bg: var(--krugio-color-bg);
	--krugio-item-color: var(--krugio-color-primary);
	--krugio-item-hover-bg: var(--krugio-color-accent);
	--krugio-item-hover-color: var(--krugio-color-bg);
	--krugio-item-active-bg: var(--krugio-color-primary);
	--krugio-item-active-color: var(--krugio-color-bg);

	/* Cart page on phones (KRG-72): the product image block above the row data, and the small +/- control (the same 32 px as the remove X) */
	--krugio-cart-thumb-size: 6rem;
	--krugio-cart-control-size: 2rem;

	/* Quantity stepper unit (KRG-91): the side of its square cells and its icon. Product page = the item size; the cart page and the
	   drawer set the small size in quantity.css (--krugio-cart-control-size, never below 24 px, WCAG 2.2 AA 2.5.8) */
	--krugio-qty-size: var(--krugio-item-size);
	--krugio-qty-icon: 1.25rem;

	/* AJAX states (KRG-82): the drawer +/- group is as small as the cart-page phone stepper (the owner's size for small +/-, 32 px;
	   never below 24 px, WCAG 2.2 AA 2.5.8); the opacity of a region while a request runs (idle controls keep full opacity) */
	--krugio-drawer-qty-size: var(--krugio-cart-control-size);
	--krugio-busy-opacity: 0.55;

	/* Single product price (KRG-71): 20 px on phones, 24 px from 1024 px */
	--krugio-product-price-size: 1.25rem;

	/* Pagination follows the item look */
	--krugio-pagination-radius: var(--krugio-item-radius);

	/* Motion */
	--krugio-transition: 0.2s ease;
	--krugio-slide-duration: 0.28s;        /* sticky add-to-cart bar slide in / out (KRG-104); 0s with reduced motion */
}

@media (max-width: 767px) {
	:root {
		--krugio-font-size-3xl: 1.75rem;
		--krugio-band-height: 22rem;
		--krugio-hero-height: 60svh;
		--krugio-card-body-inline: 0.5rem;
	}
}

@media (min-width: 768px) {
	:root {
		--krugio-archive-footer-gap: 2.5rem;
		--krugio-footer-item-gap: 0.5rem;
		--krugio-footer-menus-gap: var(--krugio-space-4);
	}
}

@media (min-width: 1024px) {
	:root {
		--krugio-header-offset: calc(var(--krugio-header-height) + var(--krugio-border-width));
		--krugio-page-title-size: var(--krugio-page-title-size-lg);
		--krugio-product-price-size: 1.5rem;
	}
}

@media (max-width: 544px) {
	:root {
		--krugio-card-title-size: 0.68rem;      /* 10.9 px, reference at phone width */
	}
}

@media (min-width: 922px) {
	:root {
		--krugio-card-category-size: 0.69rem;   /* 11 px */
		--krugio-card-price-size: 0.73rem;      /* 11.7 px */
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--krugio-transition: 0s;
		--krugio-slide-duration: 0s;
	}
}