/* ===== MOBILE TYPOGRAPHY - Smaller Font Sizes ===== */
@media (max-width: 768px) {

    /* Base font size reduction */
    body {
        font-size: 14px !important;
        /* Down from 16px */
        line-height: 1.5;
    }

    /* Headings */
    h1,
    .note-detail-title {
        font-size: 1.75rem !important;
        /* ~24.5px instead of larger */
    }

    h2 {
        font-size: 1.5rem !important;
        /* ~21px */
    }

    h3,
    .stats-title,
    .recent-title {
        font-size: 1.25rem !important;
        /* ~17.5px */
    }

    h4 {
        font-size: 1.1rem !important;
        /* ~15.4px */
    }

    /* UI Elements */
    .btn-view-all,
    .back-btn {
        font-size: 0.875rem !important;
        /* ~12.25px */
        padding: 10px 20px;
    }

    .btn-share {
        font-size: 0.8rem !important;
        /* ~11.2px */
        padding: 0.625rem 1rem;
    }

    /* Sidebar */
    .logo-text {
        font-size: 1rem !important;
        /* Smaller logo text */
    }

    .category-item {
        font-size: 0.85rem !important;
        /* ~11.9px */
    }

    .category-count {
        font-size: 0.7rem !important;
        /* ~9.8px */
    }

    /* Note Content */
    .note-content-wrapper {
        font-size: 0.9rem;
        /* ~12.6px for body text */
    }

    .note-content-wrapper p,
    .note-content-wrapper li {
        font-size: 0.9rem;
        /* ~12.6px */
    }

    .note-meta {
        font-size: 0.75rem !important;
        /* ~10.5px */
    }

    /* Dashboard */
    .greeting {
        font-size: 1.5rem !important;
        /* Smaller greeting */
    }

    .greeting-subtext {
        font-size: 0.85rem !important;
    }

    /* Note cards */
    .note-card h3 {
        font-size: 1.05rem !important;
        /* ~14.7px */
    }

    .note-card p {
        font-size: 0.85rem !important;
        /* ~11.9px */
    }
}

/* Extra small mobile - even smaller fonts */
@media (max-width: 480px) {
    body {
        font-size: 13px !important;
        /* Even smaller base */
    }

    h1,
    .note-detail-title {
        font-size: 1.5rem !important;
        /* ~19.5px */
    }

    .btn-view-all,
    .back-btn {
        font-size: 0.8rem !important;
        padding: 8px 16px;
    }
}