/*

    site.css becomes “brand + reusable UI pieces.”
    app.css becomes “layout + page scaffolding.”
    Component‑specific styling stays in Component.razor.css.

 */

:root {
    /* =========================
       Brand / Core
    ========================= */
    --am-color-bg: #FFFFFF;
    --am-color-bg-soft: #F7F9F9;
    --am-color-border-subtle: #EFF3F4;

    --am-color-text-main: #0F1419;
    --am-color-text-muted: #536471;

    /* Surfaces (use for cards/panels) */
    --am-surface-1: var(--am-color-bg);
    --am-surface-2: var(--am-color-bg-soft);
    --am-surface-border: var(--am-color-border-subtle);

    /* Shadows + radius (consistent “Amondyn feel”) */
    --am-shadow-1: 0 1px 4px rgba(0,0,0,0.06);
    --am-shadow-2: 0 6px 18px rgba(0,0,0,0.08);
    --am-radius-sm: 10px;
    --am-radius-md: 14px;
    --am-radius-lg: 18px;

    /* Focus / accessibility */
    --am-focus-ring: 0 0 0 3px rgba(212, 59, 69, 0.22);

    /* =========================
       Brand Accent
    ========================= */
    --am-color-accent: #D43B45;
    --am-color-accent-hover: #BE323B;
    --am-color-accent-soft: #FBE9EA;
    --am-color-accent-border: rgba(212, 59, 69, 0.28);

    /* Links */
    --am-color-link: var(--am-color-accent);
    --am-color-link-hover: var(--am-color-accent-hover);

    /* Logo */
    --am-color-logo: #0F1419;

    /* =========================
       Post types (semantic)
    ========================= */
    --am-color-insight: #E5533D;
    --am-color-support: #1C9C5D;
    --am-color-counter: #4C6FFF;

    /* =========================
       Semantic status colors
       (for alerts, badges, toasts)
    ========================= */
    --am-color-success: #1C9C5D;
    --am-color-success-soft: rgba(28, 156, 93, 0.10);
    --am-color-success-border: rgba(28, 156, 93, 0.22);

    --am-color-warning: #B7791F;
    --am-color-warning-soft: rgba(183, 121, 31, 0.12);
    --am-color-warning-border: rgba(183, 121, 31, 0.26);

    --am-color-info: #2B6CB0;
    --am-color-info-soft: rgba(43, 108, 176, 0.10);
    --am-color-info-border: rgba(43, 108, 176, 0.22);

    --am-color-danger: var(--am-color-accent);
    --am-color-danger-soft: var(--am-color-accent-soft);
    --am-color-danger-border: var(--am-color-accent-border);

    /* =========================
       Buttons
       (make primary consistent with your accent or your black)
    ========================= */

    /* Option A (recommended): primary = accent (more brand) */
    --am-btn-primary-bg: var(--am-color-accent);
    --am-btn-primary-bg-hover: var(--am-color-accent-hover);
    --am-btn-primary-text: #FFFFFF;

    /* Option B: keep “black primary” as a secondary action token */
    --am-btn-strong-bg: #0F1419;
    --am-btn-strong-bg-hover: #222A33;
    --am-btn-strong-text: #FFFFFF;

    /* Backward-compatible aliases (so old CSS doesn’t break) */
    --am-color-button-primary-bg: var(--am-btn-primary-bg);
    --am-color-button-primary-text: var(--am-btn-primary-text);
}

/* Dark theme overrides */
html[data-theme="dark"] {
    color-scheme: dark;

    --am-color-bg: #0F1115;
    --am-color-bg-soft: #151922;
    --am-color-border-subtle: #252B36;

    --am-color-text-main: #F1F5F9;
    --am-color-text-muted: #B6C0CC;

    --am-surface-1: #121621;
    --am-surface-2: #1A1F2B;
    --am-surface-border: #2B3442;

    --am-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.45);
    --am-shadow-2: 0 10px 30px rgba(0, 0, 0, 0.35);

    --am-focus-ring: 0 0 0 3px rgba(212, 59, 69, 0.32);

    --am-color-accent-soft: rgba(212, 59, 69, 0.18);
    --am-color-accent-border: rgba(212, 59, 69, 0.38);

    --am-color-logo: var(--am-color-accent);

    --am-btn-strong-bg: #E6E9EF;
    --am-btn-strong-bg-hover: #F3F4F6;
    --am-btn-strong-text: #0F1115;
}

/* Shared tooltip styling (matches post summary tooltip) */
.am-tooltip-wrapper {
    position: relative;
    display: inline-flex;
}

.am-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    max-width: 280px;
    min-width: 220px;
    white-space: normal;

    background-color: var(--am-color-bg);
    color: var(--am-color-text-main);
    border: 1px solid var(--am-color-border-subtle);
    border-radius: 8px;
    padding: 8px 10px;

    font-size: 12.5px;
    line-height: 1.4;
    text-align: center;

    box-shadow: 0 6px 18px rgba(0,0,0,0.08);

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.08s ease, transform 0.08s ease;
    z-index: 2000;
}

.am-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: var(--am-color-border-subtle) transparent transparent transparent;
}

/* Tooltip positioned below trigger (for top-edge controls) */
.am-tooltip--down {
    top: calc(100% + 8px);
    bottom: auto;
}

.am-tooltip--down::after {
    top: auto;
    bottom: 100%;
    border-color: transparent transparent var(--am-color-border-subtle) transparent;
}

.am-tooltip-wrapper:hover .am-tooltip,
.am-tooltip-wrapper:focus-visible .am-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
}

/* Base */
html,
body {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--am-color-bg-soft);
    color: var(--am-color-text-main);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
    text-decoration: none !important;
}

/* Utilities */
.icon-16,
.icon-20,
.icon-24,
.icon-32,
.icon-40,
.icon-48 {
    display: inline-block;
    object-fit: contain;
}

.icon-16 { width: 16px; height: 16px; }
.icon-20 { width: 20px; height: 20px; }
.icon-24 { width: 24px; height: 24px; }
.icon-32 { width: 32px; height: 32px; }
.icon-40 { width: 40px; height: 40px; }
.icon-48 { width: 48px; height: 48px; }

.validation-message span {
    color: red !important;
}

/* Optional: global focus style */
:focus-visible {
    outline: none;
    box-shadow: var(--am-focus-ring);
    border-radius: 8px; /* safe generic */
}