:root {
    /* ================================
       Trei Surse — Color Palette
       ================================ */

    /* Backgrounds */
    --color-background: #081C2C;
    --color-surface: #0D293D;
    --color-surface-hover: #12354C;
    --color-border: #1B4056;

    /* Text */
    --color-text-primary: #F7F9F8;
    --color-text-secondary: #AEBEC8;
    --color-text-muted: #718894;

    /* Brand */
    --color-navy: #081C2C;
    --color-teal: #18A6A0;
    --color-orange: #F45B2A;
    --color-blue: #4A7FB5;

    /* Interactive */
    --color-primary: var(--color-teal);
    --color-primary-hover: #20BDB6;

    /* Semantic */
    --color-success: #36B37E;
    --color-warning: #F5B544;
    --color-error: #E05252;

    /* Political spectrum — kept separate from --color-orange/--color-teal,
       which stay reserved for generic site UI (buttons, brand, etc.) */
    --color-lean-left: #E0524F;
    --color-lean-center: var(--color-text-primary);
    --color-lean-right: var(--color-blue);
    --color-lean-center-left: color-mix(in srgb, var(--color-lean-left), var(--color-lean-center));
    --color-lean-center-right: color-mix(in srgb, var(--color-lean-center), var(--color-lean-right));

    /* Credibility spectrum — reuses the semantic success/warning/error trio,
       since low/medium/high credibility already maps 1:1 onto that meaning. */
    --color-credibility-low: var(--color-error);
    --color-credibility-medium: var(--color-warning);
    --color-credibility-high: var(--color-success);

    /* Layout */
    --content-max-width: 1280px;
    --content-padding: 24px;

    /* Typography */
    --font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-size-base: 16px;
    --line-height-base: 1.5;

    /* Radius */
    --radius-small: 6px;
    --radius-medium: 10px;
    --radius-large: 16px;

    /* Shadows */
    --shadow-small:
        0 2px 8px rgba(0, 0, 0, 0.15);

    --shadow-medium:
        0 8px 24px rgba(0, 0, 0, 0.20);
}


/* ================================
   Base
   ================================ */

* {
    box-sizing: border-box;
}

html {
    font-size: var(--font-size-base);
}

body {
    margin: 0;

    background: var(--color-background);
    color: var(--color-text-primary);

    font-family: var(--font-family);
    line-height: var(--line-height-base);

    -webkit-font-smoothing: antialiased;
}

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

button,
input,
textarea,
select {
    font: inherit;
}


/* ================================
   Layout
   ================================ */

.container {
    width: min(
        100% - (var(--content-padding) * 2),
        var(--content-max-width)
    );

    margin-inline: auto;
}


/* ================================
   Header
   ================================ */

.header {
    position: sticky;
    top: 0;
    z-index: 100;

    background: rgba(8, 28, 44, 0.92);
    border-bottom: 1px solid var(--color-border);

    backdrop-filter: blur(12px);
}

.header__inner {
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header__nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.header__nav a {
    color: var(--color-text-secondary);

    font-size: 0.95rem;
    font-weight: 500;

    transition:
        color 150ms ease,
        opacity 150ms ease;
}

.header__nav a:hover,
.header__nav a.active {
    color: var(--color-text-primary);
}


/* ================================
   Buttons
   ================================ */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 0 18px;

    border: 0;
    border-radius: var(--radius-small);

    cursor: pointer;

    font-weight: 600;

    transition:
        background 150ms ease,
        transform 150ms ease;
}

.button--primary {
    background: var(--color-teal);
    color: #ffffff;
}

.button--primary:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
}

.button--secondary {
    background: var(--color-surface);
    color: var(--color-text-primary);

    border: 1px solid var(--color-border);
}

.button--secondary:hover {
    background: var(--color-surface-hover);
}


/* ================================
   Cards
   ================================ */

.card {
    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);

    box-shadow: var(--shadow-small);
}

.card--interactive {
    transition:
        transform 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease;
}

.card--interactive:hover {
    transform: translateY(-2px);

    border-color: var(--color-teal);

    box-shadow: var(--shadow-medium);
}


/* ================================
   Shared tooltip
   Custom hover/focus tooltip used app-wide instead of native title=
   attributes. The trigger element needs its own position (relative
   or absolute) and the class .has-tooltip; nest a .tooltip-bubble
   span inside it with the tooltip text.
   ================================ */

.tooltip-bubble {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text-primary);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 20;
}

.has-tooltip:hover .tooltip-bubble,
.has-tooltip:focus-visible .tooltip-bubble,
.has-tooltip:focus-within .tooltip-bubble {
    opacity: 1;
    visibility: visible;
}

.tooltip-bubble--wide {
    left: auto;
    right: 0;
    transform: none;
    white-space: normal;
    width: 230px;
    font-weight: 500;
    line-height: 1.45;
    pointer-events: auto;
}

.tooltip-bubble--wide a {
    display: inline-block;
    margin-top: 6px;
    color: var(--color-teal);
    font-weight: 700;
}

/* Bridges the gap between the anchor and the bubble so moving the
   mouse from the icon up to the bubble (and its link) doesn't
   momentarily leave both elements and cause the tooltip to hide. */
.tooltip-bubble--wide::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 10px;
}


/* ================================
   Story Card
   ================================ */

.story-card {
    padding: 24px;
}

.story-card__title {
    margin: 0 0 12px;

    font-size: 1.35rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.story-card__summary {
    margin: 0 0 18px;

    color: var(--color-text-secondary);
}

.story-card__meta {
    display: flex;
    align-items: center;
    gap: 12px;

    color: var(--color-text-muted);

    font-size: 0.85rem;
}

.story-card__sources {
    color: var(--color-teal);
    font-weight: 700;
}


/* ================================
   Source indicators
   ================================ */

.source-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.source {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: var(--color-text-secondary);

    font-size: 0.85rem;
}

.source__dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;
    background: var(--color-teal);
}

.source__dot--orange {
    background: var(--color-orange);
}


/* ================================
   Perspective indicator
   ================================ */

.perspective {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 4px 9px;

    border-radius: 999px;

    background: rgba(24, 166, 160, 0.12);
    color: var(--color-teal);

    font-size: 0.8rem;
    font-weight: 700;
}

.perspective--warning {
    background: rgba(244, 91, 42, 0.12);
    color: var(--color-orange);
}


/* ================================
   Tags
   ================================ */

.tag {
    display: inline-block;

    padding: 4px 9px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.06);

    color: var(--color-text-secondary);

    font-size: 0.75rem;
    font-weight: 600;
}

/* Shared "Știrea zilei" badge — defined once, reused everywhere it
   appears (featured story card, story-card lists) so the color/weight
   never drifts between pages. Positioning/spacing stays page-specific. */
.badge-story-of-the-day {
    display: inline-block;

    padding: 5px 10px;
    border-radius: var(--radius-small);

    background: rgba(24, 166, 160, 0.9);
    color: #ffffff;

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}


/* ================================
   Section
   ================================ */

.section {
    padding: 48px 0;
}

.section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    margin-bottom: 24px;
}

.section__title {
    margin: 0;

    font-size: 1.8rem;
    letter-spacing: -0.03em;
}

.section__subtitle {
    margin: 4px 0 0;

    color: var(--color-text-secondary);
}


/* ================================
   Accent utilities
   ================================ */

.text-teal {
    color: var(--color-teal);
}

.text-orange {
    color: var(--color-orange);
}

.text-muted {
    color: var(--color-text-muted);
}


/* ================================
   Responsive
   ================================ */

@media (max-width: 768px) {

    :root {
        --content-padding: 16px;
    }

    .header__nav {
        display: none;
    }

    .section {
        padding: 32px 0;
    }

    .section__title {
        font-size: 1.5rem;
    }

    .story-card {
        padding: 18px;
    }
}