/*--------------------------------------------------------------
# Design Tokens — 24uur Locksmith
#
# Premium navy + gold palette optimized for trust and lead conversion.
# All colors, typography, spacing, and layout values defined here.
# Usage: var(--color-primary) etc. in any component CSS.
--------------------------------------------------------------*/

:root {

	/* ==========================================================================
	   Colors
	   ========================================================================== */

	/* --- Primary: Navy (trust, authority, security) --- */
	--color-primary:          #07203f;
	--color-primary-light:    #2d545e;
	--color-primary-dark:     #040432;

	/* --- Accent: Gold (quality, expertise, premium) --- */
	--color-accent:           #D5AD36;
	--color-accent-light:     #e1b382;
	--color-accent-dark:      #b48c36;

	/* --- Emergency: Orange (urgency — use sparingly) --- */
	--color-emergency:        #FF5A09;
	--color-emergency-dark:   #e04e00;

	/* --- Neutrals --- */
	--color-text:             #2c2c2c;
	--color-text-light:       #555555;
	--color-text-inverse:     #ffffff;
	--color-bg:               #ffffff;
	--color-bg-alt:           #f2f1ef;
	--color-bg-light:         #f7f7f5;
	--color-border:           #e0ddd8;
	--color-border-light:     #eaeaea;

	/* --- Feedback --- */
	--color-success:          #1a7a3a;
	--color-error:            #c0392b;
	--color-star:             #f5a623;

	/* ==========================================================================
	   Typography
	   ========================================================================== */

	/* --- Font families --- */
	--font-heading:           'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-body:              'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* --- Font sizes (modular scale ~1.25) --- */
	--text-xs:                0.75rem;   /* 12px */
	--text-sm:                0.875rem;  /* 14px */
	--text-base:              1rem;      /* 16px */
	--text-md:                1.125rem;  /* 18px — body default */
	--text-lg:                1.25rem;   /* 20px */
	--text-xl:                1.5rem;    /* 24px */
	--text-2xl:               1.875rem;  /* 30px */
	--text-3xl:               2.25rem;   /* 36px */
	--text-4xl:               3rem;      /* 48px */
	--text-phone:             1.5rem;    /* 24px — phone number */

	/* --- Font weights --- */
	--weight-regular:         400;
	--weight-medium:          500;
	--weight-semibold:        600;
	--weight-bold:            700;

	/* --- Line heights --- */
	--leading-tight:          1.2;
	--leading-normal:         1.5;
	--leading-relaxed:        1.65;

	/* --- Letter spacing --- */
	--tracking-tight:         -0.025em;
	--tracking-normal:        0;
	--tracking-wide:          0.05em;
	--tracking-caps:          0.1em;

	/* ==========================================================================
	   Spacing (8px grid)
	   ========================================================================== */

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

	/* ==========================================================================
	   Layout
	   ========================================================================== */

	--max-width:              1200px;
	--max-width-narrow:       800px;
	--max-width-wide:         1400px;

	--header-height:          80px;
	--header-height-mobile:   64px;

	/* ==========================================================================
	   Borders & Radii
	   ========================================================================== */

	--radius-sm:              4px;
	--radius-md:              8px;
	--radius-lg:              12px;
	--radius-full:            9999px;

	--border-width:           1px;
	--border:                 var(--border-width) solid var(--color-border);

	/* ==========================================================================
	   Shadows (subtle, premium)
	   ========================================================================== */

	--shadow-sm:              0 1px 2px rgba(4, 4, 50, 0.06);
	--shadow-md:              0 4px 12px rgba(4, 4, 50, 0.08);
	--shadow-lg:              0 8px 30px rgba(4, 4, 50, 0.12);
	--shadow-card:            0 2px 8px rgba(4, 4, 50, 0.06);

	/* ==========================================================================
	   Transitions
	   ========================================================================== */

	--transition-fast:        150ms ease;
	--transition-base:        250ms ease;
	--transition-slow:        400ms ease;

	/* ==========================================================================
	   Z-index scale
	   ========================================================================== */

	--z-dropdown:             100;
	--z-sticky:               200;
	--z-overlay:              300;
	--z-modal:                400;
	--z-toast:                500;
}