/* ============================================================
   main.css — mineralslanka.com
   Global styles, design tokens, typography, layout
   Max Minerals Pvt. Ltd. | IAMUVIN
   ============================================================ */

/* === RESET === */

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  font-size: 100%;
}

body {
  min-height: 100vh;
  line-height: 1.6;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-body);
  background: var(--bg-page);
}

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

img {
  height: auto;
}

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

button {
  cursor: pointer;
}

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

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* === CUSTOM PROPERTIES — COLORS === */

:root {
  /* --- Brand Colors --- */
  --color-primary:         #1A5276;
  --color-primary-light:   #2471A3;
  --color-primary-hover:   #154360;
  --color-primary-dark:    #0E2F44;
  --color-primary-50:      #EAF2F8;
  --color-primary-100:     #D4E6F1;

  --color-secondary:       #2980B9;
  --color-secondary-light: #3498DB;
  --color-secondary-hover: #2471A3;

  --color-accent:          #1ABC9C;
  --color-accent-light:    #48C9B0;
  --color-accent-hover:    #17A589;
  --color-accent-50:       #E8F8F5;

  --color-gold:            #B7950B;
  --color-gold-light:      #D4AC0D;
  --color-gold-50:         #FEF9E7;

  /* --- Backgrounds --- */
  --bg-page:          #F5F8FC;
  --bg-surface:       #EAF2F8;
  --bg-surface-2:     #E1ECF4;
  --bg-card:          #FFFFFF;
  --bg-dark:          #0D2137;
  --bg-dark-alt:      #0A1C2E;
  --bg-overlay:       rgba(13, 33, 55, 0.72);

  /* --- Text --- */
  --text-primary:     #0D2137;
  --text-body:        #2C3E50;
  --text-muted:       #6B8BA4;
  --text-disabled:    #A9B8C6;
  --text-inverse:     #E8F4FD;
  --text-inverse-muted: #8BA4BC;

  /* --- Borders --- */
  --border-light:     #E8F0F7;
  --border-default:   #D8E8F4;
  --border-medium:    #A9CCE3;
  --border-strong:    #7FB3D3;
  --border-dark:      rgba(255, 255, 255, 0.08);
  --border-dark-med:  rgba(255, 255, 255, 0.15);

  /* --- Semantic --- */
  --color-success:    #1E8449;
  --color-success-bg: #EAFAF1;
  --color-warning:    #B7770D;
  --color-warning-bg: #FEF9E7;
  --color-error:      #C0392B;
  --color-error-bg:   #FADBD8;
  --color-info:       #1A5276;
  --color-info-bg:    #EAF2F8;

  /* --- Absolute Colors --- */
  --color-white:    #FFFFFF;
  --color-black:    #000000;

  /* --- Gradients --- */
  --gradient-top:   linear-gradient(90deg, #1A5276, #2980B9, #1ABC9C);
  --gradient-hero:  linear-gradient(135deg, #1A5276 0%, #0D2137 100%);
  --gradient-card:  linear-gradient(135deg, rgba(26, 82, 118, 0.04) 0%, rgba(26, 188, 156, 0.04) 100%);

  /* === Z-INDEX SYSTEM === */

  --z-base:       1;
  --z-content:    2;
  --z-sticky:     900;
  --z-nav:        1000;
  --z-progress:   1001;
  --z-mobile-menu: 1100;
  --z-skip-nav:   9000;
  --z-loader:     10000;

  /* === TYPOGRAPHY === */

  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Size scale */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;
  --text-7xl:   4.5rem;

  /* Type tokens */
  --type-display:  4.5rem;
  --type-h1:       3.5rem;
  --type-h1-mob:   2.25rem;
  --type-h2:       2.5rem;
  --type-h2-mob:   1.75rem;
  --type-h3:       1.75rem;
  --type-h3-mob:   1.375rem;
  --type-h4:       1.25rem;
  --type-lead:     1.25rem;
  --type-body:     1rem;
  --type-sm:       0.875rem;
  --type-xs:       0.75rem;

  /* Line heights */
  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* Letter spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;

  /* === SPACING (4px base grid) === */

  --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;

  /* === BORDER RADIUS === */

  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;
}

/* === BASE TYPOGRAPHY === */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
}

h1 {
  font-size: clamp(var(--type-h1-mob), 5vw, var(--type-h1));
}

h2 {
  font-size: clamp(var(--type-h2-mob), 4vw, var(--type-h2));
  font-weight: 600;
}

h3 {
  font-size: clamp(var(--type-h3-mob), 3vw, var(--type-h3));
  font-weight: 600;
}

h4 {
  font-size: var(--type-h4);
  font-weight: 600;
}

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

h6 {
  font-size: var(--text-base);
  font-weight: 600;
}

p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text-body);
  max-width: 65ch;
}

a {
  color: var(--color-primary);
  transition: color 180ms ease;
}

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

strong {
  font-weight: 600;
}

/* === CONTAINERS === */

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--container-px);
}

.container-sm {
  max-width: 768px;
  margin: 0 auto;
  padding: 0 var(--container-px);
}

.container-md {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--container-px);
}

.container-lg {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--container-px);
}

/* Container padding scales with viewport */
:root {
  --container-px: 1.25rem;  /* 20px — mobile */
}

@media (min-width: 640px)  { :root { --container-px: 2rem; } }     /* 32px */
@media (min-width: 768px)  { :root { --container-px: 2.5rem; } }   /* 40px */
@media (min-width: 1024px) { :root { --container-px: 3rem; } }     /* 48px */
@media (min-width: 1280px) { :root { --container-px: 4rem; } }     /* 64px */
@media (min-width: 1440px) { :root { --container-px: 5rem; } }     /* 80px */

/* === GRID SYSTEM === */

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

@media (max-width: 1023px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* === SECTION CLASSES === */

.section {
  padding: var(--space-24) 0;
}

.section-alt {
  background: var(--bg-surface);
}

.section-dark {
  background: var(--bg-dark);
  color: var(--text-inverse);
  position: relative;
  overflow: hidden;
}

/* Subtle accent glow on dark sections */
.section-dark::before {
  content: '';
  position: absolute;
  width: 40vw;
  height: 40vw;
  top: -20%;
  right: -10%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);
  filter: blur(100px);
  opacity: 0.06;
  pointer-events: none;
}

.section-header {
  max-width: 680px;
  margin-bottom: var(--space-12);
}

.section-header.centered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-header.centered .section-lead {
  margin-left: auto;
  margin-right: auto;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}

.section-title-dark {
  color: var(--text-inverse);
}

.section-lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--text-muted);
  max-width: 600px;
  margin-top: var(--space-4);
  line-height: 1.7;
}

/* === EYEBROW LABEL === */

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

/* === SKIP NAVIGATION === */

/* === SCREEN READER ONLY === */

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

.skip-nav {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: var(--z-skip-nav);
  background: var(--color-primary);
  color: var(--color-white);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.skip-nav:focus {
  top: 1rem;
}