:root {
    /* Font Family */
    --font-family-base: 'Inter', sans-serif;
    --font-family-secondary: 'Nunito Sans', sans-serif;

    /* Font Sizes */
    --font-size-sm: 0.75rem;
    /* 12px */
    --font-size-md: 0.875rem;
    /* 14px */
    --font-size-lg: 1rem;
    /* 16px */
    --font-size-xl: 1.4375rem;
    /* 23px (judul meeting) */

    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-bold: 700;
    --font-weight-semibold: 600;

    /* Font Colors */
    --font-color-base: #111;
    --font-color-muted: rgba(0, 0, 0, 0.6);
    /* or #6c757d */
    --font-color-light: #888;
    --font-color-inverse: #fff;

    /* Opacity Levels */
    --opacity-100: 1;
    --opacity-90: 0.9;
    --opacity-80: 0.8;
    --opacity-70: 0.7;
    --opacity-60: 0.6;
    --opacity-50: 0.5;
    --opacity-40: 0.4;
    --opacity-30: 0.3;
    --opacity-20: 0.2;
    --opacity-10: 0.1;
    --opacity-0: 0;

    /* Layout Settings */
    --archive-full-width: 100%;
    /* Default: Desktop */
    --archive-width: 90%;
    /* Default: Desktop */
    --archive-height: 10.75rem;
    --archive-radius: 0.9375rem;
    --archive-margin-bottom: 1.25rem;

    /* Color Settings */
    --archive-bg-active: #0C256C;
    --archive-color: #111;
    --archive-color-active: #fff;

    /* Button Style */
    --archive-btn-bg: #B4DDFA;
    --archive-btn-bg-active: #FABA2F;
    --archive-btn-color: #0C256C;

    /* Search Label */
    --archive-search-color: #202224;
    --archive-search-bg-active: #0C256C;
    --archive-search-color-active: #fff;
    --archive-search-font: 'Nunito', sans-serif;
    --archive-search-size: 0.75rem;
    --archive-search-padding: 0.5rem;
    --archive-search-width: 40%;
}

/* Archive Box */
.archive {
    cursor: pointer;
    color: var(--archive-color);
    width: var(--archive-width);
    height: var(--archive-height);
    border-radius: var(--archive-radius);
    position: relative;
}

.archive-date {
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    opacity: var(--opacity-80);
}

.archive-title {
    font-family: var(--font-family-base);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.archive-type {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-md);
    opacity: var(--opacity-80);
}

.archive-btn {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    background-color: var(--archive-btn-bg);
    color: var(--archive-btn-color);
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.archive-detail {
    width: var(--archive-full-width);
    height: auto;
    border-radius: var(--archive-radius);
}

.archive-search {
    width: var(--archive-search-width);
    margin-bottom: var(--archive-margin-bottom);
}

.archive.active {
    background-color: var(--archive-bg-active);
    color: var(--archive-color-active);
}

.archive.active::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 65%;
    margin-top: -35px;
    border: 0;
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
    border-left: 10px solid var(--archive-bg-active);
}

/* Archive Button */
.archive button {
    background-color: var(--archive-btn-bg);
    color: var(--archive-btn-color);
}

.archive.active button {
    background-color: var(--archive-btn-bg-active);
    color: var(--archive-btn-color);
}

/* Search Option Labels */
label.btn-search-archive {
    color: var(--archive-search-color) !important;
    font-family: var(--archive-search-font) !important;
    font-size: var(--archive-search-size);
    padding-top: var(--archive-search-padding);
}

label.btn-search-archive.active {
    background-color: var(--archive-search-bg-active) !important;
    color: var(--archive-search-color-active) !important;
}

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

/* Laptop (≤1200px) */
@media (max-width: 1200px) {
    :root {
        --archive-height: auto;
        --font-size-xl: 1.25rem;
        /* 20px */
    }
}

/* Tablet (≤900px) */
@media (max-width: 900px) {
    :root {
        --archive-width: 100%;
        --archive-height: auto;
        --font-size-xl: 1.25rem;
        /* 20px */
    }
}

/* Mobile (≤600px) */
@media (max-width: 600px) {
    :root {
        --archive-width: 100%;
        --archive-height: auto;
        --archive-radius: 0.5rem;
        --font-size-xl: 1.25rem;
        /* 20px */
    }

    .archive.active::after {
        display: none;
    }
}