/* ==================================================
   RCODE DEFAULT THEME
   ==================================================

   File ini HANYA berisi:

   - Color tokens
   - Background tokens
   - Text tokens
   - Border tokens
   - Component color tokens
   - Shadow tokens

   Layout TIDAK berada di sini.

   Layout berada di:

   - site.css
   - home.css
   - article.css
   - category.css
   - tag.css
   - sidebar.css

   ================================================== */


/* ==================================================
   ROOT
   ================================================== */

:root {


    /* ==================================================
       PRIMARY
       ================================================== */

    --primary:
        #4f46e5;

    --primary-dark:
        #3730a3;

    --primary-light:
        #eef2ff;


    /* ==================================================
       ACCENT COLORS
       ================================================== */

    --blue:
        #2563eb;

    --cyan:
        #0891b2;

    --success:
        #16a34a;

    --warning:
        #f59e0b;

    --danger:
        #dc2626;

    --info:
        #0891b2;


    /* ==================================================
       MAIN BACKGROUND
       ================================================== */

    --bg-main:
        #f8fafc;

    --bg-card:
        #ffffff;

    --bg-white:
        #ffffff;

    --bg-light:
        #f8fafc;

    --bg-soft:
        #f8fafc;


    /* ==================================================
       TEXT
       ================================================== */

    --text-dark:
        #0f172a;

    --text:
        #334155;

    --text-secondary:
        #475569;

    --text-muted:
        #64748b;

    --text-faint:
        #94a3b8;

    --text-soft:
        #cbd5e1;

    --text-white:
        #ffffff;


    /* ==================================================
       BORDER
       ================================================== */

    --border:
        #e2e8f0;

    --border-light:
        #f1f5f9;

    --border-input:
        #dbe3ee;

    --border-primary:
        #c7d2fe;

    --border-focus:
        #6366f1;


    /* ==================================================
       SOFT PRIMARY
       ================================================== */

    --soft-bg:
        #f8fafc;

    --soft-primary:
        #eef2ff;

    --soft-primary-hover:
        #e0e7ff;


    /* ==================================================
       SOFT BLUE
       ================================================== */

    --soft-blue:
        #eff6ff;

    --soft-blue-border:
        #dbeafe;

    --soft-blue-hover:
        #bfdbfe;


    /* ==================================================
       SIDEBAR
       ================================================== */

    --sidebar-bg-start:
        #0f172a;

    --sidebar-bg-end:
        #172033;

    --sidebar-text:
        #64748b;

    --sidebar-text-hover:
        #0f172a;

    --sidebar-brand-text:
        #ffffff;

    --sidebar-brand-icon:
        #818cf8;

    --sidebar-hover-bg:
        rgba(79,70,229,.08);

    --sidebar-danger-text:
        #dc2626;

    --sidebar-danger-hover-text:
        #b91c1c;

    --sidebar-danger-bg:
        rgba(220,38,38,.08);

    --sidebar-border:
        rgba(15,23,42,.08);

    --sidebar-divider:
        rgba(15,23,42,.08);

    --sidebar-submenu-border:
        rgba(15,23,42,.10);

    --sidebar-scrollbar:
        rgba(15,23,42,.20);

    --sidebar-shadow:
        0 20px 50px rgba(15,23,42,.14);

    --sidebar-card-shadow:
        0 8px 25px rgba(15,23,42,.045);


    /* ==================================================
       TOPBAR
       ================================================== */

    --topbar-bg:
        rgba(255,255,255,.96);

    --topbar-border:
        #e2e8f0;

    --topbar-divider:
        #e2e8f0;

    --topbar-shadow:
        0 6px 20px rgba(15,23,42,.06);


    /* ==================================================
       DROPDOWN
       ================================================== */

    --dropdown-bg:
        #ffffff;

    --dropdown-border:
        #e2e8f0;

    --dropdown-text:
        #334155;

    --dropdown-hover-text:
        #0f172a;

    --dropdown-hover-bg:
        #f8fafc;

    --dropdown-shadow:
        0 20px 40px rgba(15,23,42,.12);


    /* ==================================================
       HERO
       ================================================== */

    --hero-bg-start:
        #312e81;

    --hero-bg-middle:
        #4f46e5;

    --hero-bg-end:
        #0891b2;

    --hero-text:
        #ffffff;

    --hero-text-muted:
        rgba(255,255,255,.78);


    /* ==================================================
       HERO OVERLAY
       ================================================== */

    --hero-overlay:
        rgba(255,255,255,.08);

    --hero-overlay-border:
        rgba(255,255,255,.28);


    /* ==================================================
       CODE BOX
       ================================================== */

    --code-box-bg:
        #0b1120;

    --code-box-border:
        rgba(255,255,255,.12);

    --code-box-shadow:
        0 20px 45px rgba(15,23,42,.18);

    --code-box-pre-bg:
        rgba(0,0,0,.20);

    --code-box-text:
        #cbd5e1;

    --code-box-keyword:
        #c084fc;

    --code-box-function:
        #60a5fa;

    --code-box-string:
        #34d399;

    --code-box-comment:
        #64748b;


    /* ==================================================
       CARD
       ================================================== */

    --card-bg:
        #ffffff;

    --card-border:
        #e2e8f0;

    --card-border-hover:
        #c7d2fe;

    --card-shadow:
        0 8px 25px rgba(15,23,42,.045);

    --card-shadow-hover:
        0 12px 30px rgba(15,23,42,.08);


    /* ==================================================
       CATEGORY HERO
       ================================================== */

    --category-hero-glow:
        rgba(79,70,229,.10);

    --category-hero-decoration:
        rgba(79,70,229,.05);

    --category-hero-shadow:
        0 8px 28px rgba(15,23,42,.045);


    /* ==================================================
       CATEGORY CARD
       ================================================== */

    --category-card-shadow:
        0 6px 20px rgba(15,23,42,.035);

    --category-card-shadow-hover:
        0 12px 28px rgba(15,23,42,.07);


    /* ==================================================
       ARTICLE
       ================================================== */

    --article-text:
        #334155;

    --article-heading:
        #0f172a;

    --article-code-text:
        #166534;

    --article-code-bg:
        #f8fafc;

    --article-inline-code-text:
        #be123c;

    --article-inline-code-bg:
        #fff1f2;

    --article-blockquote-text:
        #475569;

    --article-blockquote-bg:
        #f8fafc;

    --article-blockquote-border:
        #4f46e5;


    /* ==================================================
       PAGINATION
       ================================================== */

    --pagination-bg:
        #ffffff;

    --pagination-text:
        #334155;

    --pagination-border:
        #e2e8f0;

    --pagination-hover-bg:
        #eef2ff;

    --pagination-hover-text:
        #3730a3;

    --pagination-active-bg:
        #4f46e5;

    --pagination-active-text:
        #ffffff;

    --pagination-active-border:
        #4f46e5;


    /* ==================================================
       CATEGORY
       ================================================== */

    --category-text:
        #334155;

    --category-hover-text:
        #4f46e5;

    --category-border:
        #e2e8f0;

    --category-count-text:
        #3730a3;

    --category-count-bg:
        #eef2ff;

    --category-count-border:
        #c7d2fe;


    /* ==================================================
       TAG
       ================================================== */

    --tag-text:
        #475569;

    --tag-bg:
        #f8fafc;

    --tag-border:
        #e2e8f0;

    --tag-hover-text:
        #4f46e5;

    --tag-hover-bg:
        #eef2ff;

    --tag-hover-border:
        #c7d2fe;


    /* ==================================================
       INPUT
       ================================================== */

    --input-bg:
        #ffffff;

    --input-text:
        #334155;

    --input-placeholder:
        #94a3b8;

    --input-border:
        #dbe3ee;

    --input-focus-border:
        #6366f1;

    --input-focus-shadow:
        rgba(99,102,241,.18);


    /* ==================================================
       SEARCH
       ================================================== */

    --search-bg:
        #ffffff;

    --search-text:
        #334155;

    --search-placeholder:
        #94a3b8;

    --search-border:
        #dbe3ee;

    --search-focus-border:
        #6366f1;


    /* ==================================================
       SIDEBAR TAG
       ================================================== */

    --sidebar-tag-text:
        #475569;

    --sidebar-tag-bg:
        #f8fafc;

    --sidebar-tag-border:
        #e2e8f0;

    --sidebar-tag-hover-text:
        #4f46e5;

    --sidebar-tag-hover-bg:
        #eef2ff;

    --sidebar-tag-hover-border:
        #c7d2fe;


    /* ==================================================
       EMPTY STATE
       ================================================== */

    --empty-bg:
        #f8fafc;

    --empty-text:
        #334155;

    --empty-title:
        #0f172a;

    --empty-border:
        #e2e8f0;

    --empty-icon:
        #4f46e5;


    /* ==================================================
       RELATED CONTENT
       ================================================== */

    --related-bg:
        #ffffff;

    --related-text:
        #334155;

    --related-title:
        #0f172a;

    --related-border:
        #e2e8f0;

    --related-hover:
        #4f46e5;


    /* ==================================================
       STICKY AD
       ================================================== */

    --sticky-ad-bg:
        rgba(255,255,255,.96);

    --sticky-ad-shadow:
        0 -5px 20px rgba(15,23,42,.12);

    --sticky-ad-close-text:
        #ffffff;

    --sticky-ad-close-bg:
        #334155;


    /* ==================================================
       BUTTON
       ================================================== */

    --button-primary-bg:
        #4f46e5;

    --button-primary-text:
        #ffffff;

    --button-primary-border:
        #4f46e5;

    --button-primary-hover-bg:
        #3730a3;

    --button-primary-hover-text:
        #ffffff;

    --button-primary-hover-border:
        #3730a3;


    /* ==================================================
       RADIUS
       ================================================== */

    --radius-sm:
        8px;

    --radius-md:
        12px;

    --radius-lg:
        18px;

    --radius-xl:
        22px;


    /* ==================================================
       SHADOW
       ================================================== */

    --shadow-sm:
        0 4px 14px rgba(15,23,42,.05);

    --shadow-md:
        0 10px 30px rgba(15,23,42,.08);

    --shadow-lg:
        0 20px 50px rgba(15,23,42,.12);


    /* ==================================================
       TRANSITION
       ================================================== */

    --transition:
        all .2s ease;

}