/* ============================================================================
   PennySmart Group — Design Tokens
   ============================================================================
   Extracted from the approved Claude Design v4 system. CSS variables only,
   no component styles. Components are built per-page in Elementor and pull
   from these tokens.

   Reference order:
     1. Brand color primitives  (the 5 official brand colors)
     2. Color tints derived     (mixes with white/navy for surfaces and text)
     3. Semantic color tokens   (--fg, --bg, --accent, etc.)
     4. Typography
     5. Spacing scale (8px base)
     6. Borders + radii
     7. Shadows
     8. Container widths + breakpoints
   ============================================================================ */

:root {

	/* ----- 1. BRAND COLOR PRIMITIVES ------------------------------------- */
	/* These match the official PennySmart brand assets. Do not modify. */
	--ps-navy: #181D54;
	--ps-violet: #8266FD;
	--ps-blue: #239DFA;
	--ps-mint: #4FEDAD;
	--ps-white: #FFFFFF;

	/* ----- 2. DERIVED TINTS ---------------------------------------------- */
	/* Navy mixed with white at controlled opacity steps for surfaces and text. */
	--ps-navy-04: #F5F6F9;  /* alt section background, very subtle */
	--ps-navy-08: #EBEDF1;  /* hover states, dividers */
	--ps-navy-16: #D4D7E0;  /* borders, disabled states */
	--ps-navy-40: #8C90A8;  /* secondary text, large numbers in FAQ */
	--ps-navy-64: #5A5E7C;  /* body text on white */

	/* Mint at low opacity for success accents */
	--ps-mint-16: rgba(79, 237, 173, 0.16);

	/* Violet at low opacity for accent backgrounds */
	--ps-violet-16: rgba(130, 102, 253, 0.16);

	/* ----- 3. SEMANTIC COLOR TOKENS -------------------------------------- */
	/* Use these in component CSS — they map intent to brand primitives.    */
	--fg-1: var(--ps-navy);          /* primary text on light backgrounds */
	--fg-2: var(--ps-navy-64);       /* secondary text */
	--fg-3: var(--ps-navy-40);       /* tertiary, captions, eyebrows */
	--fg-on-dark: var(--ps-white);   /* text on navy surfaces */
	--fg-on-dark-2: rgba(255, 255, 255, 0.72); /* secondary text on navy */

	--bg-page: var(--ps-white);      /* default page background */
	--bg-alt: var(--ps-navy-04);     /* alternate section background */
	--bg-dark: var(--ps-navy);       /* navy section background */

	--border-1: var(--ps-navy-16);   /* default borders */
	--border-2: var(--ps-navy-08);   /* subtle dividers */

	--accent: var(--ps-violet);      /* primary accent color */
	--accent-2: var(--ps-mint);      /* secondary accent */

	--brand-gradient: linear-gradient(135deg, var(--ps-violet) 0%, var(--ps-blue) 50%, var(--ps-mint) 100%);

	/* ----- 4. TYPOGRAPHY ------------------------------------------------- */
	--font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Fluid type scale — each size grows with viewport (clamp min, ideal vw, max). */
	--type-display-xl: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);   /* hero headline */
	--type-display-lg: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);     /* section H2 large */
	--type-display-md: clamp(1.625rem, 1.3rem + 1.6vw, 2.5rem); /* section H2 */
	--type-h3: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem);
	--type-h4: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	--type-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);  /* lede */
	--type-body: 1rem;                                          /* default 16px */
	--type-body-sm: 0.9375rem;                                  /* 15px */
	--type-caption: 0.8125rem;                                  /* 13px */
	--type-eyebrow: 0.75rem;                                    /* 12px uppercase */

	--lh-tight: 1.1;
	--lh-snug: 1.25;
	--lh-normal: 1.5;
	--lh-relaxed: 1.625;

	--ls-tight: -0.02em;
	--ls-snug: -0.01em;
	--ls-normal: 0;
	--ls-eyebrow: 0.08em;

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* ----- 5. SPACING SCALE (8px base) ----------------------------------- */
	--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-7: 3rem;      /* 48px */
	--space-8: 4rem;      /* 64px */
	--space-9: 6rem;      /* 96px */
	--space-10: 8rem;     /* 128px */

	/* Section padding presets */
	--section-pad-y: clamp(3rem, 2rem + 4vw, 6rem);
	--section-pad-x: clamp(1.5rem, 1rem + 2vw, 3rem);

	/* ----- 6. BORDERS + RADII -------------------------------------------- */
	--radius-sm: 0.25rem;   /* 4px - small chips, tags */
	--radius-md: 0.5rem;    /* 8px - inputs, small cards */
	--radius-lg: 0.75rem;   /* 12px - cards */
	--radius-xl: 1rem;      /* 16px - large cards, hero portrait frame */
	--radius-pill: 999px;   /* full pills */

	--border-width: 1px;
	--border-width-2: 2px;

	/* ----- 7. SHADOWS ---------------------------------------------------- */
	--shadow-sm: 0 1px 2px rgba(24, 29, 84, 0.06);
	--shadow-md: 0 4px 12px rgba(24, 29, 84, 0.08);
	--shadow-lg: 0 12px 32px rgba(24, 29, 84, 0.12);

	/* ----- 8. CONTAINER WIDTHS + BREAKPOINTS ----------------------------- */
	--container-narrow: 720px;
	--container-default: 1200px;
	--container-wide: 1440px;

	/* Reference breakpoints (used in @media queries):
	   --bp-sm: 480px
	   --bp-md: 768px
	   --bp-lg: 1080px
	   --bp-xl: 1440px
	   These cannot be CSS variables in @media rules — listed here for reference. */

	/* ----- 9. TIMING ----------------------------------------------------- */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--duration-fast: 150ms;
	--duration-base: 250ms;
	--duration-slow: 400ms;
}

/* ============================================================================
   Global resets/applications using the tokens above
   ============================================================================ */

body {
	font-family: var(--font-body);
	font-size: var(--type-body);
	line-height: var(--lh-normal);
	color: var(--fg-1);
	background-color: var(--bg-page);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	color: var(--fg-1);
	letter-spacing: var(--ls-snug);
	line-height: var(--lh-tight);
}

a {
	color: var(--ps-navy);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
	color: var(--ps-violet);
}

/* Selection styling matching brand */
::selection {
	background: var(--ps-violet-16);
	color: var(--ps-navy);
}