/* =========================================================
   KCGF WEBSITE - GLOBAL STYLESHEET
   FILE: assets/css/style.css
   VERSION: 1.0

   PURPOSE:
   01. Global design tokens
   02. CSS reset and base styles
   03. Typography
   04. Layout and containers
   05. Section spacing
   06. Buttons
   07. Links
   08. Common cards
   09. Labels and badges
   10. Images and media
   11. Lists and content
   12. Forms and inputs
   13. Dividers and separators
   14. Utility classes
   15. Selection and scrollbar
   16. Dark theme
   17. Responsive global rules
   18. Accessibility

   COMPONENT OWNERSHIP:
   header.css       = Header and navigation
   footer.css       = Footer and floating toolbar
   language.css     = Language switcher
   animations.css   = Shared animations
   responsive.css   = Additional responsive components
   infographics.css = Infographics and timelines

   IMPORTANT:
   Do not duplicate component-specific styles here.
========================================================= */


/* =========================================================
   01. GLOBAL DESIGN TOKENS
========================================================= */

:root {

    /* Brand Colors */

    --kcgf-orange: #FF6B00;
    --kcgf-orange-light: #FF8A24;
    --kcgf-orange-dark: #D95700;

    --kcgf-blue: #164B78;
    --kcgf-blue-dark: #103653;
    --kcgf-blue-light: #EAF3FA;

    --kcgf-green: #075E4D;
    --kcgf-green-light: #E8F4EF;

    --kcgf-teal: #27B6B1;
    --kcgf-teal-light: #E8F8F7;

    /* Neutral Colors */

    --kcgf-white: #FFFFFF;
    --kcgf-cream: #FFF9EF;
    --kcgf-cream-dark: #F7F0E3;

    --kcgf-text: #292929;
    --kcgf-text-secondary: #555F68;
    --kcgf-muted: #78838D;

    --kcgf-border: #E7E9EC;
    --kcgf-border-light: #F0F1F3;

    --kcgf-background: #FFFFFF;
    --kcgf-surface: #FFFFFF;
    --kcgf-surface-secondary: #F7F9FB;

    /* Status Colors */

    --kcgf-success: #16845B;
    --kcgf-warning: #E6A100;
    --kcgf-danger: #D94141;
    --kcgf-info: #2476B8;

    /* Typography */

    --kcgf-font-primary: 'Inter', sans-serif;
    --kcgf-font-heading: 'Poppins', sans-serif;
    --kcgf-font-hindi: 'Noto Sans Devanagari', sans-serif;

    /* Font Sizes */

    --kcgf-text-xs: 11px;
    --kcgf-text-sm: 13px;
    --kcgf-text-base: 15px;
    --kcgf-text-md: 17px;
    --kcgf-text-lg: 20px;
    --kcgf-text-xl: 24px;

    --kcgf-heading-sm: 28px;
    --kcgf-heading-md: 36px;
    --kcgf-heading-lg: 46px;
    --kcgf-heading-xl: 58px;

    /* Font Weights */

    --kcgf-weight-regular: 400;
    --kcgf-weight-medium: 500;
    --kcgf-weight-semibold: 600;
    --kcgf-weight-bold: 700;
    --kcgf-weight-extrabold: 800;

    /* Layout */

    --kcgf-container: 1240px;
    --kcgf-container-wide: 1440px;
    --kcgf-container-narrow: 850px;

    --kcgf-section-space: 90px;
    --kcgf-section-space-sm: 60px;

    /* Border Radius */

    --kcgf-radius-xs: 5px;
    --kcgf-radius-sm: 9px;
    --kcgf-radius-md: 14px;
    --kcgf-radius-lg: 20px;
    --kcgf-radius-xl: 28px;
    --kcgf-radius-pill: 50px;
    --kcgf-radius-circle: 50%;

    /* Shadows */

    --kcgf-shadow-sm:
        0 3px 12px rgba(20, 40, 60, 0.05);

    --kcgf-shadow-md:
        0 8px 25px rgba(20, 40, 60, 0.08);

    --kcgf-shadow-lg:
        0 15px 40px rgba(20, 40, 60, 0.12);

    --kcgf-shadow-orange:
        0 8px 25px rgba(255, 107, 0, 0.18);

    /* Transitions */

    --kcgf-transition:
        0.3s cubic-bezier(0.22, 1, 0.36, 1);

    --kcgf-transition-fast: 0.2s ease;

    /* Z-index */

    --kcgf-z-base: 1;
    --kcgf-z-content: 10;
    --kcgf-z-overlay: 100;
    --kcgf-z-modal: 1000;

}


/* =========================================================
   02. GLOBAL RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    min-height: 100%;

    scroll-behavior: smooth;
    scroll-padding-top: 100px;

    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    min-height: 100vh;

    margin: 0;
    padding: 0;

    color: var(--kcgf-text);
    background: var(--kcgf-background);

    font-family: var(--kcgf-font-primary);
    font-size: var(--kcgf-text-base);
    font-weight: var(--kcgf-weight-regular);

    line-height: 1.7;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
    max-width: 100%;
}

img {
    height: auto;
    vertical-align: middle;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    padding-left: 22px;
}

p {
    margin-top: 0;
    margin-bottom: 18px;
}

figure {
    margin: 0;
}

table {
    width: 100%;
    border-collapse: collapse;
}

iframe {
    max-width: 100%;
    border: 0;
}


/* =========================================================
   03. GLOBAL TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;

    color: var(--kcgf-blue-dark);

    font-family: var(--kcgf-font-heading);
    font-weight: var(--kcgf-weight-bold);

    line-height: 1.25;
    letter-spacing: -0.5px;
}

h1 {
    font-size: var(--kcgf-heading-xl);
    font-weight: var(--kcgf-weight-extrabold);
}

h2 {
    font-size: var(--kcgf-heading-lg);
}

h3 {
    font-size: var(--kcgf-heading-md);
}

h4 {
    font-size: var(--kcgf-heading-sm);
}

h5 {
    font-size: var(--kcgf-text-lg);
}

h6 {
    font-size: var(--kcgf-text-md);
}

p {
    color: var(--kcgf-text-secondary);
    font-size: var(--kcgf-text-base);
    line-height: 1.85;
}

strong,
b {
    font-weight: var(--kcgf-weight-bold);
}

small {
    font-size: var(--kcgf-text-xs);
}


/* Hindi Typography */

html[lang="hi"] body,
html[lang="hi"] button,
html[lang="hi"] input,
html[lang="hi"] textarea,
html[lang="hi"] select {
    font-family: var(--kcgf-font-hindi);
}

html[lang="hi"] h1,
html[lang="hi"] h2,
html[lang="hi"] h3,
html[lang="hi"] h4,
html[lang="hi"] h5,
html[lang="hi"] h6 {
    font-family: var(--kcgf-font-hindi);
    letter-spacing: 0;
    line-height: 1.5;
}

html[lang="hi"] p {
    line-height: 2;
}


/* =========================================================
   04. GLOBAL CONTAINERS
========================================================= */

.kcgf-container {
    width: min(
        var(--kcgf-container),
        calc(100% - 48px)
    );

    margin-left: auto;
    margin-right: auto;
}

.kcgf-container-wide {
    width: min(
        var(--kcgf-container-wide),
        calc(100% - 48px)
    );

    margin-left: auto;
    margin-right: auto;
}

.kcgf-container-narrow {
    width: min(
        var(--kcgf-container-narrow),
        calc(100% - 48px)
    );

    margin-left: auto;
    margin-right: auto;
}


/* Page wrapper */

.kcgf-page-wrapper {
    position: relative;
    width: 100%;
    min-height: 40vh;
}


/* Main content */

#main-content {
    position: relative;
    width: 100%;
    min-height: 30vh;
}


/* =========================================================
   05. GLOBAL SECTION SPACING
========================================================= */

.kcgf-section {
    position: relative;
    width: 100%;

    padding-top: var(--kcgf-section-space);
    padding-bottom: var(--kcgf-section-space);
}

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

.kcgf-section-cream {
    background: var(--kcgf-cream);
}

.kcgf-section-light {
    background: var(--kcgf-surface-secondary);
}

.kcgf-section-blue {
    background: var(--kcgf-blue-dark);
    color: var(--kcgf-white);
}

.kcgf-section-green {
    background: var(--kcgf-green);
    color: var(--kcgf-white);
}


/* =========================================================
   06. SECTION HEADINGS
========================================================= */

.kcgf-section-heading {
    max-width: 760px;

    margin: 0 auto 48px;

    text-align: center;
}

.kcgf-section-heading.left {
    margin-left: 0;
    text-align: left;
}

.kcgf-section-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-bottom: 15px;

    color: var(--kcgf-orange-dark);

    font-size: var(--kcgf-text-xs);
    font-weight: var(--kcgf-weight-bold);

    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.kcgf-section-title {
    margin-bottom: 17px;

    color: var(--kcgf-blue-dark);

    font-size: clamp(28px, 4vw, 42px);
    font-weight: var(--kcgf-weight-extrabold);

    line-height: 1.3;
}

.kcgf-section-description {
    max-width: 680px;

    margin: 0 auto;

    color: var(--kcgf-muted);

    font-size: var(--kcgf-text-base);
    line-height: 1.9;
}


/* =========================================================
   07. COMMON LINKS
========================================================= */

.kcgf-link {
    color: var(--kcgf-blue);

    font-weight: var(--kcgf-weight-semibold);

    transition: color var(--kcgf-transition-fast);
}

.kcgf-link:hover {
    color: var(--kcgf-orange-dark);
}

.kcgf-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--kcgf-orange-dark);

    font-size: var(--kcgf-text-sm);
    font-weight: var(--kcgf-weight-bold);

    transition: gap var(--kcgf-transition);
}

.kcgf-text-link:hover {
    gap: 13px;
}


/* =========================================================
   08. COMMON BUTTON SYSTEM
========================================================= */

.kcgf-btn {
    min-height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 11px 23px;

    border: 1px solid transparent;
    border-radius: var(--kcgf-radius-pill);

    font-family: var(--kcgf-font-heading);
    font-size: var(--kcgf-text-sm);
    font-weight: var(--kcgf-weight-semibold);

    line-height: 1.3;
    text-align: center;

    cursor: pointer;

    transition:
        color var(--kcgf-transition),
        background var(--kcgf-transition),
        border-color var(--kcgf-transition),
        box-shadow var(--kcgf-transition),
        transform var(--kcgf-transition);
}

.kcgf-btn:hover {
    transform: translateY(-3px);
}

.kcgf-btn:active {
    transform: translateY(-1px);
}

.kcgf-btn-primary {
    color: var(--kcgf-white);
    background: var(--kcgf-orange);

    box-shadow: var(--kcgf-shadow-orange);
}

.kcgf-btn-primary:hover {
    color: var(--kcgf-white);
    background: var(--kcgf-orange-dark);
}

.kcgf-btn-secondary {
    color: var(--kcgf-white);
    background: var(--kcgf-blue);
}

.kcgf-btn-secondary:hover {
    color: var(--kcgf-white);
    background: var(--kcgf-blue-dark);
}

.kcgf-btn-outline {
    color: var(--kcgf-orange-dark);
    background: transparent;

    border-color: var(--kcgf-orange);
}

.kcgf-btn-outline:hover {
    color: var(--kcgf-white);
    background: var(--kcgf-orange);
}

.kcgf-btn-outline-blue {
    color: var(--kcgf-blue);
    background: transparent;

    border-color: var(--kcgf-blue);
}

.kcgf-btn-outline-blue:hover {
    color: var(--kcgf-white);
    background: var(--kcgf-blue);
}

.kcgf-btn-light {
    color: var(--kcgf-blue-dark);
    background: var(--kcgf-white);
}

.kcgf-btn-light:hover {
    color: var(--kcgf-orange-dark);
    background: var(--kcgf-cream);
}

.kcgf-btn-sm {
    min-height: 36px;
    padding: 8px 16px;
    font-size: var(--kcgf-text-xs);
}

.kcgf-btn-lg {
    min-height: 54px;
    padding: 14px 30px;
    font-size: var(--kcgf-text-base);
}

.kcgf-btn-block {
    width: 100%;
}


/* =========================================================
   09. COMMON CARD SYSTEM
========================================================= */

.kcgf-card {
    position: relative;

    min-width: 0;

    padding: 26px;

    background: var(--kcgf-surface);

    border: 1px solid var(--kcgf-border-light);
    border-radius: var(--kcgf-radius-lg);

    box-shadow: var(--kcgf-shadow-sm);

    transition:
        transform var(--kcgf-transition),
        box-shadow var(--kcgf-transition),
        border-color var(--kcgf-transition);
}

.kcgf-card:hover {
    transform: translateY(-5px);

    border-color: rgba(255, 107, 0, 0.20);

    box-shadow: var(--kcgf-shadow-md);
}

.kcgf-card-flat {
    box-shadow: none;
}

.kcgf-card-flat:hover {
    box-shadow: var(--kcgf-shadow-sm);
}

.kcgf-card-cream {
    background: var(--kcgf-cream);
    border-color: transparent;
}

.kcgf-card-blue {
    color: var(--kcgf-white);
    background: var(--kcgf-blue-dark);
    border-color: transparent;
}

.kcgf-card-green {
    color: var(--kcgf-white);
    background: var(--kcgf-green);
    border-color: transparent;
}


/* Common card content */

.kcgf-card-title {
    margin-bottom: 12px;

    color: var(--kcgf-blue-dark);

    font-size: var(--kcgf-text-lg);
    font-weight: var(--kcgf-weight-bold);
}

.kcgf-card-description {
    margin-bottom: 16px;

    color: var(--kcgf-muted);

    font-size: var(--kcgf-text-sm);
    line-height: 1.8;
}


/* =========================================================
   10. COMMON BADGES AND LABELS
========================================================= */

.kcgf-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 6px 12px;

    color: var(--kcgf-orange-dark);
    background: rgba(255, 107, 0, 0.10);

    border-radius: var(--kcgf-radius-pill);

    font-size: var(--kcgf-text-xs);
    font-weight: var(--kcgf-weight-bold);
}

.kcgf-badge-blue {
    color: var(--kcgf-blue);
    background: var(--kcgf-blue-light);
}

.kcgf-badge-green {
    color: var(--kcgf-green);
    background: var(--kcgf-green-light);
}

.kcgf-badge-teal {
    color: #087B77;
    background: var(--kcgf-teal-light);
}

.kcgf-badge-success {
    color: var(--kcgf-success);
    background: #E8F6EF;
}

.kcgf-badge-warning {
    color: #966800;
    background: #FFF5D9;
}


/* =========================================================
   11. COMMON IMAGE STYLES
========================================================= */

.kcgf-image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: cover;
}

.kcgf-image-rounded {
    overflow: hidden;
    border-radius: var(--kcgf-radius-lg);
}

.kcgf-image-circle {
    width: 100%;
    aspect-ratio: 1 / 1;

    object-fit: cover;

    border-radius: var(--kcgf-radius-circle);
}

.kcgf-image-cover {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   12. CONTENT TYPOGRAPHY
========================================================= */

.kcgf-content {
    width: 100%;

    color: var(--kcgf-text-secondary);

    font-size: var(--kcgf-text-base);
    line-height: 1.95;
}

.kcgf-content h2 {
    margin-top: 40px;
    margin-bottom: 18px;

    font-size: 30px;
}

.kcgf-content h3 {
    margin-top: 30px;
    margin-bottom: 14px;

    font-size: 23px;
}

.kcgf-content h4 {
    margin-top: 24px;
    margin-bottom: 12px;
}

.kcgf-content p {
    margin-bottom: 19px;
}

.kcgf-content ul,
.kcgf-content ol {
    margin-top: 10px;
    margin-bottom: 22px;

    padding-left: 24px;
}

.kcgf-content li {
    margin-bottom: 9px;
    padding-left: 4px;
}

.kcgf-content li::marker {
    color: var(--kcgf-orange);
}

.kcgf-content blockquote {
    margin: 28px 0;

    padding: 20px 25px;

    color: var(--kcgf-blue-dark);
    background: var(--kcgf-cream);

    border-left: 4px solid var(--kcgf-orange);
    border-radius: 0 var(--kcgf-radius-md) var(--kcgf-radius-md) 0;

    font-size: var(--kcgf-text-md);
    font-weight: var(--kcgf-weight-medium);
    line-height: 1.8;
}

.kcgf-content img {
    max-width: 100%;
    height: auto;

    border-radius: var(--kcgf-radius-md);
}

.kcgf-content a {
    color: var(--kcgf-blue);
    font-weight: var(--kcgf-weight-semibold);
    text-decoration: underline;
    text-decoration-color: rgba(22, 75, 120, 0.35);
    text-underline-offset: 3px;
}

.kcgf-content a:hover {
    color: var(--kcgf-orange-dark);
}


/* =========================================================
   13. GLOBAL FORM ELEMENTS
========================================================= */

.kcgf-form-group {
    display: flex;
    flex-direction: column;

    gap: 8px;

    margin-bottom: 20px;
}

.kcgf-form-label {
    color: var(--kcgf-blue-dark);

    font-size: var(--kcgf-text-sm);
    font-weight: var(--kcgf-weight-semibold);
}

.kcgf-form-control {
    width: 100%;
    min-height: 48px;

    padding: 12px 15px;

    color: var(--kcgf-text);
    background: var(--kcgf-white);

    border: 1px solid var(--kcgf-border);
    border-radius: var(--kcgf-radius-sm);

    outline: none;

    font-family: inherit;
    font-size: var(--kcgf-text-sm);

    transition:
        border-color var(--kcgf-transition-fast),
        box-shadow var(--kcgf-transition-fast);
}

.kcgf-form-control::placeholder {
    color: #A0A8AF;
}

.kcgf-form-control:focus {
    border-color: var(--kcgf-orange);

    box-shadow:
        0 0 0 3px rgba(255, 107, 0, 0.10);
}

textarea.kcgf-form-control {
    min-height: 130px;
    resize: vertical;
}

select.kcgf-form-control {
    cursor: pointer;
}

.kcgf-form-help {
    color: var(--kcgf-muted);
    font-size: var(--kcgf-text-xs);
}

.kcgf-form-error {
    color: var(--kcgf-danger);
    font-size: var(--kcgf-text-xs);
}

.kcgf-form-success {
    color: var(--kcgf-success);
    font-size: var(--kcgf-text-xs);
}


/* =========================================================
   14. ALERT MESSAGES
========================================================= */

.kcgf-alert {
    position: relative;

    padding: 15px 18px;

    border: 1px solid transparent;
    border-radius: var(--kcgf-radius-md);

    font-size: var(--kcgf-text-sm);
    line-height: 1.7;
}

.kcgf-alert-success {
    color: #12623F;
    background: #EAF7EF;
    border-color: #CDEBD9;
}

.kcgf-alert-danger {
    color: #9B2929;
    background: #FFF0F0;
    border-color: #F5D1D1;
}

.kcgf-alert-warning {
    color: #805A00;
    background: #FFF8E5;
    border-color: #F2E4B7;
}

.kcgf-alert-info {
    color: #155B8C;
    background: #EDF6FD;
    border-color: #D0E7F7;
}


/* =========================================================
   15. GLOBAL DIVIDERS
========================================================= */

.kcgf-divider {
    width: 100%;
    height: 1px;

    margin: 25px 0;

    background: var(--kcgf-border);
    border: 0;
}

.kcgf-divider-orange {
    background: linear-gradient(
        90deg,
        var(--kcgf-orange),
        transparent
    );
}


/* =========================================================
   16. COMMON GRID LAYOUTS
========================================================= */

.kcgf-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 25px;
}

.kcgf-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kcgf-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kcgf-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kcgf-flex {
    display: flex;
}

.kcgf-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.kcgf-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kcgf-flex-wrap {
    flex-wrap: wrap;
}


/* =========================================================
   17. UTILITY CLASSES
========================================================= */

/* Text alignment */

.kcgf-text-left {
    text-align: left;
}

.kcgf-text-center {
    text-align: center;
}

.kcgf-text-right {
    text-align: right;
}

/* Text colors */

.kcgf-color-orange {
    color: var(--kcgf-orange-dark);
}

.kcgf-color-blue {
    color: var(--kcgf-blue);
}

.kcgf-color-green {
    color: var(--kcgf-green);
}

.kcgf-color-muted {
    color: var(--kcgf-muted);
}

.kcgf-color-white {
    color: var(--kcgf-white);
}

/* Backgrounds */

.kcgf-bg-white {
    background: var(--kcgf-white);
}

.kcgf-bg-cream {
    background: var(--kcgf-cream);
}

.kcgf-bg-blue {
    background: var(--kcgf-blue-dark);
}

.kcgf-bg-green {
    background: var(--kcgf-green);
}

/* Display */

.kcgf-hidden {
    display: none !important;
}

.kcgf-block {
    display: block;
}

.kcgf-inline-block {
    display: inline-block;
}

/* Width */

.kcgf-w-full {
    width: 100%;
}

.kcgf-max-w-full {
    max-width: 100%;
}

/* Spacing */

.kcgf-mt-10 {
    margin-top: 10px;
}

.kcgf-mt-20 {
    margin-top: 20px;
}

.kcgf-mt-30 {
    margin-top: 30px;
}

.kcgf-mb-10 {
    margin-bottom: 10px;
}

.kcgf-mb-20 {
    margin-bottom: 20px;
}

.kcgf-mb-30 {
    margin-bottom: 30px;
}

/* Border radius */

.kcgf-rounded {
    border-radius: var(--kcgf-radius-md);
}

.kcgf-rounded-lg {
    border-radius: var(--kcgf-radius-lg);
}

.kcgf-rounded-pill {
    border-radius: var(--kcgf-radius-pill);
}

/* Shadow */

.kcgf-shadow-sm {
    box-shadow: var(--kcgf-shadow-sm);
}

.kcgf-shadow-md {
    box-shadow: var(--kcgf-shadow-md);
}

.kcgf-shadow-lg {
    box-shadow: var(--kcgf-shadow-lg);
}


/* =========================================================
   18. SCROLLBAR
========================================================= */

html {
    scrollbar-width: thin;
    scrollbar-color: var(--kcgf-orange-light) #F1F2F3;
}

html::-webkit-scrollbar {
    width: 9px;
}

html::-webkit-scrollbar-track {
    background: #F1F2F3;
}

html::-webkit-scrollbar-thumb {
    background: var(--kcgf-orange-light);
    border: 2px solid #F1F2F3;
    border-radius: 20px;
}

html::-webkit-scrollbar-thumb:hover {
    background: var(--kcgf-orange-dark);
}


/* =========================================================
   19. TEXT SELECTION
========================================================= */

::selection {
    color: var(--kcgf-white);
    background: var(--kcgf-orange);
}

::-moz-selection {
    color: var(--kcgf-white);
    background: var(--kcgf-orange);
}


/* =========================================================
   20. DARK THEME
========================================================= */

html[data-theme="dark"] {

    --kcgf-text: #E9EDF1;
    --kcgf-text-secondary: #C1CBD3;
    --kcgf-muted: #9EABB5;

    --kcgf-border: #354653;
    --kcgf-border-light: #2B3C49;

    --kcgf-background: #14212B;
    --kcgf-surface: #1C2C38;
    --kcgf-surface-secondary: #192934;

    --kcgf-cream: #26352F;
    --kcgf-cream-dark: #304139;

    --kcgf-blue-light: #263F54;
    --kcgf-green-light: #1F4138;
    --kcgf-teal-light: #1F4241;

}

html[data-theme="dark"] body {
    color: var(--kcgf-text);
    background: var(--kcgf-background);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
    color: #EAF1F7;
}

html[data-theme="dark"] p,
html[data-theme="dark"] .kcgf-content {
    color: var(--kcgf-text-secondary);
}

html[data-theme="dark"] .kcgf-card {
    background: var(--kcgf-surface);
    border-color: var(--kcgf-border);
}

html[data-theme="dark"] .kcgf-card-title {
    color: #F1F5F8;
}

html[data-theme="dark"] .kcgf-card-description {
    color: var(--kcgf-muted);
}

html[data-theme="dark"] .kcgf-content blockquote {
    color: #F1F5F8;
    background: var(--kcgf-surface);
}

html[data-theme="dark"] .kcgf-form-label {
    color: #EAF1F7;
}

html[data-theme="dark"] .kcgf-form-control {
    color: #EAF1F7;
    background: #1A2A36;
    border-color: #40515E;
}

html[data-theme="dark"] .kcgf-form-control::placeholder {
    color: #82919C;
}

html[data-theme="dark"] .kcgf-divider {
    background: var(--kcgf-border);
}


/* =========================================================
   21. RESPONSIVE GLOBAL RULES
========================================================= */

@media (max-width: 1024px) {

    :root {
        --kcgf-heading-xl: 48px;
        --kcgf-heading-lg: 40px;
        --kcgf-section-space: 75px;
    }

    .kcgf-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 767px) {

    :root {
        --kcgf-heading-xl: 36px;
        --kcgf-heading-lg: 31px;
        --kcgf-heading-md: 27px;

        --kcgf-section-space: 58px;
        --kcgf-section-space-sm: 40px;
    }

    .kcgf-container,
    .kcgf-container-wide,
    .kcgf-container-narrow {
        width: calc(100% - 32px);
    }

    .kcgf-grid,
    .kcgf-grid-2,
    .kcgf-grid-3,
    .kcgf-grid-4 {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .kcgf-section-heading {
        margin-bottom: 32px;
    }

    .kcgf-card {
        padding: 21px;
    }

    .kcgf-btn {
        min-height: 43px;
        padding: 10px 19px;
    }

    .kcgf-content h2 {
        font-size: 25px;
    }

    .kcgf-content h3 {
        font-size: 21px;
    }

}


@media (max-width: 420px) {

    :root {
        --kcgf-heading-xl: 31px;
        --kcgf-heading-lg: 27px;
        --kcgf-heading-md: 23px;
    }

    .kcgf-container,
    .kcgf-container-wide,
    .kcgf-container-narrow {
        width: calc(100% - 26px);
    }

}


/* =========================================================
   22. ACCESSIBILITY
========================================================= */

:focus-visible {
    outline: 3px solid var(--kcgf-teal);
    outline-offset: 3px;
}

[hidden] {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}


/* =========================================================
   END OF GLOBAL STYLESHEET
========================================================= */