/* =====================================================================
   NUTAN PET SHOP — DESIGN SYSTEM
   Single source of truth for COLORS and FONT SIZES.
   Change any value here and it cascades across the whole site.
   ===================================================================== */

:root {
    /* ---------- BRAND COLORS ---------- */
    --nps-white: #ffffff;
    --nps-bg: #ffffff;                 /* majority background */
    --nps-bg-soft: #fff8f4;            /* very light warm tint for sections */
    --nps-bg-alt: #f6f7f4;             /* light neutral section */

    --nps-red: #e12729;                /* primary brand red (nav bar) */
    --nps-red-dark: #b71c1e;
    --nps-red-light: #ff5a4d;

    --nps-orange: #f8681a;             /* secondary / CTAs */
    --nps-orange-dark: #d8540c;
    --nps-orange-light: #ff9a56;

    --nps-lime: #8bc34a;               /* light / lime green */
    --nps-green: #4caf50;              /* success / eco */
    --nps-green-dark: #2e7d32;

    --nps-yellow: #ffc531;             /* badges / highlights */
    --nps-yellow-dark: #f0a800;

    /* ---------- SEMANTIC ROLES ---------- */
    --nps-primary: var(--nps-red);
    --nps-primary-hover: var(--nps-red-dark);
    --nps-accent: var(--nps-orange);
    --nps-accent-hover: var(--nps-orange-dark);

    --nps-badge-discount: var(--nps-red);      /* discount % badge */
    --nps-badge-sale: var(--nps-orange);
    --nps-badge-new: var(--nps-lime);
    --nps-badge-rx: var(--nps-green-dark);     /* prescription flag */
    --nps-alert-bg: var(--nps-yellow);
    --nps-alert-text: #5a4300;

    /* ---------- TEXT ---------- */
    --nps-text: #2b2b2b;
    --nps-text-soft: #5c5c5c;
    --nps-text-muted: #8a8a8a;
    --nps-text-invert: #ffffff;
    --nps-heading: #1f1f1f;

    /* ---------- LINES / SURFACES ---------- */
    --nps-border: #ececec;
    --nps-border-strong: #d9d9d9;
    --nps-surface: #ffffff;
    --nps-surface-2: #fafafa;
    --nps-shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);
    --nps-shadow: 0 6px 22px rgba(0, 0, 0, .08);
    --nps-shadow-lg: 0 18px 48px rgba(0, 0, 0, .16);

    /* ---------- TYPOGRAPHY ---------- */
    --nps-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --nps-font-weight-normal: 400;
    --nps-font-weight-medium: 500;
    --nps-font-weight-bold: 600;

    --nps-fs-root: 16px;               /* base html font-size */
    --nps-fs-xxs: 0.75rem;             /* 12px */
    --nps-fs-xs: 0.8125rem;            /* 13px */
    --nps-fs-sm: 0.875rem;             /* 14px */
    --nps-fs-base: 0.9375rem;          /* 15px body */
    --nps-fs-md: 1rem;                 /* 16px */
    --nps-fs-lg: 1.125rem;             /* 18px */
    --nps-fs-xl: 1.375rem;             /* 22px */
    --nps-fs-2xl: 1.625rem;            /* 26px */
    --nps-fs-3xl: 2rem;                /* 32px */
    --nps-fs-4xl: 2.5rem;              /* 40px section titles */
    --nps-fs-hero: clamp(2rem, 4.5vw, 3.5rem);

    --nps-lh-tight: 1.2;
    --nps-lh: 1.55;

    /* ---------- SPACING / LAYOUT ---------- */
    --nps-container: 1240px;
    --nps-gutter: 16px;
    --nps-radius-sm: 6px;
    --nps-radius: 12px;
    --nps-radius-lg: 20px;
    --nps-radius-pill: 999px;

    /* ---------- MOTION ---------- */
    --nps-transition: 0.25s ease;
    --nps-transition-slow: 0.45s ease;

    /* ---------- SHARED SHAPES ---------- */
    /* Paw print used as a fun list marker (via mask, so any color works) */
    --nps-paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6.5' cy='9' r='1.9'/%3E%3Ccircle cx='11' cy='6.3' r='1.9'/%3E%3Ccircle cx='15.5' cy='6.3' r='1.9'/%3E%3Ccircle cx='19' cy='9.5' r='1.7'/%3E%3Cpath d='M12 11.5c-3 0-5.4 2-5.4 4.4 0 1.6 1.3 2.4 2.8 1.9 1.7-.5 3.5-.5 5.2 0 1.5.5 2.8-.3 2.8-1.9 0-2.4-2.4-4.4-5.4-4.4z'/%3E%3C/svg%3E");

    /* ---------- Z-INDEX ---------- */
    --nps-z-ticker: 60;
    --nps-z-header: 50;
    --nps-z-megamenu: 55;
    --nps-z-float: 70;
    --nps-z-overlay: 100;
}

/* Base element styling driven entirely by the tokens above */
html {
    font-size: var(--nps-fs-root);
}

body {
    font-family: var(--nps-font);
    font-size: var(--nps-fs-base);
    line-height: var(--nps-lh);
    color: var(--nps-text);
    background: var(--nps-bg);
    font-weight: var(--nps-font-weight-normal);
    overflow-x: clip;
    max-width: 100%;
}

html {
    overflow-x: clip;
    max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--nps-font);
    color: var(--nps-heading);
    line-height: var(--nps-lh-tight);
    font-weight: var(--nps-font-weight-bold);
    margin: 0 0 .5em;
}

a {
    color: var(--nps-primary);
    text-decoration: none;
    transition: color var(--nps-transition);
}

a:hover {
    color: var(--nps-primary-hover);
}

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

.nps-container {
    width: 100%;
    max-width: var(--nps-container);
    margin: 0 auto;
    padding: 0 var(--nps-gutter);
}

/* Reusable buttons */
.nps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    font-family: var(--nps-font);
    font-size: var(--nps-fs-base);
    font-weight: var(--nps-font-weight-medium);
    line-height: 1;
    padding: .75em 1.4em;
    border: 2px solid transparent;
    border-radius: var(--nps-radius-pill);
    cursor: pointer;
    transition: all var(--nps-transition);
    text-align: center;
}

.nps-btn--primary {
    background: var(--nps-primary);
    color: var(--nps-text-invert);
}
.nps-btn--primary:hover {
    background: var(--nps-primary-hover);
    color: var(--nps-text-invert);
}

.nps-btn--accent {
    background: var(--nps-accent);
    color: var(--nps-text-invert);
}
.nps-btn--accent:hover {
    background: var(--nps-accent-hover);
    color: var(--nps-text-invert);
}

.nps-btn--outline {
    background: transparent;
    border-color: var(--nps-primary);
    color: var(--nps-primary);
}
.nps-btn--outline:hover {
    background: var(--nps-primary);
    color: var(--nps-text-invert);
}

/* Badges */
.nps-badge {
    display: inline-flex;
    align-items: center;
    gap: .25em;
    font-size: var(--nps-fs-xxs);
    font-weight: var(--nps-font-weight-bold);
    line-height: 1;
    padding: .35em .6em;
    border-radius: var(--nps-radius-pill);
    color: var(--nps-text-invert);
    text-transform: uppercase;
    letter-spacing: .3px;
}
.nps-badge--discount { background: var(--nps-badge-discount); }
.nps-badge--sale { background: var(--nps-badge-sale); }
.nps-badge--new { background: var(--nps-badge-new); }
.nps-badge--rx { background: var(--nps-badge-rx); }
.nps-badge--alert {
    background: var(--nps-alert-bg);
    color: var(--nps-alert-text);
}

/* Section scaffolding */
.nps-section {
    padding: clamp(32px, 5vw, 64px) 0;
}
.nps-section--soft { background: var(--nps-bg-soft); }
.nps-section--alt { background: var(--nps-bg-alt); }

.nps-section__head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto clamp(20px, 3vw, 40px);
}
.nps-section__title {
    font-size: var(--nps-fs-4xl);
    color: var(--nps-heading);
}
.nps-section__title span { color: var(--nps-primary); }
.nps-section__subtitle {
    font-size: var(--nps-fs-md);
    color: var(--nps-text-soft);
    margin: 0;
}

.nps-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}