/*  ===== CODE MODIFICATION =====
 *  File name    : commons/css/site-theme.css (web root /var/www/html)
 *  Dev name     : Denish Faldu
 *  Date         : 2026-10-23
 *  Section      : whole file (new)
 *  Purpose      : Improve functionality
 *  Current      : No shared theme. Colors/fonts are spread over style.css, globals.css,
 *                 main.css and inline styles; layouts mix Bootstrap 3.3.7 / 3.4.1 / 4.3.1.
 *  Modification : New design-system file for the UI/UX redesign (Phase 0). Holds the
 *                 client's CURRENT colors and fonts as CSS variables, maps them onto
 *                 Bootstrap 5.3 variables, and adds a few shared component classes.
 *                 Loaded ONLY by the new *_v2 layouts (after bootstrap-5.3.3.min.css).
 *                 Old layouts do not load it, so existing pages are not affected.
 *  Related code : commons/css/bootstrap-5.3.3.min.css, commons/js/bootstrap-5.3.3.bundle.min.js,
 *                 future app/views/layouts/*_v2.php.
 *                 Color source: assets/css/style.css (#3b4ef8, #0a22f6, #2d405f, #eceefe,
 *                 #4e6fa4, #444444, fonts Krub + Open Sans) and commons/css/globals.css
 *                 (--btn-bg gradient #ff105f -> #ffad06).
 *  ============================= */

/* Fonts: the _v2 layout loads them from Google Fonts:
   Krub 500/600/700 (headings) + Open Sans 400/600/700 (body text). */

/* ---------------------------------------------------------------
   1. Design tokens (client's current colors — do not add new brand colors)
   --------------------------------------------------------------- */
:root {
    /* Brand (assets/css/style.css) */
    --ci-primary: #3b4ef8;          /* links, nav hover, main buttons */
    --ci-primary-hover: #0a22f6;    /* button / link hover */
    --ci-primary-soft: #eceefe;     /* soft backgrounds, header border */
    --ci-heading: #2d405f;          /* logo, headings, mobile menu icon */
    --ci-accent: #4e6fa4;           /* secondary hover / muted links */
    --ci-text: #444444;             /* body text */

    /* Buy / checkout call-to-action (commons/css/globals.css --btn-bg) */
    --ci-cta-start: #ff105f;
    --ci-cta-end: #ffad06;
    --ci-cta-gradient: linear-gradient(to right, var(--ci-cta-start), var(--ci-cta-end));
    --ci-cta-gradient-hover: linear-gradient(to left, var(--ci-cta-start), var(--ci-cta-end));

    /* Neutrals */
    --ci-white: #ffffff;
    --ci-border: #e2e8f0;
    --ci-muted: #6c757d;

    /* Typography */
    --ci-font-heading: "Krub", sans-serif;
    --ci-font-body: "Open Sans", sans-serif;
    --ci-font-size-base: 1rem;      /* 16px — no smaller on mobile (iPhone zoom) */
    --ci-line-height: 1.6;

    /* Spacing / shape */
    --ci-gutter: 16px;              /* side gutter on phones */
    --ci-section-space: 2.5rem;
    --ci-radius: 8px;
    --ci-radius-pill: 25px;         /* same as globals.css --button-radius */
    --ci-shadow: 0 1px 5px rgba(104, 104, 104, 0.25);
    --ci-transition: all 0.2s ease-in-out;

    /* Bootstrap 5.3 mapping */
    --bs-primary: var(--ci-primary);
    --bs-primary-rgb: 59, 78, 248;
    --bs-link-color: var(--ci-primary);
    --bs-link-color-rgb: 59, 78, 248;
    --bs-link-hover-color: var(--ci-primary-hover);
    --bs-link-hover-color-rgb: 10, 34, 246;
    --bs-body-font-family: var(--ci-font-body);
    --bs-body-font-size: var(--ci-font-size-base);
    --bs-body-line-height: var(--ci-line-height);
    --bs-body-color: var(--ci-text);
    --bs-border-color: var(--ci-border);
    --bs-border-radius: var(--ci-radius);
}

/* ---------------------------------------------------------------
   2. Base
   Breakpoints = Bootstrap 5 (sm 576, md 768, lg 992, xl 1200).
   Mobile first: base rules are for phones, @media (min-width) adds bigger screens.
   Test widths: 375 / 768 / 1280.
   --------------------------------------------------------------- */
body {
    font-family: var(--ci-font-body);
    color: var(--ci-text);
    background: var(--ci-white);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ci-font-heading);
    color: var(--ci-heading);
    font-weight: 600;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

@media (min-width: 768px) {
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.4rem; }
}

img {
    max-width: 100%;
    height: auto;
}

.container,
.container-fluid {
    padding-left: var(--ci-gutter);
    padding-right: var(--ci-gutter);
}

/* ---------------------------------------------------------------
   3. Buttons
   .btn-primary  = normal action (blue)
   .btn-cta      = buy / add to cart / checkout (pink -> orange gradient)
   --------------------------------------------------------------- */
.btn-primary {
    --bs-btn-bg: var(--ci-primary);
    --bs-btn-border-color: var(--ci-primary);
    --bs-btn-hover-bg: var(--ci-primary-hover);
    --bs-btn-hover-border-color: var(--ci-primary-hover);
    --bs-btn-active-bg: var(--ci-primary-hover);
    --bs-btn-active-border-color: var(--ci-primary-hover);
    --bs-btn-disabled-bg: var(--ci-primary);
    --bs-btn-disabled-border-color: var(--ci-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--ci-primary);
    --bs-btn-border-color: var(--ci-primary);
    --bs-btn-hover-bg: var(--ci-primary);
    --bs-btn-hover-border-color: var(--ci-primary);
    --bs-btn-active-bg: var(--ci-primary-hover);
    --bs-btn-active-border-color: var(--ci-primary-hover);
}

.btn-cta {
    background: var(--ci-cta-gradient);
    border: 0;
    border-radius: var(--ci-radius-pill);
    color: var(--ci-white);
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    transition: var(--ci-transition);
}

.btn-cta:hover,
.btn-cta:focus {
    background: var(--ci-cta-gradient-hover);
    color: var(--ci-white);
}

/* Full-width buttons on phones */
@media (max-width: 575.98px) {
    .btn-block-mobile {
        display: block;
        width: 100%;
    }
}

/* ---------------------------------------------------------------
   4. Cards, sections, page title
   --------------------------------------------------------------- */
.ci-card {
    background: var(--ci-white);
    border: 1px solid var(--ci-border);
    border-radius: var(--ci-radius);
    box-shadow: var(--ci-shadow);
    padding: 1rem;
}

@media (min-width: 768px) {
    .ci-card {
        padding: 1.5rem;
    }
}

.ci-section {
    padding-top: var(--ci-section-space);
    padding-bottom: var(--ci-section-space);
}

.ci-section-soft {
    background: var(--ci-primary-soft);
}

.ci-page-title {
    border-bottom: 2px solid var(--ci-primary-soft);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
}

/* ---------------------------------------------------------------
   5. Forms
   --------------------------------------------------------------- */
.form-control,
.form-select {
    font-size: var(--ci-font-size-base);   /* 16px stops iPhone auto-zoom */
    border-color: var(--ci-border);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ci-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 78, 248, 0.2);
}

.form-label {
    color: var(--ci-heading);
    font-weight: 600;
}

/* ---------------------------------------------------------------
   6. Tables: scroll sideways on phones instead of breaking the page
   (wrap tables in <div class="table-responsive">)
   --------------------------------------------------------------- */
.table thead th {
    color: var(--ci-heading);
    white-space: nowrap;
}