@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

/* =============================================================================
   GLOBAL.CSS — Jaipur Stone Industries
   Design tokens, base reset, typography, root utilities
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS
   ----------------------------------------------------------------------------- */
:root {
  /* Colors */
  --color-bg-primary:    #0E0E0E;
  --color-bg-secondary:  #151515;
  --color-bg-tertiary:   #1C1C1C;
  --color-bg-card:       #181818;

  --color-text-primary:  #EAEAEA;
  --color-text-secondary:#9A9A9A;
  --color-text-muted:    #5A5A5A;
  --color-text-inverse:  #0E0E0E;

  --color-border:        #2A2A2A;
  --color-border-light:  #333333;
  --color-border-hover:  #444444;

  --color-accent:        #C8A96E;   /* warm gold — natural stone feel */
  --color-accent-dark:   #A88850;
  --color-accent-light:  #DFC08A;
  --color-accent-subtle: rgba(200, 169, 110, 0.08);

  --color-white:         #FFFFFF;
  --color-black:         #000000;
  --color-overlay:       rgba(14, 14, 14, 0.72);

  /* Typography */
  --font-heading:  'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;

  --font-size-xs:    0.75rem;    /* 12px */
  --font-size-sm:    0.875rem;   /* 14px */
  --font-size-base:  1rem;       /* 16px */
  --font-size-md:    1.125rem;   /* 18px */
  --font-size-lg:    1.25rem;    /* 20px */
  --font-size-xl:    1.5rem;     /* 24px */
  --font-size-2xl:   2rem;       /* 32px */
  --font-size-3xl:   2.75rem;    /* 44px */
  --font-size-4xl:   3.5rem;     /* 56px */
  --font-size-5xl:   4.5rem;     /* 72px */

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;

  --line-height-tight:  1.1;
  --line-height-snug:   1.3;
  --line-height-base:   1.6;
  --line-height-relaxed:1.8;

  --letter-spacing-tight:  -0.03em;
  --letter-spacing-snug:   -0.02em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.06em;
  --letter-spacing-wider:   0.12em;

  /* Spacing scale */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px — inner spacing */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px — section spacing */
  --space-32:  8rem;      /* 128px */

  /* Section & grid */
  --section-spacing:   6rem;
  --inner-spacing:     3.5rem;
  --grid-gap:          2.5rem;
  --container-max:     1400px;
  --container-padding: clamp(1.25rem, 4vw, 3rem);

  /* Borders */
  --border-radius-sm:  4px;
  --border-radius-md:  8px;
  --border-radius-lg:  12px;
  --border-radius-xl:  20px;
  --border-radius-full:9999px;

  --border-width:      1px;
  --border-style:      solid;
  --border:            var(--border-width) var(--border-style) var(--color-border);

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.6);
  --shadow-xl:  0 24px 72px rgba(0,0,0,0.7);
  --shadow-accent: 0 0 40px rgba(200,169,110,0.12);

  /* Transitions */
  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms ease;
  --transition-xslow:   600ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-index layers */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-toast:    600;
}


/* -----------------------------------------------------------------------------
   2. BASE RESET
   ----------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
}

body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Remove list styles on ul/ol used as nav */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

ul, ol {
  list-style: none;
}

/* Link defaults */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}

/* Media defaults */
img,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Input / button resets */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

/* Table */
table {
  border-collapse: collapse;
}

/* Hidden utility */
[hidden] {
  display: none !important;
}


/* -----------------------------------------------------------------------------
   3. TYPOGRAPHY
   ----------------------------------------------------------------------------- */

/* Google Fonts import */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-snug);
  color: var(--color-text-primary);
}

h1 { font-size: var(--font-size-5xl); letter-spacing: var(--letter-spacing-tight); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-3xl); }
h4 { font-size: var(--font-size-2xl); }
h5 { font-size: var(--font-size-xl); }
h6 { font-size: var(--font-size-lg); }

p {
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  max-width: 68ch;
}

p.wide   { max-width: none; }
p.narrow { max-width: 48ch; }

strong { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
em     { font-style: italic; }

small  { font-size: var(--font-size-sm); }

/* Display-scale utility classes */
.text-display   { font-size: clamp(2.5rem, 6vw, var(--font-size-5xl)); font-family: var(--font-heading); font-weight: 700; line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); }
.text-headline  { font-size: clamp(1.75rem, 4vw, var(--font-size-4xl)); font-family: var(--font-heading); font-weight: 600; line-height: var(--line-height-snug); }
.text-title     { font-size: clamp(1.25rem, 2.5vw, var(--font-size-3xl)); font-family: var(--font-heading); font-weight: 600; }
.text-subtitle  { font-size: clamp(1rem, 1.5vw, var(--font-size-xl)); font-family: var(--font-heading); font-weight: 500; }
.text-body      { font-size: var(--font-size-base); line-height: var(--line-height-relaxed); }
.text-body-sm   { font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); }
.text-caption   { font-size: var(--font-size-xs); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }
.text-overline  { font-size: var(--font-size-xs); letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; font-weight: var(--font-weight-medium); color: var(--color-accent); }

/* Color utilities */
.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }
.text-accent    { color: var(--color-accent); }
.text-center    { text-align: center; }
.text-left      { text-align: left; }
.text-right     { text-align: right; }


/* -----------------------------------------------------------------------------
   4. SCROLLBAR
   ----------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-light);
  border-radius: var(--border-radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}


/* -----------------------------------------------------------------------------
   5. SELECTION
   ----------------------------------------------------------------------------- */
::selection {
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
}

::-moz-selection {
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
}


/* -----------------------------------------------------------------------------
   6. FOCUS STYLES
   ----------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--border-radius-sm);
}


/* -----------------------------------------------------------------------------
   7. GLOBAL INTERACTION RULES
   ----------------------------------------------------------------------------- */
[href],
[role="button"],
button,
input[type="submit"],
label[for],
select {
  cursor: pointer;
}

/* Smooth hover transitions on interactive elements */
a,
button,
[role="button"] {
  transition:
    color var(--transition-base),
    background-color var(--transition-base),
    border-color var(--transition-base),
    opacity var(--transition-base),
    transform var(--transition-base);
}


/* -----------------------------------------------------------------------------
   8. DIVIDERS
   ----------------------------------------------------------------------------- */
hr {
  border: none;
  border-top: var(--border);
  margin: var(--space-8) 0;
}

.divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-border);
}

.divider--accent {
  width: 48px;
  height: 2px;
  background-color: var(--color-accent);
}