/* =========================================================================
 * Curvita — Design Tokens
 * -------------------------------------------------------------------------
 * Single source of truth for every color, font, spacing value, breakpoint,
 * and timing curve used across the theme. Change a value here and the
 * change flows through every component. Never hard-code a color or size
 * in a component stylesheet — always reference a token.
 * =========================================================================
 */

:root {

	/* -----------------------------------------------------------------
	 * Colors — brand palette (extracted from curvita.gr computed styles)
	 * ----------------------------------------------------------------- */

	/* Brand */
	--c-pink-brand:  #FFA6C9;  /* Header background, brand signature */
	--c-coral:       #E27C7C;  /* Hover, active, breadcrumb, progress steps */
	--c-navy:        #0E243F;  /* Primary CTA (add-to-cart, checkout) */
	--c-red-sale:    #D63637;  /* Sale prices, strikethrough, badges */

	/* Neutrals */
	--c-text:        #000000;
	--c-text-muted:  #686868;
	--c-text-dark:   #43454B;
	--c-surface:     #F9F9F9;  /* Footer, section backgrounds */
	--c-white:       #FFFFFF;
	--c-black:       #000000;
	--c-border:      #E5E5E5;

	/* Feedback */
	--c-success:     #22A558;
	--c-warning:     #F5A623;
	--c-error:       var(--c-red-sale);

	/* Semantic aliases — use these in components, not the raw colors,
	 * so future theming is a one-line change */
	--c-body-bg:     var(--c-white);
	--c-body-text:   var(--c-text);
	--c-link:        var(--c-text);
	--c-link-hover:  var(--c-coral);
	--c-primary:     var(--c-navy);
	--c-primary-text: var(--c-surface);
	--c-accent:      var(--c-coral);
	--c-brand:       var(--c-pink-brand);
	--c-sale:        var(--c-red-sale);


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

	--font-body:    'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
	--font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-mono:    ui-monospace, 'SF Mono', Menlo, Monaco, 'Courier New', monospace;

	/* Fluid font scale using clamp(min, preferred, max) so text scales
	 * smoothly from 320px to 1440px without media query breakpoints */
	--fs-xs:   clamp(0.75rem,   0.70rem + 0.20vw, 0.8125rem);  /* 12-13 */
	--fs-sm:   clamp(0.8125rem, 0.75rem + 0.30vw, 0.875rem);   /* 13-14 */
	--fs-base: clamp(0.9375rem, 0.87rem + 0.30vw, 1rem);       /* 15-16 */
	--fs-md:   clamp(1rem,      0.95rem + 0.30vw, 1.125rem);   /* 16-18 */
	--fs-lg:   clamp(1.125rem,  1.00rem + 0.50vw, 1.25rem);    /* 18-20 */
	--fs-xl:   clamp(1.25rem,   1.10rem + 0.70vw, 1.5rem);     /* 20-24 */
	--fs-2xl:  clamp(1.5rem,    1.30rem + 1.00vw, 2rem);       /* 24-32 */
	--fs-3xl:  clamp(1.75rem,   1.50rem + 1.25vw, 2.5rem);     /* 28-40 */
	--fs-4xl:  clamp(2rem,      1.60rem + 2.00vw, 3rem);       /* 32-48 */

	/* Brand-specific fixed sizes (extracted from curvita.gr) */
	--fs-product-card-title:   1.25rem;    /* 20px */
	--fs-product-card-price:   0.8125rem;  /* 13px */
	--fs-single-product-title: 2rem;       /* 32px */
	--fs-single-product-price: 1.25rem;    /* 20px */
	--fs-button:               0.75rem;    /* 12px */

	/* Line heights */
	--lh-tight:    1.1;
	--lh-heading:  1.2;
	--lh-base:     1.625;  /* 26px at 16px body — matches source site */
	--lh-relaxed:  1.75;

	/* Letter spacing — brand uses tight tracking on product titles */
	--ls-tight:    -0.0625em;  /* ≈ -1px at 16px */
	--ls-normal:   0;
	--ls-wide:     0.02em;
	--ls-wider:    0.05em;

	/* Font weights */
	--fw-regular:  400;
	--fw-semibold: 600;
	--fw-bold:     700;


	/* -----------------------------------------------------------------
	 * Spacing scale — 4px base, t-shirt sizes
	 * ----------------------------------------------------------------- */
	--sp-0:   0;
	--sp-1:   0.25rem;   /* 4  */
	--sp-2:   0.5rem;    /* 8  */
	--sp-3:   0.75rem;   /* 12 */
	--sp-4:   1rem;      /* 16 */
	--sp-5:   1.25rem;   /* 20 */
	--sp-6:   1.5rem;    /* 24 */
	--sp-8:   2rem;      /* 32 */
	--sp-10:  2.5rem;    /* 40 */
	--sp-12:  3rem;      /* 48 */
	--sp-16:  4rem;      /* 64 */
	--sp-20:  5rem;      /* 80 */
	--sp-24:  6rem;      /* 96 */

	/* -----------------------------------------------------------------
	 * Layout
	 * ----------------------------------------------------------------- */
	--container-max:     1280px;
	--container-wide:    1440px;
	--container-narrow:  768px;
	--container-padding: clamp(1rem, 3vw, 2rem);

	/* Header / top bar heights — intentionally slimmer than the source
	 * site's 113.5px (which was shouty); 80px feels brand-forward
	 * without eating the viewport on mobile browsers with URL bars. */
	--header-height:         80px;
	--header-height-mobile:  56px;
	--top-bar-height:        36px;

	/* Product image aspect ratio — 3:4 portrait (less tall than the source
	 * site's 9:16, so more products fit per scroll without feeling cramped) */
	--product-aspect-ratio: 3 / 4;


	/* -----------------------------------------------------------------
	 * Breakpoints — for reference; use values directly in media queries
	 * (CSS custom properties can't be used inside @media directly)
	 *
	 *   xs:  400px    Small phone
	 *   sm:  600px    Phone
	 *   md:  768px    Tablet portrait
	 *   wp:  782px    WordPress admin bar breakpoint
	 *   lg:  1024px   Tablet landscape / small desktop
	 *   xl:  1175px   Medium desktop
	 *   xxl: 1280px   Full desktop / container max
	 * ----------------------------------------------------------------- */


	/* -----------------------------------------------------------------
	 * Borders — brand uses 2px borders on buttons, FLAT style (radius 0)
	 * ----------------------------------------------------------------- */
	--border-width:       2px;
	--border-width-thin:  1px;
	--border-color:       var(--c-border);
	--radius:             0;       /* Flat design — do not change */
	--radius-pill:        9999px;  /* Only for progress step indicators */

	/* -----------------------------------------------------------------
	 * Motion — respect user's reduced-motion preference in reset.css
	 * ----------------------------------------------------------------- */
	--transition-fast: 120ms ease-out;
	--transition-base: 200ms ease-out;
	--transition-slow: 400ms ease-out;

	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out:    cubic-bezier(0, 0, 0.2, 1);
	--ease-in:     cubic-bezier(0.4, 0, 1, 1);


	/* -----------------------------------------------------------------
	 * Shadows — brand spec is NO shadows; defined only for focus ring
	 * ----------------------------------------------------------------- */
	--shadow-none:  none;
	--shadow-focus: 0 0 0 3px rgb(226 124 124 / 40%);  /* coral focus ring */


	/* -----------------------------------------------------------------
	 * Z-index scale — predictable stacking context hierarchy
	 * ----------------------------------------------------------------- */
	--z-below:         -1;
	--z-base:           0;
	--z-raised:         10;
	--z-header:         100;
	--z-header-sticky:  200;
	--z-drawer:         300;
	--z-dropdown:       400;
	--z-modal-backdrop: 490;
	--z-modal:          500;
	--z-toast:          600;
	--z-tooltip:        700;
}