/* =====================================================================
   SAMARTH SECURITY SYSTEMS — DESIGN SYSTEM
   Single source of truth for all design tokens.
   Extracted from production site: https://samarthsec.com/
   File: assets/css/design-system.css
   Load order: FIRST (before main.css, before bootstrap overrides)

   CONTENTS
   1.  Color Tokens
   2.  Typography Tokens
   3.  Spacing & Layout Tokens
   4.  Transition & Shadow Tokens
   5.  Typography Scale (h1–h6, p)
   6.  Layout Utilities (.container, .section-pad)
   7.  Gradient Text Utility
   8.  Button System
   9.  Card System
   10. Section System
   11. Responsive Breakpoints
   ===================================================================== */


/* =====================================================================
   1. COLOR TOKENS
   Extracted from samarthsec.com computed styles
   ===================================================================== */
:root {

    /* ── Brand Purple (primary) ── */
    --color-purple:        #491084;   /* primary-color — headings, links, borders */
    --color-purple-dk:     #3a0d8c;   /* buttons dark state */
    --color-purple-xdk:    #2d0f6b;   /* product card titles */
    --color-purple-mid:    #510f91;   /* gradient start */
    --color-purple-lt:     #7c43bd;   /* accent lines */
    --color-purple-xlt:    #b35cfe;   /* secondary accent */
    --color-purple-pale:   #f0eaff;   /* section backgrounds, admin notes */
    --color-purple-lavender: #ede8f8; /* product card bg */

    /* ── Brand Blue (secondary) ── */
    --color-blue:          #0a46a1;   /* gradient end */
    --color-blue-nav:      #1b3fa6;   /* nav/hero gradient end */

    /* ── Gradient (horizontal, left→right) ── */
    --grad-brand:          linear-gradient(90deg, #510F91 0%, #0A46A1 100%);
    --grad-hero:           linear-gradient(90deg, #7a1cff 0%, #1b3fa6 100%);
    --grad-button:         linear-gradient(90deg, #510F91 0%, #0A46A1 100%);
    --grad-purple-diag:    linear-gradient(135deg, #510f91 0%, #0a46a1 100%);

    /* ── Neutrals ── */
    --color-white:         #ffffff;
    --color-black:         #171616;   /* body text */
    --color-dark:          #2c2c2c;
    --color-grey-text:     #555555;
    --color-grey-light:    #cccccc;
    --color-grey-border:   #eeeeee;
    --color-bg:            #ffffff;
    --color-bg-light:      #fdfbff;
    --color-bg-section:    #f7f5fb;

    /* ── Navbar / Footer purple ── */
    --color-nav-bg:        #8a00ff;   /* exact nav background */
    --color-footer-bg:     #491084;   /* footer background = primary */
    --color-footer-text:   #e0e0e0;
    --color-footer-heading:#d4a1ff;   /* footer column headings */
}


/* =====================================================================
   2. TYPOGRAPHY TOKENS
   Fonts: Outfit (headings), Inter (body) — matches production Google Fonts
   ===================================================================== */
:root {

    --font-heading:  Inter, sans-serif;
    --font-body:     'Inter', sans-serif;

    /* Heading sizes — clamp: min | preferred | max */
    --fs-h1:   clamp(40px, 6vw, 60px);     /* hero title */
    --fs-h2:   clamp(32px, 5vw, 52px);     /* section titles */
    --fs-h3:   clamp(22px, 3vw, 36px);     /* sub-headings */
    --fs-h4:   clamp(18px, 2.5vw, 26px);
    --fs-h5:   clamp(16px, 2vw, 20px);
    --fs-h6:   clamp(14px, 1.8vw, 18px);

    /* Body sizes */
    --fs-body-lg:  18px;
    --fs-body:     16px;
    --fs-body-sm:  15px;
    --fs-body-xs:  14px;
    --fs-label:    13px;

    /* Line heights */
    --lh-heading:  1.15;
    --lh-body:     1.75;
    --lh-tight:    1.4;

    /* Font weights */
    --fw-light:    300;
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* Letter spacing */
    --ls-heading:  1px;
    --ls-label:    2.5px;
    --ls-wide:     3px;
}


/* =====================================================================
   3. SPACING & LAYOUT TOKENS
   ===================================================================== */
:root {

    /* Container */
    --container-max:    1200px;
    --container-wide:   1400px;
    --container-narrow: 860px;
    --container-pad:    5%;       /* horizontal padding inside containers */

    /* Section vertical padding */
    --section-pad-y:    80px;
    --section-pad-y-md: 56px;     /* tablet */
    --section-pad-y-sm: 40px;     /* mobile */

    /* Component spacing */
    --gap-xs:     8px;
    --gap-sm:     16px;
    --gap-md:     24px;
    --gap-lg:     40px;
    --gap-xl:     64px;

    /* Border radius */
    --radius-sm:  6px;
    --radius-md:  12px;
    --radius-lg:  16px;
    --radius-xl:  24px;
    --radius-pill: 50px;
}


/* =====================================================================
   4. TRANSITION & SHADOW TOKENS
   ===================================================================== */
:root {

    --transition:         all 0.3s ease;
    --transition-fast:    all 0.2s ease;
    --transition-slow:    all 0.5s ease;

    --shadow-sm:   0 4px 12px rgba(73, 16, 132, 0.10);
    --shadow-md:   0 8px 24px rgba(73, 16, 132, 0.14);
    --shadow-lg:   0 16px 48px rgba(73, 16, 132, 0.18);
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.08);
}


/* =====================================================================
   5. TYPOGRAPHY SCALE
   Global heading and body rules — matches production exactly
   ===================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-light);
    font-style: normal;
    line-height: var(--lh-heading);
    text-transform: uppercase;
    letter-spacing: var(--ls-heading);
    color: var(--color-black);
    margin: 0;
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

p {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-grey-text);
    margin: 0 0 1rem;
}
p:last-child { margin-bottom: 0; }

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}


/* =====================================================================
   6. LAYOUT UTILITIES
   ===================================================================== */

/* Wrapper: centers content, applies horizontal padding */
.ss-container {
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
    width: 100%;
}

.ss-container--wide {
    max-width: var(--container-wide);
}

.ss-container--narrow {
    max-width: var(--container-narrow);
}

/* Section: adds standard vertical padding */
.ss-section {
    padding-top: var(--section-pad-y);
    padding-bottom: var(--section-pad-y);
}

.ss-section--sm {
    padding-top: var(--section-pad-y-sm);
    padding-bottom: var(--section-pad-y-sm);
}

/* Two-column flex layout (production default) */
.ss-row {
    display: flex;
    align-items: center;
    gap: var(--gap-xl);
}

.ss-row--reverse { flex-direction: row-reverse; }

.ss-col { flex: 1; min-width: 0; }
.ss-col--40 { flex: 0 0 40%; max-width: 40%; }
.ss-col--44 { flex: 0 0 44%; max-width: 44%; }
.ss-col--50 { flex: 0 0 50%; max-width: 50%; }


/* =====================================================================
   7. GRADIENT TEXT UTILITY  (exact match to production)
   ===================================================================== */
.gradient-text {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}


/* =====================================================================
   8. BUTTON SYSTEM
   ===================================================================== */

/* ── Base shared button traits ── */
.btn-dark-pill,
.btn-outline,
.btn-nav,
.ps-card-btn,
.download-btn,
.ph-explore-btn,
.pc-download-btn,
.btn-custom {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: var(--fs-body-xs);
    font-weight: var(--fw-semibold);
    line-height: 1;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-pill);
    transition: background var(--transition-fast), transform 0.2s ease, box-shadow 0.25s ease;
}

/* ── Samarth CTA gradient button (NOT Bootstrap .btn-primary) ── */
.btn-samarth-primary {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-body-sm);
    line-height: 1;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-pill);
    background: var(--grad-button);
    color: var(--color-white) !important;
    padding: 14px 40px;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.btn-samarth-primary:hover {
    opacity: 0.92;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--color-white) !important;
}

/* ── Dark purple pill (product pages, download buttons) ── */
.btn-dark-pill,
.ps-card-btn,
.download-btn,
.ph-explore-btn,
.pc-download-btn {
    background: var(--color-purple-dk) !important;
    color: var(--color-white) !important;
    padding: 11px 32px !important;
}
.btn-dark-pill:hover,
.ps-card-btn:hover,
.download-btn:hover,
.ph-explore-btn:hover,
.pc-download-btn:hover {
    background: #b35cfe !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(73, 16, 132, 0.35) !important;
}

/* ── White pill (hero buttons on dark backgrounds) ── */
.btn-pill-white {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
    font-size: var(--fs-body);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--color-white);
    color: var(--color-purple) !important;
    padding: 14px 44px;
    transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.btn-pill-white:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.20);
    color: var(--color-purple) !important;
}

/* ── Outline ── */
.btn-outline {
    background: transparent;
    color: var(--color-purple);
    border: 2px solid var(--color-purple);
    padding: 12px 32px;
}
.btn-outline:hover {
    background: var(--color-purple);
    color: var(--color-white);
    transform: translateY(-2px);
}

/* ── Get in Touch (nav button) ── */
.btn-nav {
    background: transparent;
    color: var(--color-white) !important;
    border: 2px solid var(--color-white);
    padding: 10px 24px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-label);
    letter-spacing: 0.5px;
    transition: var(--transition);
}
.btn-nav:hover {
    background: var(--color-white);
    color: var(--color-purple) !important;
}


/* =====================================================================
   9. CARD SYSTEM
   ===================================================================== */

/* ── Generic card ── */
.ss-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: 30px;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition), box-shadow var(--transition);
}
.ss-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}


/* ── Product card (lavender background — production exact) ── */
.ps-card {
    background: var(--color-purple-lavender);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .3s ease, box-shadow .3s ease;
    border: none;
}
.ps-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(73,16,132,.15);
}

/* ── Info card (contact/about icons) ── */
.info-card {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-md);
    padding: var(--gap-md) 0;
}

/* ── Content row placeholder ── */
.content-row-placeholder {
    width: 100%;
    min-height: 280px;
    background: linear-gradient(135deg, var(--color-purple-lavender) 0%, #c9a8f5 60%, #a8c4f5 100%);
    border-radius: var(--radius-sm);
    opacity: 0.45;
}


/* =====================================================================
   10. SECTION SYSTEM
   Standard reusable section patterns
   ===================================================================== */

/* ── Centered section header ── */
.section-header-centered {
    text-align: center;
    max-width: var(--container-narrow);
    margin: 0 auto var(--gap-xl);
    padding: 0 var(--container-pad);
}

/* ── Section label (small uppercase, above title) ── */
.ss-section-label {
    display: block;
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: #999;
    margin-bottom: var(--gap-sm);
}

/* ── Stats band ── */
#stats-section {
    background-color: var(--color-purple);
    color: var(--color-white);
    padding: var(--section-pad-y) 0;
}

/* ── Footer ── */
#site-footer {
    background: var(--color-footer-bg);
    padding: var(--section-pad-y) 0 var(--gap-lg);
    color: var(--color-footer-text);
}

.footer-heading {
    color: var(--color-footer-heading);
    font-size: var(--fs-body-lg);
    margin-bottom: var(--gap-md);
    font-weight: var(--fw-semibold);
    text-transform: none;
    letter-spacing: 0;
}

/* ── Navbar ── */
#mainNav,
.navbar {
    background-color: var(--color-nav-bg);
}

.mobile-menu-wrapper,
.mobile-header {
    background-color: var(--color-nav-bg);
}

.mobile-menu {
    background: #7f1dff;
}

/* ── Hero section ── */
#hero-section {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 140px 0 80px;
}


/* Desktop (1025px and up) */
@media (min-width: 1025px) {
    :root {
        --section-pad-y: var(--section-pad-y-md);
    }
    .ss-row { gap: var(--gap-lg); }
}

/* Tablet (481px – 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    :root {
        --section-pad-y: var(--section-pad-y-md);
    }
    .ss-row,
    .ss-row--reverse {
        flex-direction: column !important;
        gap: var(--gap-md);
    }
    .ss-col--40,
    .ss-col--44,
    .ss-col--50 {
        flex: none;
        max-width: 100%;
        width: 100%;
    }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {
    :root {
        --section-pad-y: var(--section-pad-y-sm);
        --fs-h1:  clamp(28px, 7vw, 42px);
        --fs-h2:  clamp(24px, 6vw, 36px);
        --fs-h3:  clamp(20px, 5vw, 28px);
    }

    .ss-row,
    .ss-row--reverse {
        flex-direction: column !important;
        gap: var(--gap-md);
    }

    .ss-col--40,
    .ss-col--44,
    .ss-col--50 {
        flex: none;
        max-width: 100%;
        width: 100%;
    }
}

/* Small mobile (≤ 480px) */
@media (max-width: 480px) {
    :root {
        --fs-h1:  clamp(24px, 8vw, 32px);
        --fs-h2:  clamp(22px, 7vw, 28px);
        --container-pad: 1rem;
    }

    .btn-samarth-primary  { padding: 12px 28px; font-size: var(--fs-body-xs); }
    .btn-pill-white { padding: 12px 32px; font-size: var(--fs-body-sm); }
}