/**
 * CSS Variables
 * Brand colors, spacing, typography, and other design tokens
 *
 * @package GospelHope
 */

/* Helvetica Neue Font Family */
@font-face {
	font-family: 'Helvetica Neue';
	src: url('../fonts/helveticaneue-thin.woff2') format('woff2'),
	     url('../fonts/helveticaneue-thin.woff') format('woff');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Helvetica Neue';
	src: url('../fonts/helveticaneue-light.woff2') format('woff2'),
	     url('../fonts/helveticaneue-light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Helvetica Neue';
	src: url('../fonts/helveticaneue-roman.woff2') format('woff2'),
	     url('../fonts/helveticaneue-roman.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Helvetica Neue';
	src: url('../fonts/helveticaneue-medium.woff2') format('woff2'),
	     url('../fonts/helveticaneue-medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Helvetica Neue';
	src: url('../fonts/helveticaneue-bold.woff2') format('woff2'),
	     url('../fonts/helveticaneue-bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Brand Colors */
	--color-navy: #1a2b47;
	--color-lime: #8dc63f;
	--color-silver: #b8bdc1;
	--color-white: #ffffff;

	/* Color Variations */
	--color-navy-light: #2a3b57;
	--color-navy-dark: #0a1b37;
	--color-lime-light: #9dd64f;
	--color-lime-dark: #7dc62f;
	--color-silver-light: #c8cdd1;
	--color-silver-dark: #a8adb1;

	/* Functional Colors */
	--color-text: var(--color-navy);
	--color-text-light: var(--color-silver);
	--color-background: var(--color-white);
	--color-accent: var(--color-lime);
	--color-border: var(--color-silver-light);

	/* Spacing Scale */
	--space-xs: 0.5rem;    /* 8px */
	--space-sm: 1rem;      /* 16px */
	--space-md: 1.5rem;    /* 24px */
	--space-lg: 2rem;      /* 32px */
	--space-xl: 3rem;      /* 48px */
	--space-2xl: 4rem;     /* 64px */
	--space-3xl: 6rem;     /* 96px */
	--space-4xl: 8rem;     /* 128px */

	/* Typography Scale */
	--font-size-xs: 0.75rem;    /* 12px */
	--font-size-sm: 0.875rem;   /* 14px */
	--font-size-base: 1rem;     /* 16px */
	--font-size-lg: 1.125rem;   /* 18px */
	--font-size-xl: 1.25rem;    /* 20px */
	--font-size-2xl: 1.5rem;    /* 24px */
	--font-size-3xl: 1.875rem;  /* 30px */
	--font-size-4xl: 2.25rem;   /* 36px */
	--font-size-5xl: 3rem;      /* 48px */
	--font-size-6xl: 3.75rem;   /* 60px */

	/* Font Family */
	--font-family-base: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-family-headings: "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* Font Weights */
	--font-weight-light: 300;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* Line Heights */
	--line-height-tight: 1.2;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.75;

	/* Border Radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-sm: 0 1px 2px 0 rgba(26, 43, 71, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(26, 43, 71, 0.1);
	--shadow-lg: 0 10px 15px -3px rgba(26, 43, 71, 0.1);
	--shadow-xl: 0 20px 25px -5px rgba(26, 43, 71, 0.1);

	/* Transitions */
	--transition-fast: 150ms ease-in-out;
	--transition-base: 250ms ease-in-out;
	--transition-slow: 350ms ease-in-out;

	/* Container Widths */
	--container-sm: 640px;
	--container-md: 768px;
	--container-lg: 1024px;
	--container-xl: 1280px;
	--container-2xl: 1536px;

	/* Z-Index Scale */
	--z-base: 1;
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-fixed: 300;
	--z-modal-backdrop: 400;
	--z-modal: 500;
	--z-popover: 600;
	--z-tooltip: 700;
}

/* Breakpoints (for reference in media queries) */
/*
  --breakpoint-sm: 640px
  --breakpoint-md: 768px
  --breakpoint-lg: 1024px
  --breakpoint-xl: 1280px
  --breakpoint-2xl: 1536px
*/