/* ==========================================================================
   KitPOS design system — tokens + core components
   --------------------------------------------------------------------------
   One source of truth for the marketing site AND the superadmin, so the whole
   product reads as one brand. Everything is driven by the two brand anchors:

     jade  #34B98B   (energy, action, growth)
     navy  #122D46   (authority, trust, depth)

   Typography: "Plus Jakarta Sans" for headings + "Inter" for body/UI.
   Why this pairing: Plus Jakarta Sans is a geometric-humanist sans with a
   large x-height and slightly rounded joins — the same character that makes
   Avenir Next feel confident without being cold — and it's freely licensed
   (OFL, served from Google Fonts). Inter is the body/UI face because it is
   engineered for small sizes and dense data tables, which this same system
   must drive inside the superadmin.

   Accessibility notes (contrast, WCAG AA):
     - Raw jade (#34B98B) on white is ~2.5:1 → NEVER use it for text on white.
       Use --color-link (jade-700) for text links, or put jade on navy.
     - jade-500 on navy-900 ≈ 5.7:1 → passes for normal text (hero accents).
     - Primary buttons: jade-500 background + navy-950 text ≈ 8:1.
     - Body text: gray-700 on white ≈ 9:1. Headings: navy-900 ≈ 13:1.
   ========================================================================== */

:root {
    /* ------------------------------------------------------------- brand */
    --jade-50:  #ecfaf4;
    --jade-100: #d2f4e6;
    --jade-200: #a8e8cf;
    --jade-300: #74d8b3;
    --jade-400: #4dc99e;
    --jade-500: #34b98b;   /* brand anchor */
    --jade-600: #279973;
    --jade-700: #1f7d5f;
    --jade-800: #1b634c;
    --jade-900: #144a39;

    --navy-50:  #eef3f8;
    --navy-100: #d8e3ee;
    --navy-200: #b3c7da;
    --navy-300: #86a3bf;
    --navy-400: #5b7fa0;
    --navy-500: #3d6183;
    --navy-600: #2c4a67;
    --navy-700: #203a54;
    --navy-800: #18324b;
    --navy-900: #122d46;   /* brand anchor */
    --navy-950: #0b1d2e;

    /* ---------------------------------------------------------- neutrals */
    --gray-25:  #fbfcfd;
    --gray-50:  #f5f7f9;
    --gray-100: #eceff2;
    --gray-200: #dde2e7;
    --gray-300: #c3cbd3;
    --gray-400: #98a3ae;
    --gray-500: #6c7883;
    --gray-600: #525d68;
    --gray-700: #3d454d;
    --gray-800: #272e35;
    --gray-900: #171c21;

    /* ------------------------------------------------- bright accents */
    /* Warm, energetic highlights used sparingly (add-ons, promos, beta
       tags) so they pop against jade/navy without replacing them. */
    --amber-50:  #fff7e8;
    --amber-100: #ffedc7;
    --amber-400: #ffb020;
    --amber-500: #f59e0b;
    --amber-600: #d97706;
    --coral-50:  #fff0ed;
    --coral-500: #ff6b52;

    /* ---------------------------------------------------------- semantic */
    --color-success:      var(--jade-600);
    --color-success-bg:   var(--jade-50);
    --color-warning:      #b45309;
    --color-warning-bg:   #fef3e2;
    --color-error:        #c2352b;
    --color-error-bg:     #fdeeed;
    --color-info:         var(--navy-500);
    --color-info-bg:      var(--navy-50);

    /* ------------------------------------------------------------- roles */
    --color-text:         var(--gray-700);
    --color-text-strong:  var(--navy-900);
    --color-text-muted:   var(--gray-500);
    --color-text-inverse: #ffffff;
    --color-link:         var(--jade-700);
    --color-border:       var(--gray-200);
    --color-surface:      #ffffff;
    --color-surface-alt:  var(--gray-50);
    --color-surface-navy: var(--navy-900);

    /* -------------------------------------------------------- typography */
    --font-heading: "Plus Jakarta Sans", "Avenir Next", -apple-system, "Segoe UI", sans-serif;
    --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --text-xs:   0.75rem;    /* 12 */
    --text-sm:   0.875rem;   /* 14 */
    --text-base: 1rem;       /* 16 */
    --text-lg:   1.125rem;   /* 18 */
    --text-xl:   1.25rem;    /* 20 */
    --text-2xl:  1.5rem;     /* 24 */
    --text-3xl:  1.875rem;   /* 30 */
    --text-4xl:  2.375rem;   /* 38 */
    --text-5xl:  3rem;       /* 48 */
    --text-6xl:  3.75rem;    /* 60 */

    --leading-tight:  1.15;
    --leading-snug:   1.3;
    --leading-normal: 1.55;
    --leading-loose:  1.7;

    /* ----------------------------------------------------------- spacing */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* ------------------------------------------------------------- radii */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 999px;

    /* ----------------------------------------------------------- shadows */
    --shadow-sm: 0 1px 2px rgba(18, 45, 70, 0.06);
    --shadow-md: 0 4px 14px rgba(18, 45, 70, 0.08);
    --shadow-lg: 0 12px 32px rgba(18, 45, 70, 0.12);
    --shadow-cta: 0 6px 18px rgba(52, 185, 139, 0.35);

    /* ------------------------------------------------------------ layout */
    --container: 1180px;
    --header-h: 72px;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

.kp {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background: var(--color-surface);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.kp h1, .kp h2, .kp h3, .kp h4, .kp h5 {
    font-family: var(--font-heading);
    color: var(--color-text-strong);
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-4);
    font-weight: 700;
    letter-spacing: -0.015em;
}

.kp h1 { font-size: var(--text-5xl); font-weight: 800; }
.kp h2 { font-size: var(--text-4xl); }
.kp h3 { font-size: var(--text-2xl); }
.kp h4 { font-size: var(--text-xl); }

.kp p { margin: 0 0 var(--space-4); }

.kp a { color: var(--color-link); text-decoration: none; }
.kp a:hover { text-decoration: underline; }

.kp img { max-width: 100%; display: block; }

.kp ul { margin: 0; padding: 0; list-style: none; }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.kp-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.kp-section { padding: var(--space-24) 0; }
.kp-section--alt { background: var(--color-surface-alt); }
.kp-section--navy { background: var(--color-surface-navy); color: var(--navy-100); }
.kp-section--navy h2, .kp-section--navy h3 { color: #fff; }

/* Section header block: eyebrow + heading + lede, one per section. */
.kp-eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--jade-700);
    margin-bottom: var(--space-3);
}

.kp-section--navy .kp-eyebrow { color: var(--jade-400); }

.kp-lede {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    max-width: 640px;
}

.kp-section--navy .kp-lede { color: var(--navy-200); }

.kp-section-head { max-width: 760px; margin-bottom: var(--space-12); }
.kp-section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.kp-section-head--center .kp-lede { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.kp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    padding: 0.85rem 1.75rem;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

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

/* Primary: jade with navy text — the only AA-safe way to put text on jade. */
.kp-btn--primary {
    background: var(--jade-500);
    color: var(--navy-950);
}
.kp-btn--primary:hover { background: var(--jade-400); box-shadow: var(--shadow-cta); }

/* Solid navy: for use on light surfaces as a strong secondary. */
.kp-btn--navy { background: var(--navy-900); color: #fff; }
.kp-btn--navy:hover { background: var(--navy-700); }

/* Ghost: outline on light surfaces. */
.kp-btn--ghost { background: transparent; color: var(--navy-900); border-color: var(--gray-300); }
.kp-btn--ghost:hover { border-color: var(--navy-900); }

/* Ghost on navy sections. */
.kp-btn--ghost-inverse { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.kp-btn--ghost-inverse:hover { border-color: #fff; }

.kp-btn--lg { padding: 1.05rem 2.25rem; font-size: var(--text-lg); border-radius: var(--radius-lg); }
.kp-btn--sm { padding: 0.5rem 1.1rem; font-size: var(--text-sm); }

/* ==========================================================================
   Cards, badges, misc components
   ========================================================================== */

.kp-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease;
}

.kp-card--hover:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }

.kp-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-full);
    background: var(--jade-50);
    color: var(--jade-800);
}

.kp-badge--navy { background: var(--navy-50); color: var(--navy-800); }
.kp-badge--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.kp-badge--error { background: var(--color-error-bg); color: var(--color-error); }
.kp-badge--amber { background: var(--amber-100); color: var(--amber-600); }
.kp-badge--amber-solid { background: var(--amber-400); color: var(--navy-950); }

/* Feature icon chip (inline SVG goes inside). */
.kp-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--jade-50);
    color: var(--jade-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-5);
}
.kp-icon svg { width: 24px; height: 24px; }

/* Checklist rows used in feature/pricing lists. */
.kp-check { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-3); }
.kp-check svg { flex: none; width: 20px; height: 20px; color: var(--jade-600); margin-top: 2px; }

/* ==========================================================================
   Marketing header
   ========================================================================== */

.kp-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--gray-100);
}

.kp-header__in {
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.kp-header__logo img { height: 34px; }

.kp-nav { display: flex; gap: var(--space-6); flex: 1; }

.kp-nav a {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--navy-900);
    padding: var(--space-2) 0;
}
.kp-nav a:hover { color: var(--jade-700); text-decoration: none; }
.kp-nav a.is-active { color: var(--jade-700); box-shadow: inset 0 -2px 0 var(--jade-500); }

.kp-header__cta { display: flex; align-items: center; gap: var(--space-4); }

.kp-header__toggle { display: none; background: none; border: 0; padding: var(--space-2); cursor: pointer; color: var(--navy-900); }
.kp-header__toggle svg { width: 26px; height: 26px; }

/* ==========================================================================
   Footer
   ========================================================================== */

.kp-footer { background: var(--navy-950); color: var(--navy-200); padding: var(--space-20) 0 var(--space-8); }
.kp-footer a { color: var(--navy-200); }
.kp-footer a:hover { color: #fff; }

.kp-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-10);
    padding-bottom: var(--space-12);
    border-bottom: 1px solid var(--navy-800);
}

.kp-footer__brand img { height: 36px; margin-bottom: var(--space-4); filter: brightness(0) invert(1); }

.kp-footer h5 {
    color: #fff;
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
}

.kp-footer li { margin-bottom: var(--space-3); font-size: var(--text-sm); }

.kp-footer__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-8);
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-8);
    font-size: var(--text-sm);
    color: var(--navy-300);
}

.kp-footer__social { display: flex; gap: var(--space-3); }
.kp-footer__social a {
    width: 36px; height: 36px;
    border-radius: var(--radius-full);
    border: 1px solid var(--navy-700);
    display: inline-flex; align-items: center; justify-content: center;
}
.kp-footer__social a:hover { border-color: var(--jade-500); color: var(--jade-400); }
.kp-footer__social svg { width: 16px; height: 16px; }

/* ==========================================================================
   Grids
   ========================================================================== */

.kp-grid { display: grid; gap: var(--space-6); }
.kp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.kp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.kp-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Split section: text one side, visual the other. */
.kp-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
}
.kp-split--flip > :first-child { order: 2; }

/* ==========================================================================
   Image slots — swap-ready photography
   --------------------------------------------------------------------------
   Every photo on the site sits in a .kp-photo slot with a fixed aspect ratio,
   so real photography can be dropped in later (same filename, no redesign).
   Until then the slot shows a branded gradient placeholder.
   ========================================================================== */

.kp-photo {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background:
        radial-gradient(120% 100% at 85% 10%, rgba(52, 185, 139, 0.35), transparent 55%),
        linear-gradient(150deg, var(--navy-800), var(--navy-950));
    box-shadow: var(--shadow-lg);
}
.kp-photo img { width: 100%; height: 100%; object-fit: cover; }
.kp-photo--4x3 { aspect-ratio: 4 / 3; }
.kp-photo--16x10 { aspect-ratio: 16 / 10; }
.kp-photo--1x1 { aspect-ratio: 1 / 1; }

/* Small caption chip floated over a photo (e.g. a live-metric card). */
.kp-photo__chip {
    position: absolute;
    left: var(--space-5);
    bottom: var(--space-5);
    background: rgba(255, 255, 255, 0.96);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-3) var(--space-5);
}

/* ==========================================================================
   Data tables (superadmin-ready)
   ========================================================================== */

.kp-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.kp-table th {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray-500);
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border-bottom: 2px solid var(--gray-200);
    background: var(--gray-25);
}
.kp-table td { padding: var(--space-4); border-bottom: 1px solid var(--gray-100); color: var(--gray-700); }
.kp-table tr:hover td { background: var(--gray-25); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
    .kp h1 { font-size: var(--text-4xl); }
    .kp h2 { font-size: var(--text-3xl); }
    .kp-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .kp-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .kp-split { grid-template-columns: 1fr; gap: var(--space-10); }
    .kp-split--flip > :first-child { order: 0; }
    .kp-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
    .kp-section { padding: var(--space-16) 0; }
    .kp h1 { font-size: var(--text-3xl); }
    .kp h2 { font-size: var(--text-2xl); }
    .kp-grid--2, .kp-grid--3, .kp-grid--4 { grid-template-columns: 1fr; }
    .kp-footer__grid { grid-template-columns: 1fr; }

    .kp-nav {
        display: none;
        position: absolute;
        top: var(--header-h);
        left: 0; right: 0;
        background: #fff;
        border-bottom: 1px solid var(--gray-200);
        flex-direction: column;
        gap: 0;
        padding: var(--space-4) var(--space-6) var(--space-6);
        box-shadow: var(--shadow-md);
    }
    .kp-nav.is-open { display: flex; }
    .kp-nav a { padding: var(--space-3) 0; border-bottom: 1px solid var(--gray-100); }
    .kp-header__toggle { display: inline-flex; }
    .kp-header__cta .kp-btn--ghost { display: none; }
}