@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=Space+Grotesk:wght@400;600;700&display=swap');

:root {
  /* --- Noir Industrial Palette for Index/About --- */
  --ni-background: #1C1C1C;
  --ni-header-footer: #2A2B2D;
  --ni-polygon: #7C8B92;
  --ni-main-title: #A3A3A3;
  --ni-main-title-about: #C9BFA4;
  --ni-header-button: #B6B0A0;
  --ni-light-text: #D0D0D0; /* Used for card titles and about page text */
  --ni-footer-header: #D0D0D0;
  --ni-footer-text: #7C8B92;
  --ni-carousel: #A3A3A3;
  --ni-image-name: #B66B2D;
  --ni-underline: #B6B0A0;
  --ni-white: #fcf9f7;

  /* --- Existing Foundation & Tarkov Palette (do not remove, used by Tarkov page) --- */
  --foundation-greylight: rgba(238, 238, 238, 1);
  --foundation-greylight-hover: rgba(229, 229, 229, 1);
  --foundation-greylight-active: rgba(201, 201, 201, 1);
  --foundation-greylight-darker: rgba(146, 146, 146, 0.795);
  --foundation-greynormal: rgba(82, 82, 82, 1);
  --foundation-greynormal-hover: rgba(74, 74, 74, 1);
  --foundation-greynormal-active: rgba(66, 66, 66, 1);
  --foundation-greydark-hover: rgba(49, 49, 49, 1);
  --foundation-greydark-active: rgba(37, 37, 37, 1);
  --foundation-greydarker: rgba(29, 29, 29, 1);
  --foundation-brownlight: rgba(252, 249, 247, 1);
  --foundation-brownlight-hover: rgba(251, 246, 243, 1);
  --foundation-brownlight-active: rgba(246, 237, 230, 1);
  --foundation-brownnormal: rgba(225, 198, 173, 1);
  --foundation-brownnormal-hover: rgba(203, 178, 156, 1);
  --foundation-brownnormal-active: rgba(180, 158, 138, 1);
  --foundation-browndark: rgba(169, 149, 130, 1);
  --foundation-browndark-hover: rgba(135, 119, 104, 1);
  --foundation-browndark-active: rgba(101, 89, 78, 1);
  --foundation-browndarker: rgba(79, 69, 61, 1);
  --Background-DM: rgba(27, 27, 27);
  --Background-FT: rgb(37, 37, 37);
  
  /* Enhanced Tarkov Game-Inspired Color Palette */
  --TarkovPageBackground: rgb(28, 28, 28); /* Default dark */
  --TarkovPageBackgroundActive: #1a1a18; /* Dark military green-tinted */
  --TarkovHeaderBackground: rgb(42, 42, 42); /* Default */
  --TarkovHeaderBackgroundActive: #2d3328; /* Dark olive */
  --TarkovFooterBackground: rgb(52, 52, 52); /* Default */
  --TarkovFooterBackgroundActive: #252823; /* Dark forest */
  --TarkovAccentGreen: #9fb986; /* Military green accent */
  --TarkovBorderGreen: #4a5f3a; /* Darker green for borders */
  --TarkovTextSand: #d4c5a9; /* Warm sand color for primary text */
  --TarkovTextMutedSand: #a89979; /* Muted sand for secondary text */
  --TarkovText: #e0e0e0; /* Softer light gray instead of pure white */
  --TarkovCardBackground: rgb(60, 63, 65);
  --TarkovSecondaryLink: rgb(190, 181, 162);
  --TarkovTitles: rgb(164, 140, 95);
  --TarkovMainTitle: rgb(255, 255, 255);
  --TarkovButton: rgb(90, 109, 90);
  --TarkovButtonHover: rgb(118, 140, 118);

  /* --- Fresh Market Grocery App Palette --- */
  --grocery-app-primary: #0076FF;      /* App titles, primary CTAs */
  --grocery-app-secondary: #8BC34A;    /* Green for buttons, interactables, highlights */
  --grocery-app-subheaders: #D17509;   /* Darker orange for better contrast while keeping freshness */
  --grocery-app-success: #FF4757;      /* Strawberry red for category tags, success alerts */
  --grocery-app-background: #F2F2F2;   /* Card backgrounds, UI spacing */
  --grocery-app-text: #1A1A1A;         /* Headings and body text */
  --grocery-app-text-light: #FFFFFF;   /* Light text for dark backgrounds */
  --grocery-app-white: #FFFFFF;        /* Pure white backgrounds */
  --grocery-app-section-bg: #F8F9FA;   /* Light section backgrounds */
  --grocery-app-border: #E0E0E0;       /* Subtle borders */

  /* --- Marketplace App Palette --- */
  --marketplace-primary: #6366F1;
  --marketplace-secondary: #8B5CF6;
  --marketplace-accent: #10B981;
  --marketplace-background: #F8FAFC;
  --marketplace-surface: #FFFFFF;
  --marketplace-text: #1E293B;
  --marketplace-text-secondary: #64748B;
  --marketplace-text-light: #FFFFFF;
  --marketplace-border: #E2E8F0;
  --marketplace-shadow: rgba(99, 102, 241, 0.1);
  --marketplace-section-bg: #F1F5F9;
}

:root {
  /* Font Families */
  --heading-font-family: 'Space Grotesk', sans-serif;
  --body-font-family: 'Manrope', sans-serif;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Font Sizes */
  --h0-font-size: 75px;
  --h1-font-size: 61px;
  --h2-font-size: 49px;
  --h3-font-size: 39px;
  --h4-font-size: 31px;
  --h5-font-size: 25px;
  --h6-font-size: 20px;
  --h7-font-size: 18px;
  --h8-font-size: 16px;
  --h9-font-size: 14px;
  --h10-font-size: 12px;
  --h11-font-size: 10px;

  /* Body & Small Text */
  --body-font-size: 18px;
  --small-font-size: 14px;
}

/* Tablet */
@media (max-width: 1279px) {
  :root {
    --h0-font-size: 60px;
    --h1-font-size: 49px;
    --h2-font-size: 39px;
    --h3-font-size: 31px;
    --h4-font-size: 25px;
    --h5-font-size: 20px;
    --h6-font-size: 18px;
    --h7-font-size: 16px;
    --h8-font-size: 14px;
    --h9-font-size: 13px;
    --h10-font-size: 11px;
    --h11-font-size: 9px;

    --body-font-size: 17px;
    --small-font-size: 13px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --h0-font-size: 48px;
    --h1-font-size: 39px;
    --h2-font-size: 31px;
    --h3-font-size: 25px;
    --h4-font-size: 20px;
    --h5-font-size: 18px;
    --h6-font-size: 16px;
    --h7-font-size: 15px;
    --h8-font-size: 13px;
    --h9-font-size: 12px;
    --h10-font-size: 11px;
    --h11-font-size: 10px;

    --body-font-size: 16px;
    --small-font-size: 13px;
  }
}

/* Extra Small Screens - Better accessibility for very small devices */
@media (max-width: 480px) {
  :root {
    --h0-font-size: 38px;
    --h1-font-size: 31px;
    --h2-font-size: 25px;
    --h3-font-size: 20px;
    --h4-font-size: 18px;
    --h5-font-size: 16px;
    --h6-font-size: 15px;
    --h7-font-size: 14px;
    --h8-font-size: 13px;
    --h9-font-size: 12px;
    --h10-font-size: 11px;
    --h11-font-size: 10px;

    --body-font-size: 16px; /* Keep at 16px minimum for accessibility */
    --small-font-size: 14px; /* Increased from 12px for better readability */
  }
}