/*
Theme Name:  DrukPro Child
Theme URI:   https://drukpro.nl
Description: DrukPro custom child theme — gebouwd op Storefront
Author:      DrukPro
Author URI:  https://drukpro.nl
Template:    storefront
Version:     1.0.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: drukpro-child
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
	/* Brand */
	--color-accent:          #07AC2B;
	--color-accent-hover:    #059924;
	--color-accent-light:    #e8f8ec;
	--color-accent-text:     #ffffff;

	/* Text */
	--color-text-primary:    #1d1d1a;
	--color-text-secondary:  #646668;
	--color-text-muted:      #9ca3af;
	--color-text-inverted:   #ffffff;

	/* Backgrounds */
	--color-bg-body:         #f5f5f7;
	--color-bg-surface:      #ffffff;
	--color-bg-subtle:       #F4F4F4;

	/* Borders */
	--color-border:          #c4c4c4;
	--color-border-strong:   #a0a0a0;

	/* Feedback */
	--color-success:         #07AC2B;
	--color-success-light:   #e8f8ec;
	--color-error:           #dc2626;
	--color-error-light:     #fef2f2;
	--color-warning:         #f59e0b;
	--color-warning-light:   #fffbeb;

	/* Typography */
	--font-primary:          'Plus Jakarta Sans', sans-serif;
	--font-size-xs:          0.75rem;    /* 12px */
	--font-size-sm:          0.875rem;   /* 14px */
	--font-size-base:        1rem;       /* 16px */
	--font-size-md:          1.125rem;   /* 18px */
	--font-size-lg:          1.25rem;    /* 20px */
	--font-size-xl:          1.5rem;     /* 24px */
	--font-size-2xl:         1.875rem;   /* 30px */
	--font-size-3xl:         2.25rem;    /* 36px */
	--font-size-4xl:         3rem;       /* 48px */

	--font-weight-normal:    400;
	--font-weight-medium:    500;
	--font-weight-semibold:  600;
	--font-weight-bold:      700;

	--line-height-tight:     1.25;
	--line-height-normal:    1.5;
	--line-height-relaxed:   1.7;

	--letter-spacing-tight:  -0.02em;
	--letter-spacing-normal: 0;
	--letter-spacing-wide:   0.05em;

	/* Spacing */
	--space-1:   0.25rem;   /* 4px */
	--space-2:   0.5rem;    /* 8px */
	--space-3:   0.75rem;   /* 12px */
	--space-4:   1rem;      /* 16px */
	--space-5:   1.25rem;   /* 20px */
	--space-6:   1.5rem;    /* 24px */
	--space-8:   2rem;      /* 32px */
	--space-10:  2.5rem;    /* 40px */
	--space-12:  3rem;      /* 48px */
	--space-16:  4rem;      /* 64px */
	--space-20:  5rem;      /* 80px */

	/* Layout */
	--container-max:         1290px;
	--container-gutter:      32px;
	--grid-cols:             12;

	/* Radius */
	--radius-sm:   6px;
	--radius-md:   10px;
	--radius-lg:   14px;
	--radius-xl:   18px;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
	--shadow-md:   0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
	--shadow-lg:   0 10px 30px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.04);

	/* Transitions */
	--transition-fast:   0.15s ease;
	--transition-base:   0.2s ease;
	--transition-slow:   0.3s ease;

	/* Z-index */
	--z-dropdown:  100;
	--z-sticky:    200;
	--z-overlay:   300;
	--z-modal:     400;
	--z-toast:     500;
}