/* =========================
   DESIGN TOKENS
========================= */

:root {
    /* COLORS */
    --blue: #00539c;
    --blue-soft: #e6E7eb;
    --blue-hover: #1e68b1;
    --gray: #6b7280;
    --text-color: #374151;
    --red-text-color: #ff0000;
    --backgrount-hover: #f5f7fa;

    --header-border-bottom: #c4c4c8;
    --header-search-color: #9ca3af;
    --header-search-color-hover: #0054a6;

    --event-list-border-bottom: #c4c4c8;

    --context-backgrount: #f7f7f7;
    --context-border-bottom: #c4c4c8; /*#c1c2c6;*/

    --share-svg-icon-color: #495a74;
    --share-btn-color-hover: #495a74;
    --share-svg-icon-size: 1.5rem;

    /* TYPOGRAPHY */
    --font-ui: sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Helvetica Neue", Arial, sans-serif;

    --font-content: "Aino",-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;

    /* SIZES */
    --content-max-width: 70ch;
    --radius-pill: 100px;
}

@media print {
    body * {
        visibility: hidden;
    }

    .page-content,
    .page-content * {
        visibility: visible;
    }

    .page-content {
        position: absolute;
        inset: 0;
    }

    .page-share * {
        display: none;
    }
}