/**
 * Base Styles
 *
 * Design tokens, font declarations, resets, typography, and layout primitives.
 *
 * @package    Fresh_Stack
 * @author     Woracious
 * @since      1.0.0
 */

/*--------------------------------------------------------------
# Font Face Declarations
--------------------------------------------------------------*/

/* Lato */
@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 100;
	font-display: swap;
	src: url("../fonts/lato/lato-latin-100-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Lato";
	font-style: italic;
	font-weight: 100;
	font-display: swap;
	src: url("../fonts/lato/lato-latin-100-italic.woff2") format("woff2");
}

@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/lato/lato-latin-300-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Lato";
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/lato/lato-latin-300-italic.woff2") format("woff2");
}

@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/lato/lato-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Lato";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/lato/lato-latin-400-italic.woff2") format("woff2");
}

@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/lato/lato-latin-700-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Lato";
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/lato/lato-latin-700-italic.woff2") format("woff2");
}

@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("../fonts/lato/lato-latin-900-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Lato";
	font-style: italic;
	font-weight: 900;
	font-display: swap;
	src: url("../fonts/lato/lato-latin-900-italic.woff2") format("woff2");
}

/* Source Sans Pro */
@font-face {
	font-family: "Source Sans Pro";
	font-style: normal;
	font-weight: 200;
	font-display: swap;
	src: url("../fonts/source-sans-pro/source-sans-pro-latin-200-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Source Sans Pro";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/source-sans-pro/source-sans-pro-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Source Sans Pro";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/source-sans-pro/source-sans-pro-latin-400-italic.woff2") format("woff2");
}

@font-face {
	font-family: "Source Sans Pro";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/source-sans-pro/source-sans-pro-latin-600-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Source Sans Pro";
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/source-sans-pro/source-sans-pro-latin-600-italic.woff2") format("woff2");
}

@font-face {
	font-family: "Source Sans Pro";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/source-sans-pro/source-sans-pro-latin-700-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Source Sans Pro";
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/source-sans-pro/source-sans-pro-latin-700-italic.woff2") format("woff2");
}

@font-face {
	font-family: "Source Sans Pro";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("../fonts/source-sans-pro/source-sans-pro-latin-900-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Source Sans Pro";
	font-style: italic;
	font-weight: 900;
	font-display: swap;
	src: url("../fonts/source-sans-pro/source-sans-pro-latin-900-italic.woff2") format("woff2");
}

/*--------------------------------------------------------------
# CSS Custom Properties
--------------------------------------------------------------*/

:root {
	/* Colors */
	--color-primary: #000000;
	--color-secondary: #544e4e;
	--color-accent: #08a742;
	--color-theme: #0066cc;
	--color-cream: #fff6db;
	--color-background: #f7f7f7;
	--color-surface: #ffffff;
	--color-border: #eeeeee;
	--color-muted: #cccccc;

	/* Spacing Scale */
	--space-xs: 10px;
	--space-sm: 20px;
	--space-md: 30px;
	--space-lg: 40px;
	--sidebar-width: 250px;

	/* Typography */
	--font-primary: "Source Sans Pro", Helvetica, Arial, sans-serif;
	--font-secondary: "Lato", sans-serif;
	--font-size-trending: 1.7rem;
	--font-size-trending-num: 1.5rem;
	--font-size-body: 1.2rem;
	--font-size-footer-heading: 1.3rem;
	--font-size-footer-link: 1.2rem;

	/* Borders */
	--radius-sm: 25px;
	--radius-lg: 30% 15%;

	/* Transitions */
	--transition-fast: 0.2s ease;
	--transition-medium: 0.3s linear;
}

/*--------------------------------------------------------------
# Reset
--------------------------------------------------------------*/

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	font-family: var(--font-primary);
	background-color: var(--color-background);
}

ul,
p {
	margin: 0;
	padding: 0;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-primary);
	margin: 0;
	padding: 0;
	font-weight: normal;
	color: var(--color-secondary);
}

h1 {
	font-size: 90px;
}

h2 {
	font-size: 70px;
}

h3 {
	font-size: 60px;
}

h4 {
	font-size: 50px;
}

h5 {
	font-size: 40px;
}

h6 {
	font-size: 25px;
}

a {
	font-family: var(--font-primary);
}

p {
	font-family: var(--font-secondary);
	line-height: 1.475em;
	font-size: 1.1rem;
}

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/

.wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	transition: opacity var(--transition-medium) 0.3s;
}

header,
.stack,
footer {
	background-color: var(--color-surface);
	margin: auto var(--space-lg);
	padding: var(--space-sm);
}

.stack {
	padding: var(--space-lg) var(--space-sm);
	display: flex;
	gap: 30px;
}

.fd-column {
	flex-direction: column;
}