/*
Theme Name:   FinanceBlog Child
Theme URI:    https://yoursite.ca
Description:  Canadian finance and investing blog — Astra child theme. Navy/white/green colour scheme with AdSense, affiliate link, and SEO support.
Author:       Simranjit
Author URI:   https://yoursite.ca
Template:     astra
Version:      1.0.0
Text Domain:  financeblog
Tags:         finance, investing, canadian, blog, child-theme
*/

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */
:root {
	/* Colours */
	--colour-navy:        #1a2744;
	--colour-navy-light:  #243560;
	--colour-navy-dark:   #111c33;
	--colour-green:       #2ecc71;
	--colour-green-dark:  #27ae60;
	--colour-green-light: #a8f0c6;
	--colour-white:       #ffffff;
	--colour-off-white:   #f8f9fa;
	--colour-grey-100:    #f1f3f5;
	--colour-grey-200:    #e9ecef;
	--colour-grey-400:    #ced4da;
	--colour-grey-600:    #6c757d;
	--colour-grey-800:    #343a40;
	--colour-text:        #1e2328;
	--colour-text-muted:  #5a6070;
	--colour-border:      #dee2e6;
	--colour-success:     #28a745;
	--colour-warning:     #ffc107;
	--colour-danger:      #dc3545;

	/* Typography */
	--font-sans:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-serif:         Georgia, 'Times New Roman', Times, serif;
	--font-mono:          'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

	--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 */

	--line-height-tight:  1.25;
	--line-height-snug:   1.375;
	--line-height-base:   1.6;
	--line-height-loose:  1.8;

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

	/* 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 */
	--space-24:  6rem;     /* 96px */

	/* Layout */
	--container-max:      1200px;
	--container-padding:  1.5rem;
	--sidebar-width:      320px;
	--content-max:        720px;

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

	/* Shadows */
	--shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
	--shadow-md:  0 4px 12px rgba(0, 0, 0, 0.1);
	--shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);
	--shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.15);

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

	/* Z-index scale */
	--z-below:    -1;
	--z-base:     0;
	--z-raised:   10;
	--z-dropdown: 100;
	--z-sticky:   200;
	--z-fixed:    300;
	--z-overlay:  400;
	--z-modal:    500;
	--z-toast:    600;
}

/* ==========================================================================
   Base Resets and Global Styles
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: var(--font-sans);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--colour-text);
	background-color: var(--colour-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: var(--colour-navy);
	text-decoration: underline;
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--colour-green-dark);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--colour-white);
	border-radius: var(--radius-sm);
	clip: auto !important;
	clip-path: none;
	color: var(--colour-navy);
	display: block;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 0.75rem 1.5rem;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: var(--z-toast);
}

/* Focus styles */
:focus-visible {
	outline: 3px solid var(--colour-green);
	outline-offset: 2px;
}