/**
 * Base CSS — assets/css/base.css
 *
 * CSS custom properties (design tokens) and foundational resets.
 * All theme colors, spacing, and typography live here as variables.
 * cards.css, blocks.css, comments.css, header.css, and footer.css
 * consume these tokens — never hardcode values there.
 *
 * Token architecture:
 *   Primitive scale  →  semantic aliases  →  component tokens
 *   (--eln-color-primary-500)  →  (--eln-color-accent)  →  (--eln-hdr-*)
 *
 * These variables are intentionally Elementor-overridable at the :root level.
 */

/* ── Design Tokens ─────────────────────────────────────────────────────────── */

:root {

    /* ── Primitive Color Scale ────────────────────────────────────────────── */

    /* Primary — action red */
    --eln-color-primary-500: #E30613;
    --eln-color-primary-600: #C10511;
    --eln-color-primary-700: #9E040E;

    /* Neutrals */
    --eln-color-black-900: #1D1D1B;
    --eln-color-grey-50:   #F5F5F5;
    --eln-color-grey-200:  #E5E5E5;
    --eln-color-grey-300:  #D4D4D4;
    --eln-color-grey-500:  #737373;
    --eln-color-grey-600:  #525252;

    /* States */
    --eln-color-success: #22C55E;
    --eln-color-warning: #F59E0B;
    --eln-color-error:   var(--eln-color-primary-500);
    --eln-color-info:    #3B82F6;

    /* ── Font Role Tokens ─────────────────────────────────────────────────── */
    /* Headline copy — display weight, condensed */
    --eln-font-heading: 'Oswald', sans-serif;
    /* UI chrome — labels, nav, buttons, meta */
    --eln-font-ui:      'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    /* Article body — Inter throughout (Bitter removed) */
    --eln-font-body:    var(--eln-font-ui);
    /* Backwards-compatibility alias — all existing var(--eln-font-sans) refs pick up Inter */
    --eln-font-sans:    var(--eln-font-ui);

    /* ── Semantic Color Aliases ───────────────────────────────────────────── */

    /* Structural dark — header / footer shell, dark card overlays.
       Pure near-black (no blue cast). Matches the newsroom dark reference. */
    --eln-color-brand:        #111111;

    /* Primary action → red scale */
    --eln-color-accent:       var(--eln-color-primary-500);

    /* Text */
    --eln-color-text:         var(--eln-color-black-900);
    --eln-color-text-primary: var(--eln-color-black-900); /* alias — use for explicit primary-text intent */
    --eln-color-text-muted:   var(--eln-color-grey-500);
    --eln-color-text-inverse: #ffffff;

    /* Backgrounds */
    --eln-color-bg:           #ffffff;
    --eln-color-bg-alt:       var(--eln-color-grey-50);
    --eln-color-bg-dark:      var(--eln-color-brand);

    /* Borders */
    --eln-color-border:       var(--eln-color-grey-200);

    /* Badge colors — one per label type */
    --eln-badge-breaking:  var(--eln-color-primary-500);
    --eln-badge-urgent:    var(--eln-color-primary-500);
    --eln-badge-sponsored: #d97706;
    --eln-badge-promo:     #7c3aed;
    --eln-badge-category:  var(--eln-color-brand);

    /* ── Numbered Spacing Scale (4px base) ───────────────────────────────── */
    --eln-space-1:   4px;
    --eln-space-2:   8px;
    --eln-space-3:   12px;
    --eln-space-4:   16px;
    --eln-space-6:   24px;
    --eln-space-8:   32px;
    --eln-space-12:  48px;
    --eln-space-16:  64px;

    /* Named aliases — existing code continues to work unchanged */
    --eln-space-xs:  6px;                  /* between space-1 and space-2 */
    --eln-space-sm:  var(--eln-space-3);   /* 12px */
    --eln-space-md:  var(--eln-space-4);   /* 16px */
    --eln-space-lg:  var(--eln-space-6);   /* 24px */
    --eln-space-xl:  var(--eln-space-8);   /* 32px */
    --eln-space-2xl: var(--eln-space-12);  /* 48px */

    /* ── Typography Scale ─────────────────────────────────────────────────── */
    --eln-font-size-xs:   0.6875rem;   /* 11px */
    --eln-font-size-sm:   0.8125rem;   /* 13px */
    --eln-font-size-base: 1rem;        /* 16px */
    --eln-font-size-lg:   1.125rem;    /* 18px */
    --eln-font-size-xl:   1.375rem;    /* 22px */
    --eln-font-size-2xl:  1.75rem;     /* 28px */
    --eln-font-size-3xl:  2.25rem;     /* 36px */

    /* Heading scale — font-size and line-height per spec */
    --eln-font-size-h1:   3rem;        /* 48px */
    --eln-font-size-h2:   2.25rem;     /* 36px */
    --eln-font-size-h3:   1.75rem;     /* 28px */
    --eln-font-size-h4:   1.375rem;    /* 22px */
    --eln-line-height-h1: 1.167;       /* 56 / 48 */
    --eln-line-height-h2: 1.222;       /* 44 / 36 */
    --eln-line-height-h3: 1.286;       /* 36 / 28 */
    --eln-line-height-h4: 1.364;       /* 30 / 22 */

    /* Font weight + legacy line-height tokens */
    --eln-font-weight-normal:   400;
    --eln-font-weight-medium:   500;
    --eln-font-weight-semibold: 600;
    --eln-font-weight-bold:     700;
    --eln-line-height-tight:  1.2;
    --eln-line-height-base:   1.65;    /* ≥ 1.6 per spec */

    /* ── Form System ──────────────────────────────────────────────────────── */
    --eln-input-height:        48px;
    --eln-input-height-search: 52px;
    --eln-input-radius:        8px;
    --eln-input-border-color:  var(--eln-color-grey-300);
    --eln-input-border-focus:  var(--eln-color-primary-500);
    --eln-input-bg:            #ffffff;
    --eln-input-font-size:     0.9375rem;  /* 15px */
    --eln-label-font-size:     var(--eln-font-size-sm);   /* 13px */
    --eln-helper-font-size:    0.75rem;    /* 12px */

    /* ── Border Radius ────────────────────────────────────────────────────── */
    --eln-radius-sm:   4px;
    --eln-radius-md:   8px;
    --eln-radius-xl:   10px;
    --eln-radius-full: 9999px;  /* pill / fully-rounded — tags, chips */

    /* ── Transitions ──────────────────────────────────────────────────────── */
    --eln-transition: 150ms ease;

    /* ── Layout ───────────────────────────────────────────────────────────── */
    --eln-container-width:  1200px;
    --eln-article-column:   800px;   /* single article reading column — header, content, tags, author bio */
    --eln-gap:              var(--eln-space-lg);
}

/* ── Resets ────────────────────────────────────────────────────────────────── */

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

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

figure {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ── Body ──────────────────────────────────────────────────────────────────── */
/*
 * Inter is used throughout — body, UI chrome, and article content.
 * var(--eln-font-body) resolves to var(--eln-font-ui) so all article
 * content picks up Inter automatically. Elementor manages its own font
 * stack for widget content.
 */

body {
    font-family: var(--eln-font-body);
    font-size: var(--eln-font-size-lg);     /* 18px */
    line-height: var(--eln-line-height-base); /* 1.65 */
    color: var(--eln-color-text);
    background: var(--eln-color-bg);
}

/* ── Content Headings ──────────────────────────────────────────────────────── */
/*
 * Oswald for all heading levels inside article content.
 * Scoped to .entry-content so Elementor headings are unaffected —
 * Elementor manages its own typography via the widget settings panel.
 * Max-width on text containers follows the 600–720px spec rule.
 */

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    font-family: var(--eln-font-heading);
    font-weight: var(--eln-font-weight-bold);
    color: var(--eln-color-text);
    margin: 0 0 var(--eln-space-md);
    max-width: 720px;
}

.entry-content h1 { font-size: var(--eln-font-size-h1); line-height: var(--eln-line-height-h1); }
.entry-content h2 { font-size: var(--eln-font-size-h2); line-height: var(--eln-line-height-h2); }
.entry-content h3 { font-size: var(--eln-font-size-h3); line-height: var(--eln-line-height-h3); }
.entry-content h4 { font-size: var(--eln-font-size-h4); line-height: var(--eln-line-height-h4); }

/* Body copy inside article content */
.entry-content p,
.entry-content li {
    font-family: var(--eln-font-body);
    font-size: var(--eln-font-size-lg);     /* 18px */
    line-height: var(--eln-line-height-base);
    max-width: 720px;
}

/* ── Container ─────────────────────────────────────────────────────────────── */

.eln-container {
    width: 100%;
    max-width: var(--eln-container-width);
    margin-inline: auto;
    padding-inline: var(--eln-space-lg);
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
/*
 * Base .btn component — MD size (48px height) as the default per spec.
 * No opacity tricks for disabled state — explicit grey values only.
 * Elementor can override color/typography via its own selectors.
 */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    min-width: 120px;
    padding: 0 var(--eln-space-xl);
    font-family: var(--eln-font-ui);
    font-size: var(--eln-font-size-sm);
    font-weight: var(--eln-font-weight-bold);
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 2px solid transparent;
    border-radius: var(--eln-radius-md);
    cursor: pointer;
    transition: color var(--eln-transition),
                background-color var(--eln-transition),
                border-color var(--eln-transition);
    text-decoration: none;
    white-space: nowrap;
}

.btn:hover {
    text-decoration: none;
}

/* Primary — red action button */
.btn--primary {
    background: var(--eln-color-primary-500);
    color: var(--eln-color-text-inverse);
    border-color: var(--eln-color-primary-500);
}

.btn--primary:hover {
    background: var(--eln-color-primary-600);
    border-color: var(--eln-color-primary-600);
    color: var(--eln-color-text-inverse);
    text-decoration: none;
}

.btn--primary:active {
    background: var(--eln-color-primary-700);
    border-color: var(--eln-color-primary-700);
}

/* Secondary — neutral outline */
.btn--outline {
    background: transparent;
    color: var(--eln-color-grey-600);
    border-color: var(--eln-color-grey-300);
}

.btn--outline:hover {
    border-color: var(--eln-color-grey-500);
    color: var(--eln-color-black-900);
    text-decoration: none;
}

/* Disabled — no opacity tricks */
.btn--disabled,
.btn:disabled {
    background: var(--eln-color-grey-200);
    color: var(--eln-color-grey-500);
    border-color: var(--eln-color-grey-200);
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Visually Hidden (accessibility) ───────────────────────────────────────── */

.eln-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}