/* ============================================================================
   CSS VARIABLES (Design Tokens)

   Location: /Frontend/Web/wwwroot/css/variables.css
   Purpose: Central definition of all design tokens used across the application

   CRITICAL: This file MUST be loaded FIRST before all other CSS files
   See CssConventions.md for load order requirements
   ============================================================================ */

:root {
	/* ========================================================================
	   GLOBAL COLOR SYSTEM
	   ======================================================================== */

	/* Primary Colors (Wine Red) */
	--color-primary-500: #661652;   /* Primary wine red */
	--color-primary-600: #550F43;   /* Darker wine red for hover states */
	--color-primary-700: #480437;   /* Darker wine red (hover states) */
	--color-primary-800: #2C0021;   /* Darkest wine red (active states) */
	--color-primary-500-overlay: rgba(102, 22, 82, 0.5); /* 50% transparent wine red (hero overlays) */

	/* Neutral Colors (Rosa-Grey Scale) */
	--color-neutral-50: #F9F6F8;    /* Lightest rosa-grey (backgrounds) */
	--color-neutral-200: #E6D4DC;   /* Light rosa-grey (borders) */
	--color-neutral-700: #6B5361;   /* Medium rosa-grey (body text) */
	--color-neutral-900: #2F232B;   /* Darkest rosa-grey (headings) */
	--color-neutral-white: #FFFFFF; /* Pure white */

	/* ========================================================================
	   TYPOGRAPHY SYSTEM
	   ======================================================================== */

	/* Font Families */
	--font-heading: 'Marcellus', serif;
	--font-body: 'DM Sans', sans-serif;

	/* Font Sizes */
	--font-size-base: 1rem;         /* 16px - Base body text */
	--font-size-lg: 1.125rem;       /* 18px - Large body text */
	--font-size-xl: 1.25rem;        /* 20px - Extra large text */
	--font-size-2xl: 1.75rem;       /* 28px - H2 tablet */
	--font-size-3xl: 1.875rem;      /* 30px - H1 mobile */
	--font-size-4xl: 2.25rem;       /* 36px - H1 tablet */
	--font-size-5xl: 3rem;          /* 48px - H1 desktop */
	--font-size-heading-h2-desktop: 2rem;  /* 32px - H2 desktop */

	/* Font Weights */
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* Line Heights */
	--line-height-tight: 1.2;       /* Headings */
	--line-height-relaxed: 1.75;    /* Body text */

	/* Letter Spacing */
	--letter-spacing-tight: -0.01em;

	/* ========================================================================
	   SPACING SYSTEM (8px Grid)
	   ======================================================================== */

	--spacing-1: 0.25rem;  /* 4px */
	--spacing-1-negative: -0.25rem;  /* -4px for transforms */
	--spacing-2: 0.5rem;   /* 8px */
	--spacing-3: 0.75rem;  /* 12px */
	--spacing-4: 1rem;     /* 16px */
	--spacing-5: 1.25rem;  /* 20px */
	--spacing-6: 1.5rem;   /* 24px */
	--spacing-8: 2rem;     /* 32px */
	--spacing-10: 2.5rem;  /* 40px */
	--spacing-12: 3rem;    /* 48px */
	--spacing-14: 3.5rem;  /* 56px */
	--spacing-16: 4rem;    /* 64px */
	--spacing-20: 5rem;    /* 80px */

	/* ========================================================================
	   BORDER & RADIUS
	   ======================================================================== */

	--radius-sm: 2px;  /* Small radius for buttons and small elements */
	--radius-md: 6px;  /* Button border radius */

	/* Border Widths */
	--border-width-thin: 1px;   /* Thin borders (dividers) */
	--border-width-medium: 2px; /* Medium borders (card outlines) */
	--border-width-thick: 3px;  /* Thick borders (accent lines) */

	/* ========================================================================
	   TRANSITIONS
	   ======================================================================== */

	--duration-200: 200ms; /* Standard transition duration */
	--transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Standard transition timing for smooth interactions */

	/* ========================================================================
	   SHADOWS
	   ======================================================================== */

	--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08); /* Small shadow for subtle hover effects */
	--shadow-card: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
	--shadow-card-hover: 0 10px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);

	/* ========================================================================
	   SIZING
	   ======================================================================== */

	--min-width-button: 150px;

	/* ========================================================================
	   COOKIE BANNER COLORS (Component-Specific)
	   ======================================================================== */

	/* Banner Background & Structure */
	--cookie-banner-bg: #FFFFFF;
	--cookie-banner-shadow: rgba(102, 22, 82, 0.08);

	/* Text Colors */
	--cookie-banner-headline: #661652;
	--cookie-banner-text: #2F232B;

	/* Accept Button Colors (Green) */
	--cookie-banner-accept-bg: #36771A;
	--cookie-banner-accept-color: #FFFFFF;
	--cookie-banner-accept-hover-bg: #1D5405;
	--cookie-banner-accept-hover-shadow: rgba(54, 119, 26, 0.3);
	--cookie-banner-accept-focus-outline: #36771A;
	--cookie-banner-accept-active-bg: #0F3301;

	/* Reject Button Colors (Pink) */
	--cookie-banner-reject-bg: #F2E1E9;
	--cookie-banner-reject-color: #661652;
	--cookie-banner-reject-border: #E8D3DD;
	--cookie-banner-reject-hover-bg: #E8D3DD;
	--cookie-banner-reject-hover-border: #D4B8C5;
	--cookie-banner-reject-hover-shadow: rgba(166, 92, 148, 0.15);
	--cookie-banner-reject-focus-outline: #661652;
	--cookie-banner-reject-active-bg: #D4B8C5;
	--cookie-banner-reject-active-border: #B89BAA;

	/* ========================================================================
	   BLOG NAVIGATION BUTTON TOKENS
	   ======================================================================== */

	--radius-full: 9999px;  /* Circular border radius */
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);  /* Medium shadow */
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);  /* Large shadow */
	--color-primary-900: #2C0021;  /* Darkest wine red (active states) */
	--opacity-50: 0.5;  /* 50% opacity (disabled states) */
}