/* ==========================================================================
   Rectangle One — design tokens + colour overrides
   --------------------------------------------------------------------------
   Loaded LAST on both the public site and the admin/student/instructor panel,
   so everything here wins over the theme stylesheets.

   Palette
     #286bf0  blue        (primary — buttons, links, active nav)
     #0c3a93  deep blue   (hover / pressed / emphasis on white)
     #e3a92b  gold        (accent — badges, highlights, stars, eyebrows)
     #8b6745  brown       (warm accent — bands, category fills)
     #647eb2  muted blue  (secondary text, icons, meta)
     #b4ada9  warm gray   (borders, dividers, disabled)
     #2a2525  ink         (headings, body text)
     #f7f4ed  cream       (page surface)

   Surfaces: cream page, white cards/panels on top of it.
   Change a colour once in the tokens block below and it applies everywhere.
   ========================================================================== */

:root {
    /* --- raw palette --- */
    --r1-blue:       #286bf0;
    --r1-blue-deep:  #0c3a93;
    --r1-gold:       #e3a92b;
    --r1-brown:      #8b6745;
    --r1-blue-muted: #647eb2;
    --r1-warm-gray:  #b4ada9;
    --r1-ink:        #2a2525;
    --r1-panel:      #2a2525;   /* dark anchor panels (hero, CTA, footer) */
    --r1-cream:      #f7f4ed;

    /* --- roles --- */
    --r1-page-bg:     var(--r1-cream);
    --r1-surface:     #ffffff;
    --r1-text:        var(--r1-ink);
    --r1-text-muted:  var(--r1-blue-muted);
    --r1-border:      #e7e0d4;
    --r1-divider:     var(--r1-warm-gray);
    --r1-primary:     var(--r1-blue);
    --r1-primary-hot: var(--r1-blue-deep);
    --r1-accent:      var(--r1-gold);
    --r1-accent-warm: var(--r1-brown);

    /* --- extended design-system tokens (Stitch "Modern Academy Luminary") --- */
    --r1-primary-strong: #0052cd;   /* pressed / high-emphasis blue        */
    --r1-blue-soft:      #3659b3;   /* structural secondary blue           */
    --r1-gold-light:     #f9bc3e;   /* ratings, badges, streak highlights  */
    --r1-sky:            #7fa0fe;   /* light blue container                */
    --r1-surface-warm:   #fff8f7;   /* warm near-white                     */
    --r1-surface-1:      #fcf1f1;
    --r1-surface-2:      #f6ebeb;
    --r1-surface-3:      #f0e6e5;
    --r1-surface-4:      #eae0e0;
    --r1-surface-dim:    #e2d8d7;
    --r1-text-variant:   #424654;
    --r1-outline:        #737686;
    --r1-outline-variant: #c2c6d7;
    --r1-red:            #ba1a1a;
    --r1-red-soft:       #ffdad6;

    /* elevation */
    --r1-shadow-sm:  0 2px 8px rgba(42, 37, 37, 0.04);
    --r1-shadow-md:  0 8px 24px -6px rgba(42, 37, 37, 0.05);
    --r1-shadow-lg:  0 16px 32px -8px rgba(40, 107, 240, 0.12);
    --r1-shadow-xl:  0 20px 40px -12px rgba(42, 37, 37, 0.16);
    --r1-hairline:   1px solid rgba(180, 173, 169, 0.35);
    --r1-header-bg:  rgba(247, 244, 237, 0.9);   /* translucent fixed header */

    /* shape */
    --r1-radius-base: 0.5rem;
    --r1-radius-md:   0.75rem;
    --r1-radius-lg:   1rem;
    --r1-radius-xl:   1.5rem;
    --r1-radius-full: 9999px;

    /* type */
    --r1-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --r1-container: 1280px;
    --r1-gutter: 1.5rem;

    /* --- re-point the theme's own variables at the palette --- */
    --system_primery_color: var(--r1-blue);
    --system_secendory_color: var(--r1-ink);
    --bg_color: var(--r1-cream);
    --footer_background_color: var(--r1-panel);
    --footer_headline_color: #ffffff;
    --footer_text_color: var(--r1-warm-gray);
    --footer_text_hover_color: var(--r1-gold);
}

/* ==========================================================================
   1. Page surface — cream page, white cards
   ========================================================================== */

html,
body {
    background-color: var(--r1-page-bg);
}

/* the theme paints these with a full-viewport gradient wallpaper */
body.admin,
body.crm_body_bg {
    background-color: var(--r1-page-bg);
    background-image: none !important;
}

.admin .navbar .navbar-collapse,
.up_dash_menu .navbar-collapse {
    background-color: var(--r1-surface) !important;
    background-image: none !important;
}

/* the scrollable content areas that surround the cards */
.dashboard_main_wrapper .dashboard_part,
.dashboard_main_wrapper .main_content_iner,
.bg-body,
.main_content_wrapper,
.content_wrapper {
    background-color: var(--r1-page-bg) !important;
}

/* cards / panels sit on white */
.white_box,
.card,
.card-body,
.main_content_iner,
.dashboard_white_box,
.modal-content,
.dropdown-menu,
.r1-course-card,
.r1-review-card,
.r1-features-bar {
    background-color: var(--r1-surface);
}

.white_box,
.card,
.modal-content,
.dropdown-menu {
    border-color: var(--r1-border);
}

/* ==========================================================================
   2. Typography
   ========================================================================== */

body,
p,
li,
td {
    color: var(--r1-text);
}

/* design-system typeface */
body,
button,
input,
select,
textarea {
    font-family: var(--r1-font);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--r1-ink);
}

small,
.text-muted,
.form-text {
    color: var(--r1-text-muted) !important;
}

.text-primary { color: var(--r1-blue) !important; }
.text-secondary { color: var(--r1-blue-muted) !important; }
.text-warning { color: var(--r1-gold) !important; }

hr {
    border-color: var(--r1-divider);
}

/* ==========================================================================
   3. Links
   ========================================================================== */

a { color: var(--r1-blue); }

a:hover,
a:focus {
    color: var(--r1-blue-deep);
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.theme-btn,
.theme_btn,
.primary-btn,
.btn-primary,
.add_button,
button[type="submit"].btn-primary,
input[type="submit"].btn-primary {
    background-color: var(--r1-blue) !important;
    border-color: var(--r1-blue) !important;
    color: #ffffff !important;
}

.theme-btn:hover,
.theme_btn:hover,
.primary-btn:hover,
.btn-primary:hover,
.add_button:hover,
.theme-btn:focus,
.theme_btn:focus,
.primary-btn:focus,
.btn-primary:focus,
.add_button:focus {
    background-color: var(--r1-blue-deep) !important;
    border-color: var(--r1-blue-deep) !important;
    color: #ffffff !important;
}

/* outlined / light variants */
.theme_btn_lite,
.btn-outline-primary {
    background-color: transparent !important;
    border-color: var(--r1-blue) !important;
    color: var(--r1-blue) !important;
}

.theme_btn_lite:hover,
.theme_btn_lite:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--r1-blue) !important;
    border-color: var(--r1-blue) !important;
    color: #ffffff !important;
}

.btn-secondary {
    background-color: var(--r1-blue-muted) !important;
    border-color: var(--r1-blue-muted) !important;
    color: #ffffff !important;
}

.btn-warning {
    background-color: var(--r1-gold) !important;
    border-color: var(--r1-gold) !important;
    color: var(--r1-ink) !important;
}

.btn-link { color: var(--r1-blue) !important; }

/* ==========================================================================
   5. Navigation
   ========================================================================== */

.header_area .main_menu ul li a,
.header_area .main_menu ul li a:visited {
    color: var(--r1-ink);
}

.header_area .main_menu ul li a.active,
.header_area .main_menu ul li a:hover,
.header_area .main_menu ul li.submenu_active > a {
    color: var(--r1-blue);
}

.header_area .main_menu ul li .submenu li a:hover {
    color: var(--r1-blue);
}

/* ==========================================================================
   6. Forms
   ========================================================================== */

.form-control,
.primary_input_field,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
textarea,
select {
    background-color: var(--r1-surface);
    border-color: var(--r1-border);
    color: var(--r1-text);
}

.form-control:focus,
.primary_input_field:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--r1-blue) !important;
    box-shadow: 0 0 0 0.15rem rgba(40, 107, 240, 0.15) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--r1-warm-gray);
}

label,
.primary_input_label {
    color: var(--r1-blue-muted);
}

/* ==========================================================================
   7. Tables
   ========================================================================== */

table thead th {
    background-color: var(--r1-cream);
    color: var(--r1-ink);
    border-color: var(--r1-border);
}

table td,
table th {
    border-color: var(--r1-border);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fbf9f4;
}

/* ==========================================================================
   8. Pagination
   ========================================================================== */

.paginations-links {
    color: var(--r1-text);
    border-color: var(--r1-divider);
}

.paginations-links.active,
.paginations-links:hover {
    background-color: var(--r1-blue) !important;
    border-color: var(--r1-blue) !important;
    color: #ffffff !important;
}

.page-item.active .page-link {
    background-color: var(--r1-blue);
    border-color: var(--r1-blue);
}

.page-link { color: var(--r1-blue); }

/* ==========================================================================
   9. Accents — gold & brown
   ========================================================================== */

.badge,
.badge-primary {
    background-color: var(--r1-gold);
    color: var(--r1-ink);
}

.section-subtitle,
.r1-section-label {
    color: var(--r1-gold) !important;
}

.badge-secondary      { background-color: var(--r1-brown); color: #ffffff; }
.text-warning,
.star,
.rating i,
.rated                { color: var(--r1-gold) !important; }

/* warm bands / category fills */
.become-instructor,
.category_area .couses_category .single_course_cat {
    background-color: var(--r1-brown) !important;
}

/* ==========================================================================
   10. Progress + status
   ========================================================================== */

.progress-bar,
.progress-bar.bg-primary {
    background-color: var(--r1-blue) !important;
}

.progress     { background-color: var(--r1-border); }

.alert-success { background-color: #eef7f0; border-color: #cfe6d6; color: #2a5c3a; }
.alert-warning { background-color: #fdf5e3; border-color: #f0dcad; color: #7a5a12; }
.alert-danger  { background-color: #fdf0ef; border-color: #f0cdc9; color: #8a2f28; }

/* ==========================================================================
   11. Footer
   ========================================================================== */

.copyright_area,
.footer_area,
footer {
    background-color: var(--r1-panel) !important;
    color: var(--r1-warm-gray);
}

.copyright_area a,
footer a {
    color: var(--r1-warm-gray);
}

.copyright_area a:hover,
footer a:hover {
    color: var(--r1-gold);
}

/* ==========================================================================
   Dark mode
   Values taken from design/stitch_lms_homepage_redesign_dark.zip (its tailwind
   config, since its DESIGN.md is identical to the light one). Applied to <html>
   via [data-theme="dark"]; the toggle in the header sets it and remembers the
   choice. Same specificity as :root, but later in the file, so it wins.
   ========================================================================== */

[data-theme="dark"] {
    /* surfaces */
    --r1-cream:        #0c1017;   /* page canvas            */
    --r1-surface:      #121824;   /* cards                  */
    --r1-surface-warm: #121824;
    --r1-surface-1:    #101622;
    --r1-surface-2:    #151c2a;
    --r1-surface-3:    #1e2738;
    --r1-surface-4:    #28344c;
    --r1-surface-dim:  #080b11;
    --r1-panel:        #151c2a;   /* dark anchor panels     */

    /* text */
    --r1-ink:          #f1f5f9;
    --r1-text:         #f1f5f9;
    --r1-text-variant: #94a3b8;
    --r1-blue-muted:   #94a3b8;

    /* lines */
    --r1-border:          #2a3449;
    --r1-warm-gray:       #334155;
    --r1-divider:         #334155;
    --r1-outline:         #475569;
    --r1-outline-variant: #2a3449;

    /* interaction — hover must go *lighter* on a dark canvas */
    --r1-primary-strong: #286bf0;
    --r1-blue-soft:      #4d74db;
    --r1-blue-deep:      #4d74db;
    --r1-brown:          #e3a92b;   /* dark bronze-accent resolves to gold */
    --r1-red:            #ff5449;
    --r1-red-soft:       #93000a;

    /* elevation reads as shadow, not tint */
    --r1-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --r1-shadow-md: 0 8px 24px -6px rgba(0, 0, 0, 0.45);
    --r1-shadow-lg: 0 16px 32px -8px rgba(40, 107, 240, 0.25);
    --r1-shadow-xl: 0 20px 40px -12px rgba(0, 0, 0, 0.6);
    --r1-hairline:  1px solid #2a3449;
    --r1-header-bg:  rgba(12, 16, 23, 0.9);

    /* theme bridges */
    --system_secendory_color: var(--r1-ink);
    --footer_text_color: #94a3b8;
    color-scheme: dark;
}