/*
 * Profigarden design tokens: the single source of truth for the theme and the plugins.
 *
 * Every size, gap and colour on the site comes from here. Components never hard-code
 * a spacing or a colour, they pick a token. Change a value here and it changes everywhere.
 *
 * Fluid values grow linearly from a 375px to a 1440px viewport (clamp), so there are no
 * jumps between breakpoints. Breakpoints are not tokens (media queries cannot read custom
 * properties): 767px (phone) and 1024px (tablet), the same as the plugins use.
 *
 * Names of the colour, type and space tokens are the same as in profigarden-site
 * (assets/css/tokens.css), so the plugin modules work unchanged on this theme. Groups go by meaning
 * (colour, type, grid, rhythm, controls, shape, layers, stacking, motion), sizes of single components
 * come last; every token is declared once.
 */
:root {
	/* ---------- Brand ---------- */
	--pg-accent:        #659900;   /* brand green: bars, borders, icons, never small text (3.4:1 on white) */
	--pg-accent-hover:  #4E7501;
	--pg-accent-deep:   #3D5C01;   /* green text and links on hover (the role --pg-accent-text-hover on white) */
	--pg-primary:       #659901;   /* fill of the primary button (Jaroslav, zadanie 11): the brand green; it on white 3.4:1, on --pg-surface-card 3.1:1, on --pg-beige 3.0:1, on --pg-green-dark 3.2:1 */
	--pg-primary-hover: #578301;   /* the same button under the pointer: darker, the white label 4.51:1 on it */
	--pg-on-primary:    #FFF;      /* its label, white (Jaroslav 11. 11., zadanie 11, bod 1): 3.44:1 on --pg-primary, under the 4.5:1 of WCAG AA for a 16 px label; an exception the owner accepted for this one pair, the fill stays #659901 (black on it would have 6.1:1) */
	--pg-accent-on-dark:    #A6D14F;   /* the same role on --pg-green-dark, 6.2:1 both ways */
	--pg-accent-on-dark-hover: #C8E68F;
	--pg-border:        #F2F2F2;
	--pg-beige:         #FFEECF;
	--pg-green-dark:    #214332;
	--pg-green:         #47843B;   /* the bands Kde nás nájdete and Za rok sme nasadili (Jaroslav 10. 11.): white text on it 4.5:1, nothing lighter */
	--pg-badge-border:  #ccb68e;

	/* ---------- Text and surfaces ---------- */
	--pg-text:          #000;
	--pg-text-ui:       #111827;
	--pg-muted-light:   #6E6E6E;   /* small secondary text (card category, price without VAT): 5.1:1 on white, 4.6:1 on --pg-surface-card */
	--pg-text-2-on-dark: #D7E3DC;  /* --pg-text-2 on --pg-green-dark, 8.3:1 */
	--pg-muted-on-dark:  #B5C7BD;  /* --pg-muted on --pg-green-dark, 6.2:1 */
	--pg-line:          #e5e7eb;   /* dividers and frames, not the edge of a control (1.24:1) */
	--pg-line-control:  #868c96;   /* edge of a control (field, quantity, chip) on white: 3.4:1, 3.1:1 on --pg-surface-card (WCAG 1.4.11) */
	--pg-surface-hover: #f3f4f6;
	--pg-surface-soft:  #f9fafb;
	--pg-surface-card:  #F4F4F4;
	--pg-surface-light: #F8F8F8;
	--pg-surface-tag:   #E8EFE0;   /* a tag without a colour: a soft solid chip, visible on white and on --pg-surface-card (black text 17.9:1) */
	--pg-white:         #fff;
	--pg-overscroll-top:    var(--pg-white);  /* the page pulled past its top (rubber band): the header, the announcement bar's colour while it shows (Assets::overscroll()) */
	--pg-overscroll-bottom: var(--pg-beige);  /* past its bottom: the footer (white on the checkout without a footer) */

	/* ---------- States ---------- */
	--pg-success:    #16a34a;
	--pg-success-bg: #f0fdf4;
	--pg-warning:    #d97706;
	--pg-warning-bg: #fffbeb;
	--pg-warning-text: #b45309;  /* amber text: 5.0:1 on white, 4.8:1 on --pg-warning-bg (low stock, "Na objednávku") */
	--pg-danger:     #dc2626;
	--pg-danger-text: #b91c1c;   /* red text on --pg-danger-bg, 5.9:1 */
	--pg-danger-bg:  #fef2f2;
	--pg-danger-line:  #f5c6c6;  /* the thin edge of an error notice on --pg-danger-bg (zadanie 10, bod 8), a tint, not a control */
	--pg-success-line: #c3e6cb;  /* the same of a notice of success */
	--pg-notice-line-w: 3px;     /* the line of the colour of the state at the start of a notice */
	--pg-badge:      #e53935;
	--pg-sale:       #DF090B;    /* a sale only (Jaroslav 10. 11.): the sale price, the saving, the sale tag; white on it and it on white 5.0:1 */
	--pg-opacity-off:  .45;      /* a control that is off: disabled buttons, the arrow at the end */
	--pg-opacity-busy: .7;       /* a control or a list while its request runs */

	/* ---------- Typography ---------- */
	--pg-font-body:    "Hanken Grotesk", system-ui, sans-serif;
	--pg-font-display: "Unbounded", system-ui, sans-serif;

	/* Headings: one scale for the whole site. Tag (h1..h4) is semantics,
	   class .pg-h1..pg-h4 is the look, so an h2 can look like an h3. */
	--pg-h1: clamp(1.875rem, 1.303rem + 2.441vw, 3.5rem);   /* 30 to 56: page title, hero */
	--pg-h2: clamp(1.5rem, 1.148rem + 1.502vw, 2.5rem);     /* 24 to 40: section title */
	--pg-h3: clamp(1.25rem, 1.118rem + 0.563vw, 1.625rem);  /* 20 to 26: block title */
	--pg-h4: clamp(1.125rem, 1.081rem + 0.188vw, 1.25rem);  /* 18 to 20: card, small block */
	--pg-lead: clamp(1.0625rem, 1.018rem + 0.188vw, 1.1875rem); /* 17 to 19: intro paragraph */
	--pg-text-m:  1rem;      /* 16: body */
	--pg-text-s:  0.875rem;  /* 14: secondary */
	--pg-text-xs: 0.75rem;   /* 12: labels, badges */

	--pg-lh-tight: 1.15;  /* display headings */
	--pg-lh-snug:  1.3;   /* h4, cards, UI */
	--pg-lh-body:  1.65;  /* paragraphs */
	--pg-lh-lead:  1.55;  /* intro paragraph */
	--pg-lh-control: 1.2; /* buttons, controls */
	--pg-fw-regular: 400; /* plain text inside bold text: struck regular price, row labels, units */
	--pg-fw-medium:  500; /* tags (the weight of the live badges) */
	--pg-fw-display: 600; /* headings; emphasis in body text (links in text, discount amounts) */
	--pg-fw-bold:    700;
	--pg-tracking-display: -0.01em;
	--pg-tracking-caps: .06em; /* small upper case labels: eyebrow, group titles */
	--pg-measure: 68ch;   /* longest comfortable line of text */

	/* Fixed sizes used by the plugin modules */
	--pg-fs-11: 11px;
	--pg-fs-12: 12px;
	--pg-fs-13: 13px;
	--pg-fs-14: 14px;
	--pg-fs-15: 15px;
	--pg-fs-16: 16px;
	--pg-fs-18: 18px;
	--pg-fs-24: 24px;
	--pg-fs-32: 32px;
	--pg-fs-40: 40px;
	--pg-fs-48: 48px;

	/* ---------- Page grid ---------- */
	--pg-container: 1600px;                   /* widest page frame, gutters included */
	--pg-gutter:    clamp(16px, 3vw, 48px);   /* side margin: 16 phone, 31 tablet, 43 at 1440, 48 from 1600 */
	--pg-content:   calc(var(--pg-container) - 2 * var(--pg-gutter)); /* 1504 at full width */
	--pg-narrow:    760px;                    /* text column: blog, legal pages */
	--pg-card-min:  260px;                    /* narrowest card in an auto-fill grid */
	--pg-header-h:  96px;

	/* ---------- Rhythm: gaps between things, from the largest to the smallest ---------- */
	--pg-gap-section: clamp(3.5rem, 2.268rem + 5.258vw, 7rem);    /* 56 to 112: between page sections */
	--pg-section-pad: clamp(2.5rem, 1.62rem + 3.756vw, 5rem);     /* 40 to 80: inside a section with background */
	--pg-gap-head:    clamp(1.25rem, 0.81rem + 1.878vw, 2.5rem);  /* 20 to 40: section heading to its content */
	--pg-gap-pdp:     clamp(1.5rem, 0.62rem + 3.756vw, 4rem);     /* 24 to 64: product page, gallery to info column */
	--pg-gap-block:   clamp(1rem, 0.824rem + 0.751vw, 1.5rem);    /* 16 to 24: between blocks in a column (price, buttons, sets) */
	--pg-gap-grid:    clamp(0.75rem, 0.574rem + 0.751vw, 1.25rem);/* 12 to 20: between cards in a row */
	--pg-gap-grid-row: clamp(1.5rem, 1.148rem + 1.502vw, 2.5rem); /* 24 to 40: between rows of cards */
	--pg-gap-el:      clamp(0.5rem, 0.412rem + 0.376vw, 0.75rem); /* 8 to 12: inside a block (title, text, price) */
	--pg-sticky-top:  calc(var(--pg-header-h) + var(--pg-gap-block));

	/* Fixed spacing scale, for paddings of controls and small details */
	--pg-space-2:   2px;
	--pg-space-4:   4px;
	--pg-space-8:   8px;
	--pg-space-12:  12px;
	--pg-space-16:  16px;
	--pg-space-20:  20px;
	--pg-space-24:  24px;
	--pg-space-32:  32px;
	--pg-space-48:  48px;
	--pg-space-64:  64px;
	--pg-space-96:  96px;

	/* ---------- Controls ---------- */
	--pg-control-h:   52px;  /* buttons, inputs, selects: one height on the whole site, the fields of the forms too (zadanie 10, bod 10) */
	--pg-control-h-s: 40px;  /* small buttons, small quantity, filter chips */
	--pg-control-px:  24px;
	--pg-icon-btn:    38px;
	--pg-icon-stroke: 2;     /* line width of every icon of the site (Icons::svg(), .pg-svg) */
	--pg-icon-stroke-l: 1.5; /* the same line on a 32 px icon (the contact details of Kontakt): 2 px on the screen as a 24 px icon */
	--pg-textarea-min-h: 140px;
	--pg-textarea-pad-y: calc((var(--pg-control-h) - 2px - 1em * var(--pg-lh-snug)) / 2); /* a text area: its first line in the middle of the height of a field, where the text of a field stands (Jaroslav 7. 11.) */
	--pg-textarea-pad-top: calc((var(--pg-control-h) + var(--pg-space-20)) / 2 - 1px - .5em * var(--pg-lh-snug)); /* the same with the label floated above a value: where the text of a filled field stands (under the label, the field has 20 px padding above) */
	--pg-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); /* arrow of .pg-select: chevron-down of Icons::svg(), line 2, in --pg-text (black) */

	/* ---------- Shape and shadow ---------- */
	--pg-radius:        0;
	--pg-radius-s:      4px;   /* thumbnails, small boxes */
	--pg-radius-pill:   999px; /* tags and chips, round buttons */
	--pg-shadow-pop:    0 8px 24px rgba(0, 0, 0, .10);
	--pg-shadow-drawer: -4px 0 24px rgba(0, 0, 0, .12);

	/* ---------- Layers over the page and over photos ---------- */
	--pg-overlay:       rgba(0, 0, 0, .45);  /* behind a drawer or dialog */
	--pg-scrim:         rgba(0, 0, 0, .55);  /* over a photo under white text: 4.7:1 even on a white photo */
	--pg-scrim-strong:  rgba(0, 0, 0, .75);  /* bottom of a tile, behind its title */
	--pg-scrim-banner:  rgba(0, 0, 0, .62);  /* the header of the catalogue with its description on the photo (Jaroslav 10. 11.): white text 6.2:1 even on a white photo */
	--pg-hero-ctrl:     rgba(255, 255, 255, .2);  /* the arrows and Pozastaviť of the slides of the home page at rest: quiet on the photo (zadanie 11, pripomienka 2) */
	--pg-hero-ctrl-bg:  rgba(255, 255, 255, .1);  /* their fill under the pointer and with the focus of the keyboard, the icon then --pg-white */
	--pg-lightbox-bg:   var(--pg-white);     /* photo lightbox (lightbox.css), white as the product page had it; dark: rgba(0, 0, 0, .9) with --pg-lightbox-fg white */
	--pg-lightbox-fg:   var(--pg-text);      /* text, buttons and focus ring on --pg-lightbox-bg */

	/* ---------- Stacking ---------- */
	--pg-z-below:    -1;   /* behind the content of its own stacking context (isolation: isolate): photo and scrim of a hero or tile */
	--pg-z-raised:   1;    /* inside a component: tags and counter over a photo */
	--pg-z-raised-2: 2;    /* inside a component: arrows over the tags */
	--pg-z-sticky:   10;
	--pg-z-header:   1000;
	--pg-z-header-layer: 1001; /* inside the stacking context of the header, above its bar (the navbar's 1000): the phone menu */
	--pg-z-overlay:  99998;
	--pg-z-drawer:   99999;
	--pg-z-dialog:   100000;

	/* The page locked under a layer (side cart, menus, search, filter panel): site.js (pgLock) measures these when a layer
	   opens and writes them on html, the values here hold until then. */
	--pg-lock-sb:     0px;                                       /* the width of the scrollbar that went with the lock */
	--pg-lock-top:    var(--wp-admin--admin-bar--height, 0px);   /* the part of the admin bar of WordPress in view: the side cart and the filter panel start under it */
	--pg-lock-header: var(--pg-header-h);                        /* the bottom edge of the header in the window: the phone menu starts there */

	/* ---------- Motion ---------- */
	--pg-dur-fast: .15s;
	--pg-dur:      .25s;
	--pg-dur-slow: .4s;
	--pg-ease:     cubic-bezier(.4, 0, .2, 1);
	--pg-ease-out: cubic-bezier(.2, .8, .2, 1);
	--pg-dur-expand:  .3s;                         /* everything that unrolls (assets/js/expand.js, zadanie 10, bod 7): descriptions, rows, filters, checkout, FAQ */
	--pg-ease-expand: cubic-bezier(.4, 0, .2, 1);  /* and its curve; jQuery's slides of WooCommerce take both on this theme */

	/* ---------- Sizes of components (live measurements) ---------- */
	--pg-banner-min-h:    200px;   /* compact hero: category and search banner (live: 194 to 208 px) */
	--pg-hero-intro-lines: 3;      /* the description of a category in its header, folded to this many lines (Zobraziť viac); 3 keeps the first row of cards whole above the fold at 1512 x 860 with a long one */
	--pg-hero-min-h:      clamp(13.125rem, 11.364rem + 7.512vw, 18.125rem); /* 210 to 290: hero of the blog and Realizácie (live) */
	--pg-hero-tall:       clamp(17.5rem, 13.76rem + 15.96vw, 28.125rem);    /* 280 to 450: hero of an article */
	--pg-hero-home:       clamp(18.75rem, 15.229rem + 15.023vw, 28.75rem);  /* 300 to 460: a slide of the home page (live slides) */
	--pg-hero-card-w:     20rem;   /* the small card of a product on a slide of the home page (320 px) */
	--pg-tile-h:          128px;   /* subcategory tile (live) */
	--pg-tile-h-l:        250px;   /* category tile on Všetky kategórie (live) */
	--pg-shop-sidebar:    280px;   /* filter column of the catalogue */
	--pg-shop-filters-top: calc(var(--pg-header-h) + var(--pg-gap-el)); /* the sticky filter column: under the sticky header with a small gap (the admin bar of an editor covers the header, not the column) */
	--pg-filters-panel-w: 400px;   /* off-canvas filter panel on a tablet, full width on a phone */
	--pg-search-panel-h:  min(70vh, 34rem); /* suggestions under the search bar, scrolls inside */
	--pg-search-form-w:   40rem;   /* search field and button on the results page */
	--pg-gallery-thumb:   clamp(4rem, 6.7vw, 6rem); /* product gallery: thumbnail strip next to the main photo (desktop), about a seventh of the 50/50 column: 69 px at 1025, 96 px from 1433 */
	--pg-gallery-thumb-s: 64px;    /* thumbnails under the photo in the lightbox */
	--pg-map-ratio:       4 / 3;   /* the map of Google without a map image in the admin (Map::box(), footer.css) */
	--pg-gallery-peek:    88%;     /* phone and tablet: width of one photo, the next one peeks in */
	--pg-zoom-max:        4;       /* lightbox: largest zoom of a photo */
	--pg-zoom-tap:        2.5;     /* lightbox: zoom of a double click, double tap or the zoom button */
	--pg-toc-w:           280px;   /* table of contents next to an article */
	--pg-cart-ship-logo-h: 28px;   /* cart: a logo in the label of a shipping method (Toptrans), at most this high */
	--pg-cart-ship-logo-w: 112px;  /* and at most this wide (four times its height) */
	--pg-share-target:    44px;    /* an icon of Zdieľať na: (the target size of WCAG 2.5.5) */
	--pg-usp-icon-l:      48px;    /* the icons of Výhody on the home page, twice the 24 px of the product page (Jaroslav 10. 11.) */
	--pg-usp-title-l:     clamp(1rem, 0.956rem + 0.188vw, 1.125rem); /* 16 to 18: their titles, a step under --pg-h4 (zadanie 10, bod 4) */
	--pg-gap-usp:         var(--pg-gap-head); /* 20 to 40: Výhody right under the hero of the home page, instead of --pg-gap-section, so the top of the row is above the fold at 1512 x 860 (zadanie 10, bod 4) */
	--pg-footer-logo:     155px;   /* height of the logo in the footer, the live footer shows it 155 x 155 */
	--pg-account-nav-w:   280px;   /* Môj účet: the menu column on a desktop (the filter column and the table of contents have the same) */
	--pg-account-auth-w:  32rem;   /* Môj účet: a panel of the login, the registration or the password (512 px) */
}

/*
 * Colour roles that a dark section switches to its on-dark values (layout.css, .pg-section--dark).
 * A light surface inside a dark section declares them again from here: the white or light boxes of
 * the plugin modules on their own, any other element with .pg-on-light. Text, links, buttons and
 * focus all read these roles, so one rule is enough for a surface.
 */
:root,
.pg-on-light,
.pg-section--dark .pg-card,
.pg-section--dark .pg-buybox__box,
.pg-section--dark .pg-bundle,
.pg-section--dark .pg-usp__item {
	--pg-accent-text:   #4E7501;   /* green for text, 5.4:1 on white (WCAG AA); the primary button has its own --pg-primary */
	--pg-accent-text-hover: var(--pg-accent-deep);
	--pg-text-2:        #374151;
	--pg-muted:         #6b7280;
	--pg-focus-color:   var(--pg-text);   /* focus outline, white on dark sections */
	--pg-focus:         0 0 0 2px var(--pg-white), 0 0 0 4px var(--pg-accent-text); /* ring for inputs */
	--pg-on-accent:     var(--pg-white);   /* text on a --pg-accent-text fill (the primary button of a green band) */
	--pg-ink:           var(--pg-text);    /* secondary button: text and line, its fill on hover */
	--pg-ink-inverse:   var(--pg-white);   /* text on --pg-ink (secondary button on hover) */
	--pg-ink-paper:     var(--pg-white);   /* fill of the secondary button: white on a white or grey surface, transparent on a dark section */
	--pg-ghost-hover-bg: var(--pg-surface-hover); /* quiet icon control (.pg-btn--ghost.pg-btn--icon) on hover */
	--pg-ghost-hover-fg: var(--pg-text);
}

@media (max-width: 767px) {
	:root {
		--pg-header-h:   64px;
		--pg-control-h:  48px;
		--pg-control-px: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--pg-dur-fast: 0s;
		--pg-dur:      0s;
		--pg-dur-slow: 0s;
		--pg-dur-expand: 0s;
	}
}