/**
 * Design Tokens — Blewspaper
 *
 * Centralised design token system for the Blewspaper static theme.
 * Every repeated colour, spacing value, font size, border radius,
 * and transition timing used across the project is defined here
 * as a CSS custom property. No component file should contain a
 * hardcoded value that is available as a token.
 *
 * @package    Blewspaper
 * @author     AnKish
 * @version    1.0.0
 * @since      2026-02-13
 *
 * Table of Contents:
 *   1. Colour Palette (original names + semantic aliases)
 *   2. Spacing Scale
 *   3. Typography Scale
 *   4. Layout Constraints
 *   5. Border & Radius
 *   6. Transitions
 *   7. Breakpoints (reference only — used in responsive.css)
 *   8. Slider Configuration
 */

:root {

	/* ==========================================================================
	   1. Colour Palette
	   ==========================================================================
	   The original --color1 through --color5 are the ACTIVE tokens referenced
	   throughout blewspaper.css. These must not be renamed without a
	   corresponding find-and-replace across all CSS files.
	   
	   Semantic aliases are provided below for future migration. Once all
	   references are updated to use the semantic names, the numbered
	   originals can be retired.
	   
	   Additional hardcoded hex values found across the codebase are listed
	   as secondary tokens for use during the token migration phase.
	   ========================================================================== */

	/* --- Active tokens (referenced in blewspaper.css) --- */
	--color1: #00A2E8;    /* Primary brand blue                */
	--color2: #FFFFFF;    /* White                             */
	--color3: #4A4949;    /* Dark grey — text and borders      */
	--color4: #F7F7F7;    /* Light grey — backgrounds          */
	--color5: #544E4E;    /* Body text colour                  */

	/* --- Semantic aliases (for future migration) --- */
	--color-primary:           var(--color1);
	--color-white:             var(--color2);
	--color-text-dark:         var(--color3);
	--color-bg-light:          var(--color4);
	--color-text-body:         var(--color5);

	/* --- Neutrals not yet tokenised in component files (dark to light) --- */
	--color-black:             #000000;
	--color-near-black:        #030303;
	--color-grey-dark:         #7B7A7A;
	--color-grey-muted:        #B0B9BD;
	--color-grey-mid:          #B7B4B4;
	--color-grey-border:       #bdbdbd;
	--color-grey-light:        #c8cdd1;
	--color-grey-rule:         #dcdcdc;
	--color-grey-divider:      #DDDDDD;
	--color-grey-soft:         #e6e1e1;
	--color-grey-line:         #eeeeee;

	/* --- Utility --- */
	--color-highlight:         #FFF6DB;

	/* ==========================================================================
	   2. Spacing Scale
	   ==========================================================================
	   A constrained set of spacing values used for gap, padding, and margin.
	   Named by size role rather than pixel value so the scale can be adjusted
	   without renaming tokens.
	   ========================================================================== */

	--space-none:    0px;
	--space-3xs:     1px;
	--space-2xs:     2px;
	--space-xs:      3px;
	--space-sm:      5px;
	--space-md:      10px;
	--space-lg:      15px;
	--space-xl:      20px;
	--space-2xl:     30px;
	--space-3xl:     40px;
	--space-4xl:     60px;
	--space-5xl:     150px;

	/* ==========================================================================
	   3. Typography Scale
	   ==========================================================================
	   Font families, base size, and the type scale used across headings,
	   body copy, and UI elements. The scale uses rem for consistent sizing
	   relative to the root. The px-based heading sizes preserve the original
	   design's proportions exactly.
	   ========================================================================== */

	/* --- Font Families --- */
	--font-heading:  "Source Sans Pro", Helvetica, Arial, sans-serif;
	--font-body:     "Lato", sans-serif;
	--font-ui:       "Source Sans Pro", sans-serif;

	/* --- Heading Sizes (preserve original px values) --- */
	--font-size-h1:  90px;
	--font-size-h2:  70px;
	--font-size-h3:  3.75rem;
	--font-size-h4:  50px;
	--font-size-h5:  40px;
	--font-size-h6:  25px;

	/* --- Body & UI Sizes --- */
	--font-size-base:     17px;
	--font-size-sm:       0.9rem;
	--font-size-ui:       1rem;
	--font-size-ui-md:    1.1rem;
	--font-size-ui-lg:    1.2rem;
	--font-size-ui-xl:    1.3rem;
	--font-size-ui-2xl:   1.7rem;
	--font-size-ui-3xl:   2.2rem;
	--font-size-ui-4xl:   2.75rem;
	--font-size-ui-5xl:   3.3rem;
	--font-size-post:     1.25rem;
	--font-size-post-link: 1.3rem;
	--font-size-snippet:  1.169rem;
	--font-size-category: 1.125rem;
	--font-size-widget:   1.500em;
	--font-size-postview: 1.250em;

	/* --- Line Heights --- */
	--line-height-body:   1.475em;
	--line-height-post:   1.625;
	--line-height-heading: 2.5rem;

	/* ==========================================================================
	   4. Layout Constraints
	   ==========================================================================
	   Maximum widths for the theme wrapper, search modal, sidebar slide menu,
	   and other constrained containers.
	   ========================================================================== */

	--width-theme:         1280px;
	--width-search-modal:  900px;
	--width-slide-menu:    320px;
	--width-shamburger:    400px;
	--width-logo:          200px;
	--width-avatar-sm:     45px;
	--width-avatar-md:     50px;
	--width-avatar-lg:     90px;
	--width-icon-sm:       20px;
	--width-icon-md:       22px;
	--width-icon-lg:       30px;
	--width-icon-xl:       60px;

	/* ==========================================================================
	   5. Border & Radius
	   ==========================================================================
	   Standard border widths and radius values.
	   ========================================================================== */

	--border-thin:   1px;
	--border-medium: 2px;
	--border-thick:  3px;

	--radius-sm:     10px;
	--radius-md:     25px;
	--radius-circle: 50%;

	/* ==========================================================================
	   6. Transitions
	   ==========================================================================
	   Standard easing and duration values for interactive state changes.
	   ========================================================================== */

	--transition-fast:     all 0.2s ease;
	--transition-default:  all 0.3s ease 0.2s;
	--transition-slow:     all 0.5s ease 0.2s;
	--transition-slide:    1s ease;

	/* ==========================================================================
	   7. Breakpoints (reference only)
	   ==========================================================================
	   CSS custom properties cannot be used inside @media queries. These tokens
	   exist as a documented reference so that breakpoint values are defined in
	   one place. The actual values are used directly in responsive.css.

	   --bp-sm:   600px
	   --bp-md:   800px
	   --bp-lg:   950px
	   --bp-xl:   1000px
	   --bp-2xl:  1200px
	   ========================================================================== */

	/* ==========================================================================
	   8. Slider Configuration
	   ==========================================================================
	   Controls the number of visible slides in the horizontal slider component.
	   Adjusted via media queries in the post section of blewspaper.css.
	   ========================================================================== */

	--slides-across: 4;
}