/*
	Theme Name:   Jannah Child
	Theme URI:    http://jannah.tielabs.com/
	Description:  Jannh Child Theme
	Author:       TieLabs
	Author URI:   https://tielabs.com
	Template:     jannah
	Version:      1.0.2
	License:      license purchased
	License URI:  http://themeforest.net/licenses/regular_extended
	Tags:         Tags: two-columns, buddypress, left-sidebar, right-sidebar, custom-menu, editor-style, featured-images, full-width-template, microformats, rtl-language-support, sticky-post, threaded-comments, translation-ready
	Text Domain:  jannah-child
*/


/* write custom css after this line */


/* Biến CSS cho giao diện sáng */
:root {
    --background-light: #ffffff;
    --background-dark: #1e1e1e;
    --text-light: #333333; /* Màu chữ cho giao diện sáng */
    --text-dark: #f5f5f5;  /* Màu chữ cho giao diện tối */
    --primary-color: #0073aa; /* Màu xanh dương chủ đạo */
    --primary-hover: #005177;
    --border-color: #dddddd;
    --code-background: #f5f5f5; /* Màu nền cho phần tử code trong chế độ sáng */
    --blockquote-border: #0073aa;
    --blockquote-background: rgba(249, 249, 249, 0.9); /* Độ trong suốt */
    --callout-note: rgba(231, 242, 250, 0.9); /* Độ trong suốt */
    --callout-warning: rgba(255, 243, 205, 0.9);
    --callout-important: rgba(248, 215, 218, 0.9);
    --callout-tip: rgba(212, 237, 218, 0.9);
    --alert-info: rgba(233, 247, 254, 0.9);
    --alert-warning: rgba(252, 248, 227, 0.9);
    --alert-success: rgba(233, 249, 233, 0.9);
    --button-background: #5bc0de;
    --button-hover: #31b0d5;
}

/* Biến CSS cho giao diện tối */
@media (prefers-color-scheme: dark) {
    :root {
        --background-light: #1e1e1e;
        --background-dark: #ffffff;
        --text-light: #f5f5f5; /* Cập nhật màu chữ sáng trên nền tối */
        --text-dark: #333333;  /* Màu chữ tối trên nền sáng */
        --primary-color: #4dabf7; /* Màu xanh dương chủ đạo */
        --primary-hover: #228be6;
        --border-color: #444444;
        --code-background: #2d2d2d; /* Màu nền cho phần tử code trong chế độ tối */
        --blockquote-border: #4dabf7;
        --blockquote-background: rgba(45, 45, 45, 0.9); /* Độ trong suốt */
        --callout-note: rgba(28, 61, 74, 0.9); /* Độ trong suốt */
        --callout-warning: rgba(74, 58, 0, 0.9);
        --callout-important: rgba(74, 28, 34, 0.9);
        --callout-tip: rgba(28, 74, 42, 0.9);
        --alert-info: rgba(28, 61, 74, 0.9);
        --alert-warning: rgba(74, 58, 0, 0.9);
        --alert-success: rgba(28, 74, 42, 0.9);
        --button-background: #4dabf7;
        --button-hover: #228be6;
    }
}

/* Áp dụng màu nền và màu chữ cho phần tử code */
code {
    background-color: var(--code-background);
    padding: 2px 4px;
    border-radius: 4px;
    font-family: monospace;
    color: var(--text-light); /* Sử dụng biến --text-light cho màu chữ */
}

/* Áp dụng cho các khối code lớn hơn */
pre code {
    display: block;
    padding: 16px;
    overflow-x: auto;
    border-radius: 8px;
    background-color: var(--code-background);
    color: var(--text-light); /* Sử dụng biến --text-light cho màu chữ */
}