/*
 * Serepok — foundation variables.
 * theme.css was compiled against a variables sheet that never shipped; every
 * `var(--x)` without a fallback made its property invalid at computed-value
 * time (headings inherited 16px, containers lost their gutter, and so on).
 * This sheet defines the typographic, spacing and layout tokens theme.css
 * relies on. Colour tokens (--primary, --text, --bg …) come from the CMS
 * colour stylesheet; component tokens fall back to Bootstrap's own rules.
 */
:root {
    /* type */
    --font-family-base: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-family-icons-medium: serepok-medium-icons;
    --font-family-icons-small: serepok-small-icons;
    --font-size-base: 14px;
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xlg: 18px;
    --font-size-xxlg: 22px;
    --font-size-h1: 40px;
    --font-size-h2: 32px;
    --font-size-h3: 24px;
    --font-size-h4: 20px;
    --font-size-h5: 16px;
    --font-size-h6: 14px;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-base: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    --font-weight-h1: 700;
    --font-weight-h2: 700;
    --font-weight-h3: 700;
    --font-weight-h4: 700;
    --font-weight-h5: 700;
    --font-weight-h6: 700;
    --line-height-base: 1.55;
    --line-height-xs: 1.4;
    --line-height-sm: 1.45;
    --line-height-md: 1.55;
    --line-height-lg: 1.5;
    --line-height-xlg: 1.45;
    --line-height-xxlg: 1.35;
    --line-height-h1: 1.15;
    --line-height-h2: 1.2;
    --line-height-h3: 1.25;
    --line-height-h4: 1.3;
    --line-height-h5: 1.35;
    --line-height-h6: 1.4;
    --headings-margin-bottom: 0.5em;
    --display-line-height: 1.1;
    --display1-size: 64px; --display1-weight: 800;
    --display2-size: 56px; --display2-weight: 800;
    --display3-size: 48px; --display3-weight: 800;
    --display4-size: 40px; --display4-weight: 800;
    --link-decoration: none;
    --link-hover-decoration: underline;
    --dt-font-weight: 700;
    --small-font-size: 85%;

    /* radius, shadow, motion */
    --border-radius-none: 0;
    --border-radius-xs: 4px;
    --border-radius-sm: 6px;
    --border-radius: 10px;
    --border-radius-lg: 16px;
    --box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
    --box-shadow-xlg: 0 24px 60px rgba(15, 23, 42, 0.12);
    --transition-fade: opacity 0.15s linear;
    --transition-collapse: height 0.25s ease;

    /* layout */
    --container-xl-max-width: 1360px;
    --layout-container-gutter: clamp(16px, 2.5vw, 32px);
    --layout-left-container-gutter: 24px;
    --main-body-padding-v: 32px;
    --main-body-sidebar-width: 280px;
    --main-body-sidebar-padding-h: 24px;
    --main-body-sidebar-padding-v: 24px;
    --main-body-sidebar-content-bg: transparent;

    /* generic ui blocks (cards, panels) */
    --ui-block-bg: #ffffff;
    --ui-block-bg-form: #ffffff;
    --ui-block-border-color: rgba(15, 23, 42, 0.08);
    --ui-block-border: 1px solid var(--ui-block-border-color);
    --ui-block-divider-border: 1px solid var(--ui-block-border-color);
    --ui-block-secondary-divider-border-color: rgba(15, 23, 42, 0.06);
    --ui-block-border-radius: 12px;
    --ui-block-border-radius-lg: 18px;
    --ui-block-header-bg: transparent;
    --ui-block-header-height: 56px;
    --ui-block-overlay-bg: rgba(255, 255, 255, 0.85);
    --ui-block-overlay-bg-2: rgba(15, 23, 42, 0.45);
    --ui-block-overlay-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    --ui-block-padding-xs: 8px;
    --ui-block-padding-sm: 12px;
    --ui-block-padding-md: 16px;
    --ui-block-padding-base: 20px;
    --ui-block-padding-base-v: 20px;
    --ui-block-padding-lg: 24px;
    --ui-block-padding-xlg: 32px;
    --ui-block-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
    --ui-block-shadow-lg: 0 18px 44px rgba(15, 23, 42, 0.1);
    --ui-block-spacing-xs: 8px;
    --ui-block-spacing-sm: 12px;
    --ui-block-spacing-base: 20px;
    --ui-block-spacing-lg: 32px;
    --ui-block-spacing-xlg: 48px;
    --ui-gutter-base: 24px;
    --ui-height-xs: 32px;
    --ui-height-base-base: 40px;
    --ui-height-base-inner: 38px;
    --ui-height-base-inner-half: 19px;
    --ui-height-base-inner-quarter: 9.5px;
    --ui-height-xlg: 56px;
    --ui-icon-color: #6b7280;
    --ui-icon-size-base: 18px;
    --ui-icon-size-small: 14px;
    --ui-padding-xs-h: 8px;
    --ui-padding-xs-v: 4px;
    --ui-paddin-sm-v: 6px;
    --ui-padding-xlg-h: 32px;
    --ui-padding-xlg-v: 24px;
    --ui-nav-link-color: inherit;
    --ui-nav-link-active-color: var(--primary, #4f56d9);
    --ui-nav-link-active-bg: color-mix(in srgb, var(--primary, #4f56d9) 10%, transparent);
    --ui-nav-link-border-radius: 8px;
    --ui-nav-link-hover-padding-h: 12px;
    --ui-nav-v-link-hover-padding-h: 12px;
    --ui-nav-link-icon-size: 18px;
    --ui-nav-link-icon-size-sm: 14px;
    --ui-nav-link-icon-spacing: 10px;
    --ui-nav-link-icon-spacing-lg: 14px;
    --ui-nav-secondary-link-color: #6b7280;
    --ui-nav-secondary-link-hover-color: var(--primary, #4f56d9);
    --ui-nav-secondary-link-icon-color: #9ca3af;
    --ui-nav-secondary-link-icon-hover-color: var(--primary, #4f56d9);

    /* text helpers */
    --text-faded-color: #9ca3af;
    --text-secondary-body-color: #4b5563;
    --text-secondary-faded-color: #9ca3af;
    --text-secondary-heading-color: #111827;
    --text-secondary-lighter-color: #6b7280;
    --text-secondary-primary-color: var(--primary, #4f56d9);
    --text-success-color: #27b85a;
    --text-info-color: #0ea5e9;
    --text-warning-color: #f59f00;
    --text-danger-color: #e5484d;
    --gray-icons: #9ca3af;
    --gray-icons-hover: #4b5563;
    --hr-border-color: rgba(15, 23, 42, 0.1);
    --hr-border-width: 1px;
    --hr-margin-y: 16px;

    /* client-area sections */
    --ca-section-spacing: 32px;
    --ca-section-sm-spacing: 20px;
    --ca-section-header-margin-bottom: 16px;
    --ca-section-title-font-size: 20px;
    --ca-section-title-font-weight: 700;
    --ca-section-title-line-height: 1.3;
    --ca-section-sm-title-font-size: 16px;
    --ca-section-sm-title-font-weight: 700;
    --ca-section-sm-title-line-height: 1.35;
    --ca-section-desc-color: #6b7280;
    --ca-section-desc-font-size: 14px;
    --ca-section-desc-font-weight: 400;
    --ca-section-desc-line-height: 1.55;

    /* feature blocks */
    --feature-margin-bottom: 24px;
    --feature-row-margin-bottom: 0;
    --feature-icon-margin-bottom: 14px;
    --feature-lg-icon-margin-bottom: 18px;
    --feature-title-font-size: 16px;
    --feature-title-font-weight: 700;
    --feature-title-line-height: 1.35;
    --feature-lg-title-font-size: 20px;
    --feature-lg-title-font-weight: 700;
    --feature-lg-title-line-height: 1.3;
    --feature-sm-title-font-size: 14px;
    --feature-sm-title-font-weight: 700;
    --feature-sm-title-line-height: 1.4;
    --feature-desc-font-size: 14px;
    --feature-desc-font-weight: 400;
    --feature-desc-line-height: 1.6;
    --feature-lg-desc-font-size: 15px;
    --feature-lg-desc-font-weight: 400;
    --feature-lg-desc-line-height: 1.6;
    --feature-boxed-bg: #ffffff;
    --feature-boxed-border: 1px solid rgba(15, 23, 42, 0.08);
    --feature-boxed-border-radius: 16px;
    --feature-boxed-padding: 24px;
    --feature-boxed-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
    --feature-sm-boxed-padding: 16px;
    --feature-sm-svg-icon-size: 28px;

    /* article / rich text */
    --article-font-color: inherit;
    --article-font-size-base: 15px;
    --article-font-weight-base: 400;
    --article-line-height-base: 1.7;
    --article-h1-margin-top: 0; --article-h1-margin-bottom: 16px;
    --article-h2-margin-top: 28px; --article-h2-margin-bottom: 12px;
    --article-h3-margin-top: 24px; --article-h3-margin-bottom: 10px;
    --article-h4-margin-top: 20px; --article-h4-margin-bottom: 8px;
    --article-h5-margin-top: 16px; --article-h5-margin-bottom: 8px;
    --article-h6-margin-top: 16px; --article-h6-margin-bottom: 8px;
    --blockquote-bg: rgba(15, 23, 42, 0.03);
    --blockquote-border-color: var(--primary, #4f56d9);
    --blockquote-font-color: inherit;
    --blockquote-line-height: 1.6;
    --blockquote-padding: 16px 20px;
    --blockquote-small-color: #6b7280;
    --blockquote-small-font-size: 85%;
    --figure-caption-color: #6b7280;
    --figure-caption-font-size: 90%;
    --code-bg: rgba(15, 23, 42, 0.05);
    --code-color: #d6336c;
    --code-font-size: 87.5%;
    --kbd-bg: #212529;
    --kbd-color: #ffffff;
    --kbd-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
    --kbd-padding-x: 6px;
    --kbd-padding-y: 2px;
    --pre-bg: #0f172a;
    --pre-color: #e5e7eb;
    --pre-border-color: transparent;
    --pre-border-radius: 10px;
    --pre-font-size: 13px;
    --pre-line-height: 1.6;
    --pre-padding: 16px;

    /* carousel (bootstrap defaults) */
    --carousel-control-color: #ffffff;
    --carousel-control-width: 15%;
    --carousel-control-opacity: 0.5;
    --carousel-control-hover-opacity: 0.9;
    --carousel-control-icon-width: 20px;
    --carousel-control-prev-icon-bg: none;
    --carousel-control-next-icon-bg: none;
    --carousel-indicator-width: 30px;
    --carousel-indicator-height: 3px;
    --carousel-indicator-hit-area-height: 10px;
    --carousel-indicator-spacer: 3px;
    --carousel-indicator-active-bg: #ffffff;
    --carousel-caption-width: 70%;
    --carousel-caption-color: #ffffff;

    /* alerts: theme.css styles every alert with these and nothing defined them, so
       sign-in, sign-up and password-reset messages showed as bare text with no box. */
    --alert-padding-v: 14px;
    --alert-padding-h: 18px;
    --alert-padding-2x: 20px;
    --alert-border-radius: 10px;
    --alert-link-font-weight: 600;
    --alert-variants-title-color: inherit;
    --alert-primary-bg: #eef0fc;   --alert-primary-border: #d3d6f7;   --alert-primary-text: #262c9e;   --alert-primary-icon: none;
    --alert-secondary-bg: #e7f4f3; --alert-secondary-border: #bfe0dc; --alert-secondary-text: #0b5a54; --alert-secondary-icon: none;
    --alert-success-bg: #ecf8ef;   --alert-success-border: #bfe8c9;   --alert-success-text: #1e6b31;   --alert-success-icon: none;
    --alert-info-bg: #eaf1ff;      --alert-info-border: #c3d7ff;      --alert-info-text: #0a3f9e;      --alert-info-icon: none;
    --alert-warning-bg: #fff5e0;   --alert-warning-border: #ffdf9e;   --alert-warning-text: #7a4b00;   --alert-warning-icon: none;
    --alert-danger-bg: #fdecec;    --alert-danger-border: #f5c2c4;    --alert-danger-text: #9b1c24;    --alert-danger-icon: none;
    --alert-gray-bg: #f4f5f7;      --alert-gray-border: #e1e3e8;      --alert-gray-text: #3f444d;      --alert-gray-icon: none;
}

body.dark-mode {
    --ui-block-bg: #26252e;
    --ui-block-bg-form: #2a2933;
    --ui-block-border-color: rgba(255, 255, 255, 0.08);
    --ui-block-secondary-divider-border-color: rgba(255, 255, 255, 0.06);
    --ui-block-overlay-bg: rgba(28, 27, 34, 0.85);
    --ui-icon-color: #a09fac;
    --text-faded-color: #8a8996;
    --text-secondary-body-color: #c9c8d3;
    --text-secondary-faded-color: #8a8996;
    --text-secondary-heading-color: #f0eef8;
    --text-secondary-lighter-color: #a09fac;
    --gray-icons: #8a8996;
    --gray-icons-hover: #f0eef8;
    --hr-border-color: rgba(255, 255, 255, 0.1);
    --ca-section-desc-color: #a09fac;
    --feature-boxed-bg: #26252e;
    --feature-boxed-border: 1px solid rgba(255, 255, 255, 0.08);
    --blockquote-bg: rgba(255, 255, 255, 0.04);
    --blockquote-small-color: #a09fac;
    --figure-caption-color: #a09fac;
    --code-bg: rgba(255, 255, 255, 0.08);
    --alert-primary-bg: rgba(99, 106, 230, 0.14);  --alert-primary-border: rgba(99, 106, 230, 0.36);  --alert-primary-text: #c3c6f8;
    --alert-secondary-bg: rgba(30, 169, 159, 0.14); --alert-secondary-border: rgba(30, 169, 159, 0.36); --alert-secondary-text: #86ddd4;
    --alert-success-bg: rgba(54, 192, 85, 0.13);    --alert-success-border: rgba(54, 192, 85, 0.36);    --alert-success-text: #8fe3a2;
    --alert-info-bg: rgba(16, 98, 254, 0.15);       --alert-info-border: rgba(16, 98, 254, 0.4);        --alert-info-text: #a3c3ff;
    --alert-warning-bg: rgba(255, 170, 0, 0.13);    --alert-warning-border: rgba(255, 170, 0, 0.38);    --alert-warning-text: #ffcf70;
    --alert-danger-bg: rgba(226, 72, 80, 0.15);     --alert-danger-border: rgba(226, 72, 80, 0.42);     --alert-danger-text: #ffadb1;
    --alert-gray-bg: rgba(255, 255, 255, 0.05);     --alert-gray-border: rgba(255, 255, 255, 0.12);     --alert-gray-text: #c9c8d3;
}